1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container my-5">
<!--Section: Content-->
<section class="text-center">
<!-- Section heading -->
<h3 class="font-weight-bold dark-grey-text pb-2 mb-4">Our pricing plans Website</h3>
<!-- Section description -->
<p class="text-muted w-responsive mx-auto mb-5">SoengSouy.Webdesign Is a free online learning program that introduces methods and how to coding websites from the limit First, to the highest level. In the there are websites such as HTML, CSS, Javascript, PHP,
How to Learn Website Design Template ,Layout, Footer, Panel Right ,Panel Left,Other.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-4">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="aqua-gradient rounded-top">
<h4 class="option">BASIC</h4>
</div>
<!-- Features -->
<div class="card-body striped green-striped card-background px-5">
<h2 class="my-4 pb-3 h1">20$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn aqua-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="peach-gradient rounded-top">
<h4 class="option">PRO</h4>
</div>
<!-- Features -->
<div class="card-body striped orange-striped card-background px-5">
<h2 class="my-4 pb-3 h1">80$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn peach-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="purple-gradient rounded-top">
<h4 class="option">ENTERPRISE</h4>
</div>
<!-- Features -->
<div class="card-body striped purple-striped card-background px-5">
<h2 class="my-4 pb-3 h1">100$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn purple-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!--Section: Content-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container my-5">
<!--Section: Content-->
<section class="text-center">
<!-- Section heading -->
<h3 class="font-weight-bold dark-grey-text pb-2 mb-4">Our pricing plans Website</h3>
<!-- Section description -->
<p class="text-muted w-responsive mx-auto mb-5">SoengSouy.Webdesign Is a free online learning program that introduces methods and how to coding websites from the limit First, to the highest level. In the there are websites such as HTML, CSS, Javascript, PHP,
How to Learn Website Design Template ,Layout, Footer, Panel Right ,Panel Left,Other.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-4">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="aqua-gradient rounded-top">
<h4 class="option">BASIC</h4>
</div>
<!-- Features -->
<div class="card-body striped green-striped card-background px-5">
<h2 class="my-4 pb-3 h1">20$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn aqua-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="peach-gradient rounded-top">
<h4 class="option">PRO</h4>
</div>
<!-- Features -->
<div class="card-body striped orange-striped card-background px-5">
<h2 class="my-4 pb-3 h1">80$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn peach-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4">
<!-- Pricing card -->
<div class="card pricing-card white-text">
<!-- Price -->
<div class="purple-gradient rounded-top">
<h4 class="option">ENTERPRISE</h4>
</div>
<!-- Features -->
<div class="card-body striped purple-striped card-background px-5">
<h2 class="my-4 pb-3 h1">100$</h2>
<ul>
<li>
<p><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn purple-gradient btn-rounded">Buy now</button>
</div>
<!-- Features -->
</div>
<!-- Pricing card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!--Section: Content-->
</div>
</body>
</html>
|
2.styles.css
.h4, h4 {
font-size: 1.5rem;
color: white;
}
.mb-4, .my-4 {
margin-bottom: 1.5rem!important;
}
.pricing-card {
text-align: center;
}
.card {
font-weight: 400;
border: 0;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
0 2px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
0 2px 10px 0 rgba(0,0,0,0.12);
}
.aqua-gradient {
background: linear-gradient(40deg, #2096ff, #05ffa3)
!important;
}
.rounded-top {
border-top-left-radius: .25rem!important;
border-top-right-radius: .25rem!important;
}
.pricing-card .option {
padding: 2.5rem;
margin-bottom: 0;
font-weight: 500;
}
.pricing-card .card-background {
background-color: #28283f;
border-radius: 0 0 .25rem .25rem;
}
.pricing-card .striped {
padding: 1rem;
}
.pl-5, .px-5 {
padding-left: 3rem!important;
}
.pr-5, .px-5 {
padding-right: 3rem!important;
}
.pricing-card ul {
padding: 0;
list-style-type: none;
}
.pricing-card .striped.green-striped li {
border-color: #33c28a;
}
.pricing-card .striped li {
margin-bottom: 1rem;
border-bottom: 1px solid rgba(238,238,238,0.298039);
}
h2,ul li p {
color: white;
}
.btn-rounded {
color: white !important;
font-weight: 600 !important;
border-radius: 1px !important;
}
.btn {
margin: .375rem;
color: inherit;
text-transform: uppercase;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
border: 0;
border-radius: .125rem;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
0 2px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
0 2px 10px 0 rgba(0,0,0,0.12);
padding: .84rem 2.14rem;
font-size: .81rem;
}
.aqua-gradient {
background: linear-gradient(40deg, #2096ff, #05ffa3)
!important;
}
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
.peach-gradient {
background: linear-gradient(40deg, #ffd86f, #fc6262)
!important;
}
.purple-gradient {
background: linear-gradient(40deg, #ff6ec4, #7873f5)
!important;
}
.pricing-card .striped.orange-striped li {
border-color: #e97d63;
}
.pricing-card .striped.purple-striped li {
border-color: #963c94;
}
.h4, h4 {
font-size: 1.5rem;
color: white;
}
.mb-4, .my-4 {
margin-bottom: 1.5rem!important;
}
.pricing-card {
text-align: center;
}
.card {
font-weight: 400;
border: 0;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
0 2px 10px 0 rgba(0,0,0,0.12); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); } .aqua-gradient { background: linear-gradient(40deg, #2096ff, #05ffa3) !important; } .rounded-top { border-top-left-radius: .25rem!important; border-top-right-radius: .25rem!important; } .pricing-card .option { padding: 2.5rem; margin-bottom: 0; font-weight: 500; } .pricing-card .card-background { background-color: #28283f; border-radius: 0 0 .25rem .25rem; } .pricing-card .striped { padding: 1rem; } .pl-5, .px-5 { padding-left: 3rem!important; } .pr-5, .px-5 { padding-right: 3rem!important; } .pricing-card ul { padding: 0; list-style-type: none; } .pricing-card .striped.green-striped li { border-color: #33c28a; } .pricing-card .striped li { margin-bottom: 1rem; border-bottom: 1px solid rgba(238,238,238,0.298039); } h2,ul li p { color: white; } .btn-rounded { color: white !important; font-weight: 600 !important; border-radius: 1px !important; } .btn { margin: .375rem; color: inherit; text-transform: uppercase; word-wrap: break-word; white-space: normal; cursor: pointer; border: 0; border-radius: .125rem; -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); padding: .84rem 2.14rem; font-size: .81rem; } .aqua-gradient { background: linear-gradient(40deg, #2096ff, #05ffa3) !important; } .mb-3, .my-3 { margin-bottom: 1rem!important; } .peach-gradient { background: linear-gradient(40deg, #ffd86f, #fc6262) !important; } .purple-gradient { background: linear-gradient(40deg, #ff6ec4, #7873f5) !important; } .pricing-card .striped.orange-striped li { border-color: #e97d63; } .pricing-card .striped.purple-striped li { border-color: #963c94; } |
0 Comments
CAN FEEDBACK
Emoji