how to make webhosting pricing table for website 2021
<!DOCTYPE html>
Hosting package
Trial
$20 /per month
- 1 Domain Supported
- 30gb hosting
- ddos-protection 70gb
- dv ssl
- 20% faster
- 24/7 support
- Ordar now
</ul>
</div>
<div class="container">
<h1>Premium</h1>
<h2>$70 <span>/per month</span></h2>
<ul>
<li>5 Domain Supported</li>
<li>50gb hosting</li>
<li>ddos-protection 150gb</li>
<li>dv ssl</li>
<li>40% faster</li>
<li>24/7 support</li>
<li><a href="#">Ordar now</a></li>
</ul>
</div>
<div class="container">
<h1>Exclusive</h1>
<h2>$90 <span>/per month</span></h2>
<ul>
<li>10 Domain Supported</li>
<li>80gb hosting</li>
<li>ddos-protection 250gb</li>
<li>dv ssl</li>
<li>70% faster</li>
<li>24/7 support</li>
<li><a href="#">Ordar now</a></li>
</ul>
</div>
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: rgb(237, 233, 255);
min-height: 100vh;
}
.container {
width: 200px;
background: #111;
border-radius: 10px;
margin: 0 20px;
}
.container ul{
display: block;
top: 5px;
bottom: 10px;
}
.container ul li {
list-style: none;
color: #fff;
font-size: 15px;
padding: 8px 0;
text-transform: uppercase;
border-bottom: 1px solid #ccc;
margin: 0 10px;
}
.container ul li a{
position: relative;
color: #fff;
background: #ff056d;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
left: 20%;
margin: 10px 0;
}
h1 {
color: #fff;
background: #ff056d;
padding: 8px 10px;
text-align: center;
border-radius: 10px 10px 0 0;
}
h2 {
margin: 10px 10px;
font-size: 3rem;
color: #ff056d;
text-align: center;
}
h2 span {
font-size: 15px;
}
Top comments (0)