Start Bootstrap

index.html

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Balance</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Design</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Consulting</a></li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="jumbotron">
  <div class="container">
    <h1 class="headline">Ready. Set. Code.</h1>
    <p>Are you ready to boilerstrap your cross-compatible buzzword? We're Sassy, flat and semantic, so what are you waiting for?</p>
    <br>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Download Free Trial &raquo;</a> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
  </div>
</div>

<section class="call-to-action">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <span class="glyphicon glyphicon-cloud glyphicon-large" aria-hidden="true"></span>
        <h3>Cloud Computable</h3>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
      </div>
      <div class="col-md-4">
        <span class="glyphicon glyphicon-floppy-disk glyphicon-large" aria-hidden="true"></span>
        <h3>Backwards Compatible</h3>
        <p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p>
      </div>
      <div class="col-md-4">
        <span class="glyphicon glyphicon-console glyphicon-large" aria-hidden="true"></span>
        <h3>GUI Free</h3>
        <p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
      </div>
    </div>
  </div>
</section>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

start-bootstrap.markdown

Start Bootstrap

Introduction to Bootstrap with a flat, trendy design.

A Pen by Darren Bennett on CodePen.

License.

style.css

body {
	background: #3E4649;
	color: #f7f7f7;
	font-family: 'Montserrat', sans-serif;
}
h1,
h2 {
	font-weight: bold;
}
p {
	font-size: 16px;
	color: #cdcdcd;
}
.navbar {
	margin-bottom: 0;
}
.jumbotron {
	background: #27A967;
	color: white;
	text-align: center;
}
.jumbotron p {
	color: white;
	font-size: 26px;
}
.navbar-inverse {
	background: #2E2F31;
	border: 0;
}
.dropdown-menu {
	background: #2E2F31;
	border-radius: 0;
	border: 0;
}
.navbar-inverse .navbar-nav li a {
	color: #f7f7f7;
	font-size: 16px;
}
.navbar-inverse .navbar-nav li a:hover {
	background: #27A967;
}
.navbar-inverse .navbar-nav .dropdown-menu li a:hover {
	background: #2C463C;
}
.dropdown-menu li a {
	padding: 10px;
}
.btn-primary {
	color: #fff;
	background-color: transparent;
	border-color: white;
	margin-bottom: 5px;
}
.btn-primary:hover {
	color: #27A967;
	background-color: white;
	border-color: white;
}
.glyphicon-large {
	font-size: 100px;
}
.call-to-action {
	text-align: center;
}
.call-to-action p {
	margin-bottom: 30px;
	font-family: sans-serif;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />