MDBootsrap CDN Starter Template
<!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>UNTITLED</title> | |
<!-- Font Awesome --> | |
<!-- Bootstrap core CSS --> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"> | |
<!-- Material Design Bootstrap --> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" rel="stylesheet"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.min.css"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
<link rel="shortcut icon" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/favicon.ico"> | |
<!-- Your custom styles (optional) --> | |
<!-- this had NOTHING in it ??? --> | |
<!-- link href="css/style.css" rel="stylesheet" --> | |
<style> | |
/* TEMPLATE STYLES */ | |
main { | |
padding-top: 3rem; | |
padding-bottom: 2rem; | |
} | |
.extra-margins { | |
margin-top: 1rem; | |
margin-bottom: 2.5rem; | |
} | |
</style> | |
</head> | |
<body> | |
<!--Main Navigation--> | |
<header> | |
<nav class="navbar navbar-expand-lg navbar-dark primary-color-dark"> | |
<a class="navbar-brand" href="#"><strong>Company</strong></a> | |
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
<ul class="navbar-nav mr-auto"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Opinions</a> | |
</li> | |
</ul> | |
<ul class="navbar-nav nav-flex-icons"> | |
<li class="nav-item"> | |
<a class="nav-link"><i class="fa fa-facebook"></i></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link"><i class="fa fa-twitter"></i></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link"><i class="fa fa-instagram"></i></a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
</header> | |
<!--Main Navigation--> | |
<main> | |
<!--Main layout--> | |
<div class="container"> | |
<!--First row--> | |
<div class="row"> | |
<div class="col-md-7"> | |
<!--Featured image --> | |
<div class="view overlay hm-white-light z-depth-1-half"> | |
<img src="https://mdbootstrap.com/images/proffesions/slides/socialmedia/img%20(2).jpg" class="img-fluid " alt=""> | |
<div class="mask"> | |
</div> | |
</div> | |
<br> | |
</div> | |
<!--Main information--> | |
<div class="col-md-5"> | |
<h2 class="h2-responsive wow fadeInDown">MDBoostrap CDN Starter Template <small>by Mr. M.</small></h2> | |
<hr> | |
<p> | |
<ul class="wow fadeInUp"> | |
<li>This is a starter template using CDN (Content Delivery Network). </li> | |
<li class="red-text">It's a great template to start learning <a href="https://mdbootstrap.com/">MDBootstrap</a>.</li> | |
<li>Everything you need to get started is in a <strong>single</strong> HTML page.</li> | |
<li><a href="https://www.thoughtco.com/content-delivery-network-3469509">Why use CDN's ?</a></li> | |
</ul> | |
<a href="https://gist.github.com/mrmccormack/1c3ba355f020d9901f0bb5af25f871f2" class="btn btn-primary">Get it now from GitHub.com!</a> | |
</div> | |
</div> | |
<!--/.First row--> | |
<hr class="extra-margins"> | |
<!--Second row--> | |
<div class="row"> | |
<!--First columnn--> | |
<div class="col-md-4"> | |
<!--Card--> | |
<div class="card"> | |
<!--Card image--> | |
<div class="view overlay hm-white-slight"> | |
<img src="https://mdbootstrap.com/images/regular/city/img%20(2).jpg" class="img-fluid" alt=""> | |
<a href="#"> | |
<div class="mask"></div> | |
</a> | |
</div> | |
<!--/.Card image--> | |
<!--Card content--> | |
<div class="card-block p-3"> | |
<!--Title--> | |
<h4 class="card-title">Card title</h4> | |
<!--Text--> | |
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
<a href="#" class="btn btn-primary">Read more</a> | |
</div> | |
<!--/.Card content--> | |
</div> | |
<!--/.Card--> | |
</div> | |
<!--First columnn--> | |
<!--Second columnn--> | |
<div class="col-md-4"> | |
<!--Card--> | |
<div class="card"> | |
<!--Card image--> | |
<div class="view overlay hm-white-slight"> | |
<img src="https://mdbootstrap.com/images/regular/city/img%20(4).jpg" class="img-fluid" alt=""> | |
<a href="#"> | |
<div class="mask"></div> | |
</a> | |
</div> | |
<!--/.Card image--> | |
<!--Card content--> | |
<div class="card-block p-3"> | |
<!--Title--> | |
<h4 class="card-title">Card title</h4> | |
<!--Text--> | |
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
<a href="#" class="btn btn-primary">Read more</a> | |
</div> | |
<!--/.Card content--> | |
</div> | |
<!--/.Card--> | |
</div> | |
<!--Second columnn--> | |
<!--Third columnn--> | |
<div class="col-md-4"> | |
<!--Card--> | |
<div class="card"> | |
<!--Card image--> | |
<div class="view overlay hm-white-slight"> | |
<img src="https://mdbootstrap.com/images/regular/city/img%20(8).jpg" class="img-fluid" alt=""> | |
<a href="#"> | |
<div class="mask"></div> | |
</a> | |
</div> | |
<!--/.Card image--> | |
<!--Card content--> | |
<div class="card-block p-3"> | |
<!--Title--> | |
<h4 class="card-title">Card title</h4> | |
<!--Text--> | |
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
<a href="#" class="btn btn-primary">Read more</a> | |
</div> | |
<!--/.Card content--> | |
</div> | |
<!--/.Card--> | |
</div> | |
<!--Third columnn--> | |
</div> | |
<!--/.Second row--> | |
</div> | |
<!--/.Main layout--> | |
</main> | |
<div class="container"> | |
<!-- Example row of columns --> | |
<div class="row"> | |
<div class="col-md-3"> | |
</div> | |
<div class="col-md-6"> | |
<!-- Form login --> | |
<form> | |
<p class="h5 text-center mb-4">Sample Form</p> | |
<div class="md-form"> | |
<i class="fa fa-envelope prefix grey-text"></i> | |
<input type="text" id="defaultForm-email" class="form-control"> | |
<label for="defaultForm-email">Your email</label> | |
</div> | |
<div class="md-form"> | |
<i class="fa fa-lock prefix grey-text"></i> | |
<input type="password" id="defaultForm-pass" class="form-control"> | |
<label for="defaultForm-pass">Your password</label> | |
</div> | |
<div class="text-center"> | |
<button class="btn btn-default">Login</button> | |
</div> | |
</form> | |
<!-- Form login --> | |
</div> | |
<div class="col-md-3"> | |
</div> | |
</div> | |
</div> | |
<!--Footer--> | |
<footer class="page-footer primary-color-dark center-on-small-only"> | |
<!--Footer Links--> | |
<div class="container"> | |
<div class="row"> | |
<!--First column--> | |
<div class="col-md-6"> | |
<h5 class="title">Footer Content</h5> © 2017 <a href="https://mdbootstrap.com"> MDBootstrap.com </a> | |
<p> | |
Built with <i style="color:red;" class="fa fa-heart faa-pulse animated"></i> by Rob McCormack on Github.com <br> | |
<a href="https://validator.w3.org/nu/?doc=http://mrmccormack.com/mdbootstrap-template-cdn.html" target="_blank"><small>• HTML valid • </small></a> | |
</p> | |
</div> | |
<!--/.First column--> | |
<!--Second column--> | |
<div class="col-md-6"> | |
<h5 class="title">Links</h5> | |
<ul> | |
<li><a href="http://mrmccormack.com/mdbootstrap-template-cdn.html">This page on GitHub</a></li> | |
<li><a href="#!">Link 2</a></li> | |
<li><a href="#!">Link 3</a></li> | |
<li><a href="#!">Link 4</a></li> | |
</ul> | |
</div> | |
<!--/.Second column--> | |
</div> | |
</div> | |
<!--/.Footer Links--> | |
</footer> | |
<!--/.Footer--> | |
<!-- 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/popper.js/1.11.0/umd/popper.min.js"></script> | |
<!-- Bootstrap core JavaScript --> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> | |
<!-- MDB core JavaScript --> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js"></script> | |
<script> | |
wow = new WOW().init(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment