Skip to content

Instantly share code, notes, and snippets.

@34fame

34fame/starter-template.html

Created January 15, 2021 17:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 34fame/8b7dc5b55e3bfffd18c4913197cea180 to your computer and use it in GitHub Desktop.
Save 34fame/8b7dc5b55e3bfffd18c4913197cea180 to your computer and use it in GitHub Desktop.
Download ZIP
Using Animate.css
Raw
starter-template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Custom CSS -->
<style>
.mm-jumbotron {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('jumbotron.jpg');
background-size: cover;
background-position: center;
}
</style>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<!-- Animate CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<title>Hello, world!</title>
</head>
<body>
<div class="animate__animated animate__fadeInLeft mm-jumbotron">
<div class="row justify-content-center align-content-center" style="height: 100%">
<div class="text-center text-light h1">Moreland Mentoring</div>
<div class="text-center text-light h4">EXPERIENCED. HUMBLE. PATIENT.</div>
<div class="mt-5 container text-justify text-center">
<a class="btn btn-outline-light btn-lg">BEGIN YOUR JOURNEY</a>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment