|
|
<!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 name="description" content="">
|
|
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
|
<meta name="generator" content="Hugo 0.101.0">
|
|
|
<title>Jumbotron Template · Bootstrap v4.6</title>
|
|
|
|
|
|
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/jumbotron/">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
|
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
.bd-placeholder-img {
|
|
|
font-size: 1.125rem;
|
|
|
text-anchor: middle;
|
|
|
-webkit-user-select: none;
|
|
|
-moz-user-select: none;
|
|
|
-ms-user-select: none;
|
|
|
user-select: none;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
.bd-placeholder-img-lg {
|
|
|
font-size: 3.5rem;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
|
|
|
<!-- Custom styles for this template -->
|
|
|
<link href="jumbotron.css" rel="stylesheet">
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
</button>
|
|
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
|
|
<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="#">Link</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link disabled">Disabled</a>
|
|
|
</li>
|
|
|
<li class="nav-item dropdown">
|
|
|
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
|
<div class="dropdown-menu">
|
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<form class="form-inline my-2 my-lg-0">
|
|
|
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
|
|
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</nav>
|
|
|
|
|
|
<main role="main">
|
|
|
|
|
|
<!-- Main jumbotron for a primary marketing message or call to action -->
|
|
|
<div class="jumbotron">
|
|
|
<div class="container">
|
|
|
<h1 class="display-3">Hello, world!</h1>
|
|
|
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
|
|
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<!-- Example row of columns -->
|
|
|
<div class="row">
|
|
|
<div class="col-md-4">
|
|
|
<h2>Heading</h2>
|
|
|
<p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
|
|
|
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
|
|
</div>
|
|
|
<div class="col-md-4">
|
|
|
<h2>Heading</h2>
|
|
|
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
|
|
|
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
|
|
</div>
|
|
|
<div class="col-md-4">
|
|
|
<h2>Heading</h2>
|
|
|
<p>Playing ping pong all night long, everything's all neon and hazy. Yeah, she's so in demand. She's sweet as pie but if you break her heart. But down to earth. It's time to face the music I'm no longer your muse. I guess that I forgot I had a choice.</p>
|
|
|
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
</div> <!-- /container -->
|
|
|
|
|
|
</main>
|
|
|
|
|
|
<footer class="container">
|
|
|
<p>© Company 2017-2022</p>
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
|
|
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html>
|