bootstrap-fluent-design_tem.../free/design-blocks/features.html

202 lines
8.0 KiB
HTML
Raw Permalink Normal View History

2021-04-15 13:11:19 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<div class="container my-5 p-5 shadow-3">
<!--Section: Features 1-->
<section>
<h3 class="text-center mb-4 pb-2">Why is it so great?</h3>
<p class="text-center mb-5">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque
nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt
quia cumque consequatur perferendis hic.
</p>
<div class="row">
<div class="col-lg-5 mb-4 mb-lg-0">
<img
src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg"
class="img-fluid"
alt="Sample image"
/>
</div>
<div class="col-lg-7">
<ul class="list-unstyled mb-0">
<li class="mb-5">
<div class="d-flex align-items-center mb-3">
<i class="fas fa-share text-primary fa-fw me-1"></i>
<h5 class="mb-0">Safety</h5>
</div>
<p class="mb-0 ms-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda
deleniti hic.
</p>
</li>
<li class="mb-5">
<div class="d-flex align-items-center mb-3">
<i class="fas fa-share text-primary fa-fw me-1"></i>
<h5 class="mb-0">Technology</h5>
</div>
<p class="mb-0 ms-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda
deleniti hic.
</p>
</li>
<li>
<div class="d-flex align-items-center mb-3">
<i class="fas fa-share text-primary fa-fw me-1"></i>
<h5 class="mb-0">Finance</h5>
</div>
<p class="mb-0 ms-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda
deleniti hic.
</p>
</li>
</ul>
</div>
</div>
</section>
<!--Section: Features 1-->
</div>
<br />
<div class="container my-5 p-5 shadow-3">
<!--Section: Features 2-->
<section class="text-center">
<h3 class="mb-4 pb-2">Why is it so great?</h3>
<p class="mb-5">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque
nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt
quia cumque consequatur perferendis hic.
</p>
<div class="row">
<div class="col-md-4 mb-4 mb-md-0">
<i class="fas fa-chart-area fa-3x text-primary"></i>
<h5 class="my-4">Analytics</h5>
<p class="mb-md-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
aperiam minima assumenda deleniti hic.
</p>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<i class="fas fa-book fa-3x text-primary"></i>
<h5 class="my-4">Tutorials</h5>
<p class="mb-md-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
aperiam minima assumenda deleniti hic.
</p>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<i class="far fa-comments fa-3x text-primary"></i>
<h5 class="my-4">Support</h5>
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
aperiam minima assumenda deleniti hic.
</p>
</div>
</div>
</section>
<!--Section: Features 2-->
</div>
<br />
<div class="container my-5 p-5 shadow-3">
<!--Section: Features 3-->
<section>
<h3 class="text-center mb-4 pb-2">Why is it so great?</h3>
<p class="text-center mb-5">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque
nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt
quia cumque consequatur perferendis hic.
</p>
<div class="row">
<div class="col-md-6 col-lg-4 mb-4">
<h5 class="mb-3"><i class="far fa-paper-plane text-primary pe-2"></i> Feature 1</h5>
<p>
Absolutely! We work with top payment companies which guarantees your safety and
security. All billing information is stored on our payment processing partner which
has the most stringent level of certification available in the payments industry.
</p>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<h5 class="mb-3"><i class="fas fa-pen-alt text-primary pe-2"></i> Feature 2</h5>
<p>
You can cancel your subscription anytime in your account. Once the subscription is
cancelled, you will not be charged next month. You will continue to have access to
your account until your current subscription expires.
</p>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<h5 class="mb-3"><i class="fas fa-user text-primary pe-2"></i> Feature 3</h5>
<p>
Currently, we only offer monthly subscription. You can upgrade or cancel your monthly
account at any time with no further obligation.
</p>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<h5 class="mb-3"><i class="fas fa-rocket text-primary pe-2"></i> Feature 4</h5>
<p>
Yes. Go to the billing section of your dashboard and update your payment information.
</p>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<h5 class="mb-3"><i class="fas fa-home text-primary pe-2"></i> Feature 5</h5>
<p>Unfortunately, not. We do not issue full or partial refunds for any reason.</p>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<h5 class="mb-3"><i class="fas fa-book-open text-primary pe-2"></i> Feature 6</h5>
<p>
Of course! Were happy to offer a free plan to anyone who wants to try our service.
</p>
</div>
</div>
</section>
<!--Section: Features 3-->
</div>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>