<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 ----------> <div class="container"> <p class="text-right"> <a href="http://bootsnipp.com/iframe/2nmGQ" target="_blank">Best viewed full screen</a><br> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2F2nmGQ" target="_blank"><small>HTML</small>⁵</a> </p> <header> <img id="headerpic" src="https://scontent-yyz1-1.xx.fbcdn.net/v/t31.0-8/16143733_10154386186764503_6187078155523330908_o.jpg?oh=f76566dbce544a94eeb5c7bad0d5b7b9&oe=5911C49B" alt=""> <a href="index.html"> </a> </header> <nav class="navbar navbar-default"> <div class="container-fluid"> <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> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Home</a></li> <li><a href="#">Prints</a></li> <li><a href="#">Original Art</a></li> <li><a href="#">Shop</a></li> <li><a href="#">About Elizabeth</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> </nav> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://scontent-yyz1-1.xx.fbcdn.net/v/t31.0-8/16179221_10154386188264503_2536708527025667349_o.jpg?oh=a84e64d9e68cda9924338a9d4f38874e&oe=5918CA48" alt="photograph"> <div class="carousel-caption"> <h2>Shaking Head</h2> <h3>Photograph, Portrait, Black and White</h3> </div> </div> <div class="item"> <img src="https://scontent-yyz1-1.xx.fbcdn.net/v/t31.0-8/16177895_10154386188794503_6618203228778137766_o.jpg?oh=0cacf9a92102c0702b57c607c05c0320&oe=591A9393" alt="photograph"> <div class="carousel-caption"> <h2>Reflection</h2> <h3>Photograph, Portrait, Black and White</h3> </div> </div> <div class="item"> <img src="https://scontent-yyz1-1.xx.fbcdn.net/v/t31.0-8/16113130_10154386188789503_8190791789098382620_o.jpg?oh=5c383ca8167bfa1743a1e1938404ca2d&oe=59195E76" alt="photograph"> <div class="carousel-caption"> <h2>On Edge</h2> <h3>Photograph, Portrait, Black and White</h3> </div> </div> <div class="item"> <img src="https://scontent-yyz1-1.xx.fbcdn.net/v/t31.0-8/16179333_10154386188259503_8669618089225350245_o.jpg?oh=c99b7b30130fb1e35a24c18d5ca249a8&oe=594966FB" alt="photograph"> <div class="carousel-caption"> <h2>Can't Breath</h2> <h3>Photograph, Portrait, Black and White</h3> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <section id="main"> <div class="row"> <div class="col-md-12 content"> <h1>Elizabeth Crowley</h1> <div class="about"> <div class="col-md-12 image"> <img class="img-responsive" src="https://scontent-yyz1-1.xx.fbcdn.net/v/t1.0-9/12799039_10153489686689503_3295265881511626488_n.jpg?oh=ca3210cec5cbf1516c185a137334283b&oe=59089EB2" alt="Elizabeth Crowley"> </div> <div class="col-md-12 text"> <p>Hello! I'm Elizabeth and I'm currently a student at Confederation College. I am taking IMD where I am learning how I can combine my love of art and creativity with interactivity and technology.</p> </div> </div> </div> </div> </section> <footer> <div class="text-center center-block"> <h6 class="txt-railway">Elizabeth © 2016</h6> </div> </footer>

@font-face { font-family: 'CaviarDreams'; src: url('fonts/CaviarDreams.ttf'); font-weight: normal; font-style: normal; } .container { background: #fff; } .navbar { background-color: #fff; border: 1px solid #e7e7e7; font-family: 'CaviarDreams'; } .nav { display: table; height: 50px; width: 100%; } .nav li { display: table-cell; height: 50px; width: 16.666666667%; /* (100 / numItems)% */ line-height: 50px; text-align: center; border-right: 1px solid #fff; white-space: nowrap; } li a { color: #000; font-size: 14pt; border: 1px solid #000; } #headerpic { width:99.99%; } .carousel-indicators { bottom: 0; color: #e8e; } .btn { -webkit-border-radius: 3; -moz-border-radius: 3; border-radius: 3px; font-family: Arial; color: transparent; font-size: 12px; background: transparent; padding: 4px 9px 4px 9px; border: solid #cccccc 2px; text-decoration: none; } .btn:hover { background: #ffffff; background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); background-image: -moz-linear-gradient(top, #ffffff, #ffffff); background-image: -ms-linear-gradient(top, #ffffff, #ffffff); background-image: -o-linear-gradient(top, #ffffff, #ffffff); background-image: linear-gradient(to bottom, #ffffff, #ffffff); text-decoration: none; } .img-responsive { width:25%; margin: 2%; float: left; } p { clear:both; float: right; } .col-md-12 content { margin: auto; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 100%; margin: auto; } footer { position: fixed; bottom: 0; width: 100%; }