mdbootstrap4-pro
Version:
MDBootstrap 4 PRO
172 lines (122 loc) • 4.85 kB
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 Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="../../css/bootstrap/bootstrap.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="../../css/mdb.css">
<!--Custom styles-->
<style>
.code-toolbar {
background-color: #eee;
}
</style>
</head>
<body class="fixed-sn">
<!--Main Layout-->
<main>
<div class="container-fluid">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-8 col-md-12">
<!--Section: Intro-->
<section class="card card-cascade wider reverse mb-5">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="img-fluid">
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--/Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Title-->
<h4 class="card-title">
<strong>Post title something something</strong>
</h4>
<h5>by
<a href="" class="indigo-text">Michal Szymanski</a>, May 8th, 2017</h5>
<div class="mt-4">
<!--Facebook-->
<a class="btn btn-fb btn-sm">
<i class="fa fa-facebook"></i>
facebook
</a>
<span class="counter">22</span>
<span class="mx-2 hidden-md-down"></span>
<a class="btn btn-outline-primary btn-sm">
<i class="fa fa-comments-o"></i>
comments
</a>
<span class="counter">22</span>
</div>
</div>
<!--/.Card content-->
</section>
<!--Section: Intro-->
<!--Tutorial content here-->
<!--Tutorial content here-->
<hr class="mt-5">
<!--Section: Tutorial UI-->
<section class="text-center">
<p>If something doesn’t work as expected, you can download a final code for this lesson here:</p>
<a role="button" href="" class="btn btn-outline-primary btn-rounded">Download
<i class="fa fa-download ml-1"></i>
</a>
<a role="button" href="" class="btn btn-outline-primary">Live preview
<i class="fa fa-eye ml-1"></i>
</a>
<a role="button" href="" class="btn btn-primary">Next lesson
<i class="fa fa-arrow-right ml-1"></i>
</a>
</section>
<!--Section: Tutorial UI-->
<hr>
<!--Section: Share buttons-->
<section class="text-center">
<p>Do you want to share?</p>
<!--Facebook-->
<a role="button" class="btn-floating btn-fb">
<i class="fa fa-facebook"></i> Facebook</a>
<!--Twitter-->
<a role="button" class="btn-floating btn-tw">
<i class="fa fa-twitter"></i> Twitter</a>
<!--Google +-->
<a role="button" class="btn-floating btn-gplus">
<i class="fa fa-google-plus left"></i> Google +</a>
</section>
<!--Section: Share buttons-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12">
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</main>
<!--Main Layout-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.js"></script>
<!--Custom scripts-->
<script>
</script>
</body>
</html>