bootstrap-fluent-design_tem.../free/design-blocks/explore.html
2021-04-15 14:11:19 +02:00

214 lines
7.5 KiB
HTML

<!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">
<!--Section: Explore 1-->
<section class="text-center">
<h3 class="mb-3 pb-3">Help Center</h3>
<p class="lead mb-5">
Cards include various options for customizing their backgrounds, borders, and color.
</p>
<div class="row text-start">
<div class="col-md-6 mb-4">
<div class="card hover-shadow">
<div class="card-body">
<p><i class="fas fa-comments fa-3x text-primary"></i></p>
<h5 class="dark-grey-text my-4">Outstanding Community</h5>
<p class="text-muted">
Now for manners use has company believe parlors. Least nor party who wrote while
did. Excuse formed as is agreed admire so on result parish. Put use set uncommonly
announcing and traveling.
</p>
<a href="#!">
<div class="mask"></div>
</a>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card hover-shadow">
<div class="card-body">
<p><i class="fas fa-cubes fa-3x text-warning"></i></p>
<h5 class="dark-grey-text my-4">Powerful Extensions</h5>
<p class="text-muted">
Now for manners use has company believe parlors. Least nor party who wrote while
did. Excuse formed as is agreed admire so on result parish. Put use set uncommonly
announcing and traveling.
</p>
<a href="#!">
<div class="mask"></div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--Section: Explore 1-->
</div>
<br />
<div class="container my-5">
<!--Section: Explore 2-->
<section class="text-center">
<h3 class="mb-3 pb-3">Start a project now</h3>
<p class="lead mb-5">
Hire expert freelancers for any job to be done online or become a freelancer and earn
money.
</p>
<div class="row text-start">
<div class="col-md-6 mb-4">
<div class="card hover-shadow">
<div class="card-body">
<div class="d-flex">
<div>
<div
class="d-inline-flex justify-content-center align-items-center rounded-circle me-4"
style="width: 100px; height: 100px; background-color: #eee;"
>
<i class="fab fa-react fa-2x text-info"></i>
</div>
</div>
<div>
<h5 class="dark-grey-text mb-3">I'm a developer</h5>
<p class="fw-light text-muted mb-0">
Your web pages looks good on all devices and screen sizes, including desktop,
tablet and mobile.
</p>
</div>
</div>
<a href="#!">
<div class="mask"></div>
</a>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card hover-shadow">
<div class="card-body">
<div class="d-flex">
<div>
<div
class="d-inline-flex justify-content-center align-items-center rounded-circle me-4"
style="width: 100px; height: 100px; background-color: #eee;"
>
<i class="far fa-user fa-2x text-secondary"></i>
</div>
</div>
<div>
<h5 class="dark-grey-text mb-3">I need a developer</h5>
<p class="fw-light text-muted mb-0">
Your web pages looks good on all devices and screen sizes, including desktop,
tablet and mobile.
</p>
</div>
</div>
<a href="#!">
<div class="mask"></div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--Section: Explore 2-->
</div>
<br />
<div class="container my-5">
<!--Section: Explore 3-->
<section class="text-center">
<h3 class="mb-3 pb-3">Unique Factors</h3>
<p class="lead mb-5">It's really easy to create a landing page for your awesome product.</p>
<div class="row">
<div class="col-md-6 col-lg-3 mb-4">
<div class="card hover-shadow">
<div class="card-body">
<p><i class="fas fa-tablet-alt fa-2x text-muted"></i></p>
<h5 class="black-text mb-0">Responsive</h5>
<a href="#!">
<div class="mask"></div>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="card hover-shadow">
<div class="card-body">
<p><i class="fas fa-cogs fa-2x text-muted"></i></p>
<h5 class="black-text mb-0">Customizable</h5>
<a href="#!">
<div class="mask"></div>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="card hover-shadow">
<div class="card-body">
<p><i class="fas fa-pencil-ruler fa-2x text-muted"></i></p>
<h5 class="black-text mb-0">UI Elements</h5>
<a href="#!">
<div class="mask"></div>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="card hover-shadow">
<div class="card-body">
<p><i class="fas fa-recycle fa-2x text-muted"></i></p>
<h5 class="black-text mb-0">Clean Code</h5>
<a href="#!">
<div class="mask"></div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--Section: Explore 3-->
</div>
<br />
<!-- 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>