-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
512 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| <!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=""> | ||
| <link rel="icon" href="favicon.ico"> | ||
|
|
||
| <title>Fixed top navbar example for Bootstrap</title> | ||
|
|
||
| <!-- Bootstrap core CSS --> | ||
| <link href="dist/css/bootstrap.min.css" rel="stylesheet"> | ||
|
|
||
| <!-- Custom styles for this template --> | ||
| <link href="carousel.css" rel="stylesheet"> | ||
| <link href="cover.css" rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <main role="main"> | ||
|
|
||
| <header> | ||
| <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> | ||
| <a class="navbar-brand" href="#">Carousel</a> | ||
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="collapse navbar-collapse" id="navbarCollapse"> | ||
| <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="#">About</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Portfolio</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Contact</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <hr class="featurette-divider"> | ||
|
|
||
| <div class="cover-container d-flex h-45 p-3 mx-auto flex-column"> | ||
| <h1 class="cover-heading">Cover your page.</h1> | ||
| <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> | ||
| <p class="lead"> | ||
| <a href="#" class="btn btn-lg btn-secondary">Learn more</a> | ||
| </p> | ||
| </div> | ||
|
|
||
| <!-- Marketing messaging and featurettes | ||
| ================================================== --> | ||
| <!-- Wrap the rest of the page in another container to center all the content. --> | ||
|
|
||
| <div class="container marketing"> | ||
|
|
||
| <!-- START THE FEATURETTES --> | ||
|
|
||
| <hr class="featurette-divider"> | ||
|
|
||
| <div class="row featurette"> | ||
| <div class="col-md-7"> | ||
| <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2> | ||
| <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> | ||
| </div> | ||
| <div class="col-md-5"> | ||
| <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr class="featurette-divider"> | ||
|
|
||
| <div class="row featurette"> | ||
| <div class="col-md-7 order-md-2"> | ||
| <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> | ||
| <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> | ||
| </div> | ||
| <div class="col-md-5 order-md-1"> | ||
| <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr class="featurette-divider"> | ||
|
|
||
| <div class="row featurette"> | ||
| <div class="col-md-7"> | ||
| <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> | ||
| <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> | ||
| </div> | ||
| <div class="col-md-5"> | ||
| <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr class="featurette-divider"> | ||
|
|
||
| <!-- /END THE FEATURETTES --> | ||
|
|
||
| </div><!-- /.container --> | ||
|
|
||
|
|
||
| <!-- FOOTER --> | ||
| <footer class="container"> | ||
| <p class="float-right"><a href="#">Back to top</a></p> | ||
| <p>© 2017-2018 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> | ||
| </footer> | ||
| </main> | ||
|
|
||
| <!-- Bootstrap core JavaScript | ||
| ================================================== --> | ||
| <!-- Placed at the end of the document so the pages load faster --> | ||
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | ||
| <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script> | ||
| <script src="assets/js/vendor/popper.min.js"></script> | ||
| <script src="dist/js/bootstrap.min.js"></script> | ||
| <!-- Just to make our placeholder images work. Don't actually copy the next line! --> | ||
| <script src="assets/js/vendor/holder.min.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| <!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=""> | ||
| <link rel="icon" href="favicon.ico"> | ||
|
|
||
| <title>Fixed top navbar example for Bootstrap</title> | ||
|
|
||
| <!-- Bootstrap core CSS --> | ||
| <link href="dist/css/bootstrap.min.css" rel="stylesheet"> | ||
|
|
||
| <!-- Custom styles for this template --> | ||
| <link href="carousel.css" rel="stylesheet"> | ||
| <link href="cover.css" rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <main role="main"> | ||
|
|
||
| <header> | ||
| <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> | ||
| <a class="navbar-brand" href="#">Carousel</a> | ||
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="collapse navbar-collapse" id="navbarCollapse"> | ||
| <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="#">About</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Portfolio</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Contact</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <hr class="featurette-divider"> | ||
|
|
||
| <div class="cover-container d-flex h-45 p-3 mx-auto flex-column"> | ||
| <h1 class="cover-heading">Cover your page.</h1> | ||
| <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> | ||
| <p class="lead"> | ||
| <a href="#" class="btn btn-lg btn-secondary">Learn more</a> | ||
| </p> | ||
| </div> | ||
|
|
||
| <!-- Marketing messaging and featurettes | ||
| ================================================== --> | ||
| <!-- Wrap the rest of the page in another container to center all the content. --> | ||
|
|
||
| <div class="container marketing"> | ||
|
|
||
| <!-- START THE FEATURETTES --> | ||
|
|
||
| <hr class="featurette-divider"> | ||
|
|
||
| <div class="row featurette"> | ||
| <div class="col-md-7"> | ||
| <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2> | ||
| <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> | ||
| </div> | ||
| <div class="col-md-5"> | ||
| <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr class="featurette-divider"> | ||
|
|
||
| <div class="row featurette"> | ||
| <div class="col-md-7 order-md-2"> | ||
| <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> | ||
| <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> | ||
| </div> | ||
| <div class="col-md-5 order-md-1"> | ||
| <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr class="featurette-divider"> | ||
|
|
||
| <div class="row featurette"> | ||
| <div class="col-md-7"> | ||
| <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> | ||
| <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> | ||
| </div> | ||
| <div class="col-md-5"> | ||
| <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr class="featurette-divider"> | ||
|
|
||
| <!-- /END THE FEATURETTES --> | ||
|
|
||
| </div><!-- /.container --> | ||
|
|
||
|
|
||
| <!-- FOOTER --> | ||
| <footer class="container"> | ||
| <p class="float-right"><a href="#">Back to top</a></p> | ||
| <p>© 2017-2018 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> | ||
| </footer> | ||
| </main> | ||
|
|
||
| <!-- Bootstrap core JavaScript | ||
| ================================================== --> | ||
| <!-- Placed at the end of the document so the pages load faster --> | ||
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | ||
| <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script> | ||
| <script src="assets/js/vendor/popper.min.js"></script> | ||
| <script src="dist/js/bootstrap.min.js"></script> | ||
| <!-- Just to make our placeholder images work. Don't actually copy the next line! --> | ||
| <script src="assets/js/vendor/holder.min.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -26,7 +26,7 @@ a:hover { | |
|
|
||
| html, | ||
| body { | ||
| height: 100%; | ||
| height: 180%; | ||
| background-color: #333; | ||
| } | ||
|
|
||
|
|
||
Oops, something went wrong.