How to Make Responsive Price List with HTML and CSS

Hi Everyone

I will represent how to make Responsive Price List

***  *** ***  *** ***  *** ***  *** *** Code HTML *** ``` Price List ``` *** *** Code CSS *** ``` body { font-family: Arial, Helvetica, sans-serif; background-color: #333; color: #fff; }

h2 {
text-align: center;
}

.contant {
float: left;
width: 33.3%;
padding: 8px;
box-sizing: border-box;
}

.price {
background-color: #fff;
color: #555;
list-style-type: none;
border: 1px solid #555;
margin: 0;
padding: 0;
transition: 0.3s;
}

.price:hover {
box-shadow: 0 10px 15px 0 #fff;
}

.price .header {
background-color: #4CAf50;
color: #fff;
font-size: 25px;
}

.price li {
padding: 20px;
border-bottom: 1px solid #eee;
text-align: center;
}

.price .box {
background-color:#f4f4f4;
font-size:20px;
}

.button {
background-color: #4CAf50;
border: none;
color: #fff;
padding: 10px 15px;
text-align: center;
text-decoration: none;
font-size: 20px;
}

.button:hover {
background-color: #eee;
color: #4CAf50;
}

@media(max-width:700px) {
.contant {
width: 100%;
}
.button {
padding: 10px 100px;
}
}

***
<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmYWJFK3dXNb1sWiwX8UUFai7NA4oMq5JG3MH5PmWxLrCF/DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg" alt="DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg">

<center><h3>🎄Thanks and have a nice day🎄</h3></center>

<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmYWJFK3dXNb1sWiwX8UUFai7NA4oMq5JG3MH5PmWxLrCF/DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg" alt="DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg">