DEV Community

Ascodeyt
Ascodeyt

Posted on

how to make webhosting pricing table for website 2021

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;
}

Discussion (0)