Created
November 16, 2013 22:08
-
-
Save musaic/7505988 to your computer and use it in GitHub Desktop.
twbootstrap-jumbotron-narrow
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"> | |
| <title>Narrow Jumbotron Template for Bootstrap</title> | |
| <!-- Bootstrap core CSS --> | |
| <link href="../../dist/css/bootstrap.css" rel="stylesheet"> | |
| <!-- Custom styles for this template --> | |
| <link href="jumbotron-narrow.css" rel="stylesheet"> | |
| <!-- Just for debugging purposes. Don't actually copy this line! --> | |
| <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--> | |
| <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <ul class="nav nav-pills pull-right"> | |
| <li class="active"><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| <h3 class="text-muted">Project name</h3> | |
| </div> | |
| <div class="jumbotron"> | |
| <h1>Jumbotron heading</h1> | |
| <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> | |
| <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p> | |
| </div> | |
| <div class="row marketing"> | |
| <div class="col-lg-6"> | |
| <h4>Subheading</h4> | |
| <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> | |
| <h4>Subheading</h4> | |
| <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> | |
| <h4>Subheading</h4> | |
| <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> | |
| </div> | |
| <div class="col-lg-6"> | |
| <h4>Subheading</h4> | |
| <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> | |
| <h4>Subheading</h4> | |
| <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> | |
| <h4>Subheading</h4> | |
| <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <p>© Company 2013</p> | |
| </div> | |
| </div> <!-- /container --> | |
| <!-- Bootstrap core JavaScript | |
| ================================================== --> | |
| <!-- Placed at the end of the document so the pages load faster --> | |
| </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
| /* Space out content a bit */ | |
| body { | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| /* Everything but the jumbotron gets side spacing for mobile first views */ | |
| .header, | |
| .marketing, | |
| .footer { | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| } | |
| /* Custom page header */ | |
| .header { | |
| border-bottom: 1px solid #e5e5e5; | |
| } | |
| /* Make the masthead heading the same height as the navigation */ | |
| .header h3 { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| line-height: 40px; | |
| padding-bottom: 19px; | |
| } | |
| /* Custom page footer */ | |
| .footer { | |
| padding-top: 19px; | |
| color: #777; | |
| border-top: 1px solid #e5e5e5; | |
| } | |
| /* Customize container */ | |
| @media (min-width: 768px) { | |
| .container { | |
| max-width: 730px; | |
| } | |
| } | |
| .container-narrow > hr { | |
| margin: 30px 0; | |
| } | |
| /* Main marketing message and sign up button */ | |
| .jumbotron { | |
| text-align: center; | |
| border-bottom: 1px solid #e5e5e5; | |
| } | |
| .jumbotron .btn { | |
| font-size: 21px; | |
| padding: 14px 24px; | |
| } | |
| /* Supporting marketing content */ | |
| .marketing { | |
| margin: 40px 0; | |
| } | |
| .marketing p + h4 { | |
| margin-top: 28px; | |
| } | |
| /* Responsive: Portrait tablets and up */ | |
| @media screen and (min-width: 768px) { | |
| /* Remove the padding we set earlier */ | |
| .header, | |
| .marketing, | |
| .footer { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| /* Space out the masthead */ | |
| .header { | |
| margin-bottom: 30px; | |
| } | |
| /* Remove the bottom border on the jumbotron for visual effect */ | |
| .jumbotron { | |
| border-bottom: 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment