Skip to content

Instantly share code, notes, and snippets.

@codenart

codenart/index.html

Last active March 3, 2018 23:45
Show Gist options
  • Save codenart/e36a8fb1e1ea97e5fcec063e10d21c03 to your computer and use it in GitHub Desktop.
Save codenart/e36a8fb1e1ea97e5fcec063e10d21c03 to your computer and use it in GitHub Desktop.
Download ZIP
Using for tutorials on codenart.github.io
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap's It</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="override.css">
</head>
<body>
<!-- Navigation Bar - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">
N A T U R E
</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">
<!-- Navigation Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Html</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Css</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">jQuery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Jekyll</a>
</li>
</ul>
<!-- Social Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebook</a>
</li>
</ul>
</div><!-- .collapse -->
</nav>
<!-- Header - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<header class="jumbotron jumbotron-fluid py-7 mb-0 text-center text-white bg-trees">
<div class="container">
<p class="lead">Learn coding with the wisest master !</p>
<h1 class="display-3">T R E E S</h1>
<a class="btn btn-primary btn-lg py-2 px-4 rounded-0 mt-4" href="#">
START NOW
</a>
</div>
</header>
<!-- Featured - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<section class="py-5">
<div class="container">
<h2 class="display-4 text-center">
We speak _
</h2>
<div class="row">
<section class="col-md py-5 text-center">
<h3 class="h1">HTML</h3>
<p class="lead">
A simplified version of English
</p>
<a class="btn btn-primary rounded-0" href="#">
Learn more
</a>
</section>
<section class="col-md py-5 text-center">
<h3 class="h1">CSS</h3>
<p class="lead">
Another version of English
</p>
<a class="btn btn-primary rounded-0" href="#">
Learn more
</a>
</section>
<section class="col-md py-5 text-center">
<h3 class="h1">JS</h3>
<p class="lead">
The next version of English
</p>
<a class="btn btn-primary rounded-0" href="#">
Learn more
</a>
</section>
</div>
</div>
</section>
<!-- Feedback - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<section class="py-5 bg-light">
<footer class="container">
<h2 class="display-4 text-center mb-5">
People say _
</h2>
<div class="row justify-content-around">
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p class="mb-0">Nature can teach better than we do.</p>
<footer class="blockquote-footer">W3club</footer>
</blockquote>
</div>
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p class="mb-0">Everything we teach can be found in nature.</p>
<footer class="blockquote-footer">Mozqito DevOps Network</footer>
</blockquote>
</div>
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p class="mb-0">Nature is not another university. It's life.</p>
<footer class="blockquote-footer">Albert English</footer>
</blockquote>
</div>
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p class="mb-0">Amazing teaching! They don't even use words.</p>
<footer class="blockquote-footer">Isaac New York</footer>
</blockquote>
</div>
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p class="mb-0">Ada, what do you think?</p>
<footer class="blockquote-footer">Nicola Tester</footer>
</blockquote>
</div>
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p class="mb-0">Like others said. Nature is the best.</p>
<footer class="blockquote-footer">Ada Lovely</footer>
</blockquote>
</div>
</div>
</div>
</section>
<!-- Subscription - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<section class="py-5">
<div class="container">
<h2 class="display-4 text-center mb-5">
And you _
</h2>
<div class="row justify-content-around">
<div class="col-md-6">
<form class="p-3 p-md-5 bg-light border-5">
<div class="lead font-weight-bold">Join 86,400 others in learning how to code.</div>
<div class="lead">Receive divine messages from the wisest masters.</div>
<div class="input-group mt-3">
<input type="text" class="form-control rounded-0"
placeholder="Enter your email address"
aria-label="Enter your email address">
<span class="input-group-btn">
<button class="btn btn-secondary rounded-0" type="submit">Subscribe</button>
</span>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<footer class="py-6 bg-dark text-white text-center">
&copy;2017 Made with
<span class="text-primary">&hearts;</span>
by Kei
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment