how to make webhosting pricing table for website 2021

Ascodeyt — Fri, 09 Jul 2021 10:15:28 +0000

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

DEV Community: Ascodeyt

how to make webhosting pricing table for website 2021

Trial

$20 /per month