How To Create Pricing Table For Website Or Domain Websites With Using Ht...

0 HTML And CSS Cooding August 30, 2022

HTML SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title>Pricing Table</title>

<link rel="stylesheet" type="text/css" href="b.css">

</head>

<body>

<div class="pricing-table">

<h2>Shared Hosting Plans</h2>

<div class="price-item">

<ul>

<li class="plan">Personal</li>

<li class="price">

<p>$2.99<small></small></p>

<span class="price-doller">$5.99</span>

<span class="discount">Save 50%</span>

</li>

<li class="btn"><button>Get Started</button></li>

<li class="list">30 GB SSD</li>

<li class="list">1 Website</li>

<li class="list">Domaine Name</li>

</ul></div>

<div class="price-item">

<ul>

<li class="plan plus">Business+</li>

<li class="price">

<p>$8.99<small></small></p>

<span class="price-doller">$17.99</span>

<span class="discount plus">Save 50%</span>

</li>

<li class="btn"><button class="plus">Get Started</button></li>

<li class="list">60 GB SSD</li>

<li class="list">Unlimited Websites</li>

<li class="list">Domaine Name</li>

<li class="list">AutoBackup</li>

</ul></div>

<div class="price-item">

<ul>

<li class="plan">Business</li>

<li class="price">

<p>$4.99<small></small></p>

<span class="price-doller">$9.99</span>

<span class="discount">Save 50%</span>

</li>

<li class="btn"><button>Get Started</button></li>

<li class="list">90 GB SSD</li>

<li class="list">Unlimited Websites</li>

<li class="list">Domaine Name</li>

</ul></div></div>

</body>

</html>

CSS SOURCE CODE

* {

margin: 0;

padding: 0; }

body {background: #eee;

font-family: 'Montseraat', sans-serif;}

.pricing-table {width: 80%;

text-align: center;

overflow: hidden;

margin-left: 10%;

margin-right: 10%;}

.pricing-table h2 {color: #6D6E70;

font-size: 40px;

margin-bottom: 5%;

margin-top: 5%;}

.pricing-table .price-item {background: #fff;

float: left;

width: 32%;

border-radius: 10px;}

.pricing-table .price-item:nth-of-type(1),

.pricing-table .price-item:nth-of-type(3) {

margin-top: 3%}

.pricing-table .price-item:nth-of-type(2),

.pricing-table .price-item:nth-of-type(3) {

margin-left: 1%;}

.pricing-table .price-item ul {

list-style: none;

transition: all .5s ease-in-out;}

.pricing-table .price-item ul:hover {

margin-top: -10px;}

.pricing-table .price-item ul li.plan {

padding: 15px;

font-size: 18px;

font-weight: bold;

color: #fff;

background: #007bff;

border-top-left-radius: 10px;

border-top-right-radius: 10px;}

.pricing-table .price-item ul li.plus {

background: #dc3545;

color: #fff;}

.pricing-table .price-item ul li.price {

padding: 15px;}

.pricing-table .price-item ul li.price p {

font-weight: bold;

font-size: 35px;

color: #414141;}

.pricing-table .price-item ul li.price p small {

font-size: 18px;

color: #6D6E70;

font-weight: normal;}

.pricing-table .price-item ul li.price span {

display: block;}

.pricing-table .price-item ul li.price .price-doller {

color:#6D6E70;

margin-top: 7%;

font-weight: bold;

text-decoration: line-through;}

.pricing-table .price-item ul li.price .discount {

color: #007bff;

margin-top: 7%;}

.pricing-table .price-item ul li.price .plus {

color: #dc3545;}

.pricing-table .price-item ul li.btn {

margin: 24px 0;}

.pricing-table .price-item ul li.btn button {

padding: 10px 32px;

font-size: 18px;

font-weight: bold;

color: #fff;

background: #007bff;

border:none;

border-radius: 10px;

cursor: pointer;

transition: all .3s ease-in-out;}

.pricing-table .price-item ul li.btn button:hover {

background: #1169D9;}

.pricing-table .price-item ul li.btn button.plus {

background: #dc3545;}

.pricing-table .price-item ul li.btn button.plus:hover {

background: #C82233;}

.pricing-table .price-item ul li.list {

padding: 10px;

border-bottom: 1px solid #f2f2f2;

font-weight: bold;}

.pricing-table .price-item ul li.list:last-of-type {

border-bottom: none;}

Bano Qudsia Quotes: The Queen of Urdu Literature

The Ultimate Jungle Adventure Movie List: 10 Must-Watch Movies for Fans ...

No title

No title

No title

How To Create Pricing Table For Website Or Domain Websites With Using Ht...

HTML SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title>Pricing Table</title>

<link rel="stylesheet" type="text/css" href="b.css">

</head>

<body>

<div class="pricing-table">

<h2>Shared Hosting Plans</h2>

<div class="price-item">

<ul>

<li class="plan">Personal</li>

<li class="price">

<p>$2.99<small></small></p>

<span class="price-doller">$5.99</span>

<span class="discount">Save 50%</span>

</li>

<li class="btn"><button>Get Started</button></li>

<li class="list">30 GB SSD</li>

<li class="list">1 Website</li>

<li class="list">Domaine Name</li>

</ul></div>

<div class="price-item">

<ul>

<li class="plan plus">Business+</li>

<li class="price">

<p>$8.99<small></small></p>

<span class="price-doller">$17.99</span>

<span class="discount plus">Save 50%</span>

</li>

<li class="btn"><button class="plus">Get Started</button></li>

<li class="list">60 GB SSD</li>

<li class="list">Unlimited Websites</li>

<li class="list">Domaine Name</li>

<li class="list">AutoBackup</li>

</ul></div>

<div class="price-item">

<ul>

<li class="plan">Business</li>

<li class="price">

<p>$4.99<small></small></p>

<span class="price-doller">$9.99</span>

<span class="discount">Save 50%</span>

</li>

<li class="btn"><button>Get Started</button></li>

<li class="list">90 GB SSD</li>

<li class="list">Unlimited Websites</li>

<li class="list">Domaine Name</li>

</ul></div></div>

</body>

</html>

CSS SOURCE CODE

* {

margin: 0;

padding: 0; }

body {background: #eee;

font-family: 'Montseraat', sans-serif;}

.pricing-table {width: 80%;

text-align: center;

overflow: hidden;

margin-left: 10%;

margin-right: 10%;}

.pricing-table h2 {color: #6D6E70;

font-size: 40px;

margin-bottom: 5%;

margin-top: 5%;}

.pricing-table .price-item {background: #fff;

float: left;

width: 32%;

border-radius: 10px;}

.pricing-table .price-item:nth-of-type(1),

.pricing-table .price-item:nth-of-type(3) {

margin-top: 3%}