How to make Pricing Card 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;
background: url('https://cdn.pixabay.com/photo/2016/11/29/06/37/lines-1867838_1280.jpg');
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.p1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
height: 500px;
width: 1000px;
background-color: transparent;
font-family: 'Poppins', sans-serif;
}
.head {
width: 100%;
height: 20%;
background-color:transparent;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: aliceblue;
}
#line{
border: 1.5px;
border-style: solid;
width: 60px;
}
.content{
height: 80%;
width: 100%;
display: flex;
justify-content: space-evenly;
}
.card {
width: 270px;
height: 89%;
border-radius: 20px;
background: #ffffff;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),-6px -6px 10px -1px rgba(255,255,255,0.7);
}
.title{
height: 20%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#title{
font-size: 1em;
font-weight: 600;
}
.price{
height: 20%;
width: 100%;
display: flex;
justify-content: right;
}
.box{
height: 80%;
width: 250px;
display: flex;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),-6px -6px 10px -1px rgba(255,255,255,0.7);
border-radius: 500px 0 0 500px;
align-items: center;
justify-content: center;
}
.words{
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;
margin-right: 20px;
text-align: center;
height: 40%;
}
#words{
font-size: 12px;
font-weight: 500;
}
#price{
font-size: 25px;
font-weight: 800;
color: rgb(255, 255, 255);
}
.btn {
width: 130px;
height: 40px;
font-size: 1.1em;
cursor: pointer;
background-color: #302d2d;
color: #fff;
border: none;
border-radius: 5px;
transition: all .4s;
display: flex;
margin-left: 25%;
justify-content: center;
align-items: center;
}
.btn:hover {
border-radius: 5px;
transform: translateY(-10px);
box-shadow: 0 7px 0 -2px #f85959,0 15px 0 -4px #39a2db,0 16px 10px -3px #39a2db;
}
.btn:active {
transition: all 0.2s;
transform: translateY(-5px);
box-shadow: 0 2px 0 -2px #f85959,0 8px 0 -4px #39a2db,0 12px 10px -3px #39a2db;
}
#color1{
background: linear-gradient(to right ,rgb(243, 108, 108),#ecbb84);
}
#color2{
background: linear-gradient(to right,rgb(96, 232, 157),rgb(139, 255, 236))
}
#heading{
font-size: 1.5em;
font-weight: 800;
}
@media screen and (max-width:850px){
.container{
height: auto;
width: auto;
}
.p1{
height: auto;
width: auto;
}
.content{
flex-direction: column;
}
.card{
width: 270px;
height: 400px;
margin-top: 20px;
}
}
.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 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