bootstrap-fluent-design_tem.../free/design-blocks/call-to-action.html

83 lines
3.2 KiB
HTML
Raw 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 text-center">
<!--Section: Call to action 1-->
<section>
<h3 class="mb-3">Call to action</h3>
<p class="mb-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam vitae, fuga similique
quos aperiam tenetur quo ut rerum debitis eum nemo exercitationem asperiores soluta
blanditiis velit, dolores optio cumque facilis! Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</p>
<button type="button" class="btn btn-danger btn-rounded">Download</button>
</section>
<!--Section: Call to action 1-->
</div>
<br />
<div class="container my-5 p-5 shadow-3 text-center">
<!--Section: Call to action 2-->
<section class="d-flex justify-content-center align-items-center">
<button type="button" class="btn btn-primary">
Download<i class="fas fa-download ms-2"></i>
</button>
<h3 class="ms-3 mb-0">Lorem ipsum dolor sit amet consectetur</h3>
</section>
<!--Section: Call to action 2-->
</div>
<br />
<div class="container my-5 p-5 shadow-3">
<!--Section: Call to action 3-->
<section class="text-center">
<h5 class="mb-3">Follow us on:</h5>
<a href="#!" class="mx-1" role="button"><i class="fab fa-facebook-f"></i></a>
<a href="#!" class="mx-1" role="button"><i class="fab fa-twitter"></i></a>
<a href="#!" class="mx-1" role="button"><i class="fab fa-linkedin-in"></i></a>
<a href="#!" class="mx-1" role="button"><i class="fab fa-instagram"></i></a>
<a href="#!" class="mx-1" role="button"><i class="fab fa-pinterest"></i></a>
<a href="#!" class="mx-1" role="button"><i class="fab fa-youtube"></i></a>
<a href="#!" class="mx-1" role="button"><i class="fab fa-github"></i></a>
<a href="#!" class="mx-1" role="button"><i class="fab fa-stack-overflow"></i></a>
</section>
<!--Section: Call to action 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>