<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="#">Rose Skead</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="#gallery">Gallery</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <h1>Rose Skead</h1> <p class="text-right"> <a href="http://bootsnipp.com/iframe/dlGpM" target="_blank">Best viewed full screen</a><br> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FdlGpM" target="_blank"><small>HTML</small>⁵</a> </p> <!-- Example row of columns --> <div class="row"> <div class="col-md-6"> <h2>Who Am I?</h2> <img src="https://scontent-yyz1-1.xx.fbcdn.net/v/t1.0-9/15871521_562310413975009_7311237691349615974_n.jpg?oh=2c2894add963abb345257423b30e945e&oe=5B111EC6" class="img-circle img-responsive" alt="Shrek"> <p>I am a first-year student studying Interactive Media Development at Confederation College. I have a passion for graphic design and creative coding.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> <div class="col-md-6"> <h2>Heading</h2> <i class="fa fa-graduation-cap fa-5x" aria-hidden="true"></i> <i class="fas fa-chess fa-5x"></i> </div> </div> <hr> <footer class="text-center"> <p><a href="http://facebook.com/"><i class="fab fa-facebook-square fa-2x" ></i></a></p> <p><a href="https://www.instagram.com/dreaming.bud/"><i class="fab fa-instagram fa-2x"></i></a></p> <p>© 2018 Company, Inc.</p> </footer>

body { /* for nav bar*/ margin-top: 50px; } h1 { color: #751087; } img { padding: 50px; }