<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <!-- Example row of columns --> <div class="row1"> <div class="col-md-6"> <img src="https://yt3.ggpht.com/-i4aCZZLxBSU/AAAAAAAAAAI/AAAAAAAAAAA/bwPIYfGxeo8/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg" class="img-circle img-responsive" alt="Kai Ki-Ki Beta"> </div> <div class="col-md-6"> <h2 id="aboutme">About me</h2> <p>HEY WRIGHT ABOUT YOURSELF HERE!</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> </div> </div> <div class="row2"> <div class="col-md-4"> <h2>Heading 1</h2> <i class="fa fa-graduation-cap fa-5x" aria-hidden="true"></i> <p>Fill in a topic here.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> <div class="col-md-4"> <h2>Heading 2</h2> <p>Second topic here.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> <div class="col-md-4"> <h2>Heading 3</h2> <p>Third topic here.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> </div> <hr> <div class="col-md-12"> <footer class="text-center"> <p><a href="https://www.deviantart.com/"><i class="fab fa-deviantart fa-4x"></i></a> <p>© 2016 Company, Inc.</p> </footer> </div> <!-- /container --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

body { /* for nav bar*/ margin-top: 50px; background-color: cyan; } h1 { color: #f00; } img { padding: 50px; } h2 { color: darkgray; } #aboutme { color: gray; }