Skip to content

Instantly share code, notes, and snippets.

@semiarthanoian

semiarthanoian/bootstrap-it.html

Created April 25, 2022 14:24
Show Gist options
  • Save semiarthanoian/8c714347d6331e70d4f83caa6ceb113c to your computer and use it in GitHub Desktop.
Save semiarthanoian/8c714347d6331e70d4f83caa6ceb113c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap-it.html
<!doctype html>
<html lang="en" dir="ltr">
<head>
<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">
<title>Homepage - Bootstrap It !</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="override.css">
</head>
<body>
<!-- Navigation Bar - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top p-0">
<a class="navbar-brand bg-primary px-4 py-3" href="#">
N A T U R E
</a>
<button class="navbar-toggler px-4 py-3 border-0" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav border-top border-lg-0">
<li class="nav-item">
<a class="nav-link px-4 px-lg-2 py-3" href="#">Html</a>
</li>
<li class="nav-item">
<a class="nav-link px-4 px-lg-2 py-3" href="#">Css</a>
</li>
<li class="nav-item">
<a class="nav-link px-4 px-lg-2 py-3 active" aria-current="page" href="#">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link px-4 px-lg-2 py-3" href="#">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link px-4 px-lg-2 py-3" href="#">jQuery</a>
</li>
<li class="nav-item">
<a class="nav-link px-4 px-lg-2 py-3" href="#">Jekyll</a>
</li>
<li class="nav-item">
<a class="nav-link px-4 px-lg-2 py-3" href="#">Sample</a>
</li>
</ul>
<ul class="navbar-nav ms-auto me-0 me-lg-3 border-top border-lg-0">
<li class="nav-item">
<a class="nav-link px-4 px-lg-2 py-3" href="#">Github</a>
</li>
<li class="nav-item">
<a class="nav-link px-4 px-lg-2 py-3" href="#">YouTube</a>
</li>
<li class="nav-item">
<a class="nav-link px-4 px-lg-2 py-3" href="#">Facebook</a>
</li>
</ul>
</div><!-- .navbar-collapse -->
</nav>
<!-- Header - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<header class="py-7 text-center text-white bg-trees">
<div class="container-fluid">
<p class="lead fw-normal">"Learn to code with the wisest master !"</p>
<h1 class="display-1">T R E E S</h1>
<a class="btn btn-primary btn-lg px-5 py-3 rounded-0 mt-3" href="#">START NOW</a>
</div><!-- .container -->
</header>
<!-- Featured - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<section class="py-5">
<div class="container-fluid px-4">
<h2 class="display-4 text-center">We speak _</h2>
<div class="row my-4">
<div class="col-md py-3">
<section class="py-5 text-center bg-light">
<h3 class="h2">HTML</h3>
<p class="lead">A simplified version of English</p>
<a class="btn btn-primary rounded-0" href="#">Learn more</a>
</section>
</div><!-- .col -->
<div class="col-md py-3">
<section class="py-5 text-center bg-light">
<h3 class="h2">CSS</h3>
<p class="lead">Another version of English</p>
<a class="btn btn-primary rounded-0" href="#">Learn more</a>
</section>
</div><!-- .col -->
<div class="col-md py-3">
<section class="py-5 text-center bg-light">
<h3 class="h2">JavaScript</h3>
<p class="lead">The next version of English</p>
<a class="btn btn-primary rounded-0" href="#">Learn more</a>
</section>
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
</section>
<!-- Feedback - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<section class="py-5 bg-light">
<footer class="container">
<h2 class="display-4 text-center">People say _</h2>
<div class="row justify-content-around mt-5 mb-3">
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p>Nature can teach better than we do.</p>
<footer class="blockquote-footer">W3club (w3schools?)</footer>
</blockquote>
</div><!-- .col -->
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p>Nature is not another university. It's life.</p>
<footer class="blockquote-footer">Albert English (Einstein?)</footer>
</blockquote>
</div><!-- .col -->
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p>Everything we teach can be found in nature.</p>
<footer class="blockquote-footer">Mozqito DevOps Network (Mozilla?)</footer>
</blockquote>
</div><!-- .col -->
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p>Amazing teaching! They don't even use words.</p>
<footer class="blockquote-footer">Isaac New York (Newton?)</footer>
</blockquote>
</div><!-- .col -->
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p>Ada, what do you think?</p>
<footer class="blockquote-footer">Nicola Tester (Testla?)</footer>
</blockquote>
</div><!-- .col -->
<div class="col-md-5">
<blockquote class="blockquote p-3 font-italic bg-white">
<p>Like others said: "Nature is the best!"</p>
<footer class="blockquote-footer">Ada Lovely</footer>
</blockquote>
</div><!-- .col -->
</div><!-- .row -->
</footer>
</section>
<!-- Subscription - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<section class="py-5">
<div class="container">
<h2 class="display-4 text-center">And you _</h2>
<div class="row justify-content-around mt-5 mb-3">
<div class="col-md-6">
<form class="p-3 p-md-5 bg-light border border-5">
<div class="lead text-center">
Join 86,400 others in learning how to code.<br>
Receive divine messages from the wisest masters.
</div><!-- .lead -->
<div class="input-group mt-4">
<input type="text" class="form-control rounded-0"
placeholder="Enter your email address"
aria-label="Enter your email address"
><!-- input -->
<span class="input-group-btn">
<button class="btn btn-secondary rounded-0" type="submit">Subscribe</button>
</span>
</div><!-- .input-group -->
</form>
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
</section>
<!-- Footer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<footer class="py-6 bg-dark text-white text-center">
&copy;2022 Made with
<span class="text-primary">&hearts;</span>
by Semi Art
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment