How to make Responsive Pricing table 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;
}
body{
font-family: 'Be Vietnam Pro', sans-serif;
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.container{
min-height:100vh;
max-height:auto;
display:flex;
justify-content:center;
flex-direction: column;
align-items:center;
}
.tablebox{
border-radius: 5px;
text-align: center;
width:80vw;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius:5px;
}
table,th,td{
border: 1px solid #c2c2c2;
border-collapse: collapse;
}
table{
width:100%;
font-size:18px;
}
th{
padding:15px 3px;
font-size: 30px;
color: white;
background-color: #525252;
}
td{
padding:20px 10px;
}
tr:nth-child(even){
background-color: #fff;
}
tr:nth-child(odd){
background-color: #f0f0f0;
}
button{
padding: 10px;
width: 250px;
margin-left: 10px;
border-radius:5px;
border: none;
color: white;
font-size: 15px;
background-color: #525252;
}
button:hover{
cursor: pointer;
}
@media only screen and (max-width: 1024px){
.tablebox{
width:95vw;
height: fit-content;
}
th{
font-size:25px;
}
button{
width:100%;
margin-left: 0px;
}
}
@media only screen and (max-width: 630px){
.container{
width:100%;
height:fit-content;
}
.tablebox{
margin:10px 0px;
width:90vw;
height: fit-content;
}
button{
width:100%;
margin-left: 0px;
}
.tablebox th{
display: none;
}
.tablebox td{
display:grid;
grid-template-columns:15ch auto;
text-align: left;
padding:5px;
margin:5px;
border:none;
}
.tablebox td:first-child{
padding-top: 5px;
}
.tablebox td:last-child{
padding-bottom: 5px;
}
.tablebox td:nth-of-type(1)::before{
content: "Starter" " :";
}
.tablebox td:nth-of-type(2)::before{
content: "Proffessional" " :";
}
.tablebox td:nth-of-type(3)::before{
content: "Business" " :";
}
.tablebox td:nth-of-type(4)::before{
content: "Unlimited" " :";
}
}
.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:tomato;
font-size:20px;
}
Thank you for reading our blog. If you face any problem in Creating a Pricing Table 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