How to make Pricing card UI design using html and css.[Source Code]
To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
/**
Hello Future Developer Thanks for Using learningrobo.com,
Check our website Regularly For New Snippets Post.
Share & Support us
**/
*{
box-sizing: border-box;
}
.container{
height: 100vh;
width: 100vw;
display: flex;
background-color: rgb(232, 232, 232);
margin: 0;
justify-content: center;
font-family: 'Roboto', sans-serif;
flex-direction: column;
}
.p1{
height: 500px ;
width: 900px;
background-color: transparent;
display: flex;
margin: auto;
justify-content: space-evenly;
border-radius: 10px;
}
.d1{
height: 89%;
width: 30%;
background-color: rgb(255, 255, 255);
display: flex;
margin: auto;
box-shadow: 10px 10px rgb(160, 154, 160);
flex-direction: column;
border-radius: 10px;
transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.d2{
height: 89%;
width: 30%;
background-color: rgb(255, 255, 255);
display: flex;
margin: auto;
box-shadow: 10px 10px rgb(160, 154, 160);
flex-direction: column;
border-radius: 10px;
transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.d3{
height: 89%;
width: 30%;
background-color: rgb(255, 255, 255);
display: flex;
margin: auto;
box-shadow: 10px 10px rgb(160, 154, 160);
flex-direction: column;
border-radius: 10px;
transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.title1 {
height: 15%;
width: auto;
display: flex;
justify-content: center;
background: linear-gradient(to right,rgb(233, 151, 255),rgb(155, 147, 255));
align-items: center;
border-radius: 10px;
color: white;
}
.title2 {
height: 15%;
width: auto;
display: flex;
justify-content: center;
background: linear-gradient(to right,rgb(255, 151, 152),rgb(220, 147, 255));
align-items: center;
border-radius: 10px;
color: white;
}
.title3 {
height: 15%;
width: auto;
display: flex;
justify-content: center;
background: linear-gradient(to right,rgb(255, 157, 151),rgb(255, 218, 147));
align-items: center;
border-radius: 10px;
color: white;
}
.sub2{
display: flex;
height: 20%;
width: auto;
justify-content: center;
}
.line{
border: 1px solid white;
width: 80%;
}
.sub3{
height: 40%;
display: flex;
flex-direction: column;
}
.sub3 ul li{
list-style-type: none;
}
.but{
height: auto;
width: auto;
display: flex;
}
.but button{
display: flex;
margin: auto;
justify-content: center;
border: 2px solid #606060;
height: 50px;
width: 200px;
text-align: center;
background-color: rgb(255, 255, 255);
border-radius: 30px;
transition: background-color 0.3s, color 0.3s, transform 0.3s;
cursor: pointer;
}
.but button span{
display: flex;
margin: auto;
justify-content: center;
text-align: center;
font-size: 15px;
}
.but button:hover{
background-color: grey;
color: rgb(255, 255, 255);
transform: scale(1.1);
border: 2px solid rgb(219, 219, 219);
}
.d1:hover{
transform: scale(1.1);
}
.d2:hover{
transform: scale(1.1);
}
.d3:hover{
transform: scale(1.1);
}
@media screen and (max-width: 900px){
.container{
height: auto;
width: auto;
}
.p1{
display: flex;
flex-direction: column;
height: 1700px;
width: 500px;
}
.d1{
display: flex;
height: 500px;
width: 300px;
}
.d2{
display: flex;
height: 500px;
width: 300px;
}
.d3{
display: flex;
height: 500px;
width: 300px;
}
}
.credit a {
text-decoration: none;
color: #121212;
font-weight: 800;
}
.credit {
color: #121212;
text-align: center;
margin-top: 10px;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
color:#000;
font-size:20px;
}
Thank you for reading our blog. If you face any problem in Creating a Pricing card UI design using html and css., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.
Explore
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
In Our older post it doesnot work we working on that.
Post a Comment
Thank you
Learning robo team