<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> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <!-- <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="#">RSkead</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> --> <!--nav snippet--> <nav id="navtop"> <div class="container-fluid"> <!--header navbar LOGO --> <div class="text-center" id="logo"> <a href="#" ><img src="https://scontent-yyz1-1.xx.fbcdn.net/v/t1.0-9/27752058_727464930792889_2851390624691481430_n.jpg?oh=354a3f8f352af0cc544d0c243fdba76a&oe=5B497FA9" alt="logo" /></a> </div> <!-- TOOGLE MAIN NAVIGATION --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navigation" 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> <!-- MAIN NAVIGATION --> <div class="collapse navbar-collapse" id="main-navigation"> <div class="container"> <ul class="nav nav-justified nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <!--header navbar END --> <!-- SLIDER START--> <div id="Container_Carousel"> <div class="rows"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" > <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://rskead.com/rskead-images/1.jpg" alt="First Slide"> </div> <div class="item"> <img src="https://rskead.com/rskead-images/2.jpg" alt="Second Slide"> </div> <div class="item"> <img src="https://rskead.com/rskead-images/3.jpg" alt="Third Slide"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-circle-arrow-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-circle-arrow-right"></span> </a> </div> </div> </div> </div> <div class="clear"></div> <!-- SLIDER END--> <script src="https://use.fontawesome.com/f12e4a6b3c.js"></script> <div class="container"> <!-- <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> --> <div> <h1>Rose Skead</h1> </div> <!-- Example row of columns --> <div class="row"> <div class="col-md-12"> <h2>About Me</h2> <p>I'm a first-year student studying in Interactive Media Development at Confederation College. Classes I am taking include photography & digital imaging, graphic design, interactive media communications, web design, interactive design, 3D design, and audio & video story-telling. My main passions are for graphic design and creative coding.</p> <p><a class="btn btn-default" href="#about" role="button">Read More »</a></p> </div> </div> <div class="rows"> <div class="col-md-4"> <i class="fa fa-camera fa-3x"></i> <h3>Photography</h3> </div> <div class="col-md-4"> <i class="fa fa-mouse-pointer fa-3x"></i> <h3>Graphic Design</h3> </div> <div class="col-md-4"> <i class="fa fa-cube fa-3x"></i> <h3>3D Design</h3> </div> </div> <hr> <footer class="text-center"> <div class="container"> <div class="row"> <div class="col-md-12"> <a href="https://www.facebook.com/rose.skead.5" target="_blank" class="btn-social btn-facebook"><i class="fab fa-facebook"></i></a> <a href="https://www.instagram.com/dreaming.bud/" target="_blank" class="btn-social btn-instagram"><i class="fab fa-instagram"></i></a> <a href="https://trello.com/roseskead" target="_blank" class="btn-social btn-trello"><i class="fab fa-trello"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-email"><i class="fa fa-envelope"></i></a> </div> </div> </div> <p>© 2018 Rose Skead</p> </footer> </div> <!-- /container -->

body { /* for nav bar*/ margin-top: 50px; background-color: #fff; } h1 { text-align: center; color: #3d3d3d; } h2 { text-align: center; color: #3d3d3d; } .navbar { background-color: #ffd3e2; border-color: #ffd3e2; } .navbar-nav{ background-color: #ffd3e2; } p { color: #3d3d3d; } i { display: inline-block; } h3 { text-align: center; display: inline-block; padding-left: 10px; } /*nav snippet*/ *{ color: #6b6b6b !important; } /* HEADER */ #nav-right{ float:right; } .nav>li>a:focus, .nav>li>a:hover { text-decoration: none; background-color: #fff; color: #ba167b !important; } .nav-pills>li.active>a{ color: #ba167b !important; font-weight: bold; background-color: #fff; } .nav-pills>li.active>a:hover{ background-color: #fff; } .navbar-nav>li>a { padding-top: 20px; } .navbar-toggle { border: 2px solid #ba167b; } .icon-bar { color: #ba167b; border-color: #ba167b; background-color: #ba167b; } #nav-right button{ font-size: 10px; margin-top: 15px; margin-bottom: 15px; margin-left: 10px; background-color: #fff; border-radius: 4px; border: 1px solid; padding: 5px 9px; } #nav-right{ margin-right: 15px; } #navtop{ font-size: 10px !important; } .fa { padding-right: 10px; font-size: 14px; color: #9a9a9a !important; } #logo a img{ margin-top: -25px; margin-bottom: 30px; } #main-navigation{ font-size: 12px !important; font-weight: bold; } #main-navigation .nav>li>a{ padding-left:0; padding-right:0; } #main-navigation .container{ max-width: 720px; } /* MEDIA QUERIES FOR TOP NAV*/ @media screen and (max-width:768px){ #nav-left{ text-align: center; } #nav-left:after{ display: block; content: ""; clear: both; } #nav-left li{ float:left; width: 31%; padding:1%; } #nav-right{ display: block; content: ""; clear: both; } #nav-right{ text-align: center; width:100%; } #nav-right li { float: left; width:23%; padding: 1%; } #logo a img { margin-top: 0; margin-bottom: 0; } #main-navigation ul li{ border-top: 1px solid #7178c6; width: 100%; } } /* MEDIA QUERIES FOR TOP NAV END*/ /* HEADER END*/ /* SLIDER */ #Container_Carousel .rows .col-xs-12{ margin:0; padding:0; } #Container_Carousel{ margin:0; padding:0; width:100%; max-height: 850px; } .item img{ width:100%; max-height: 850px; } .carousel,.item,.active{ height:100%; } .carousel-inner{ height:100%; } .carousel-control.left, .carousel-control.right { background-image:none; } .glyphicon-circle-arrow-left { position: absolute; top: 50%; font-size: 50px; opacity: 0.5; left: 50px; } .glyphicon-circle-arrow-right { position: absolute; top: 50%; font-size: 50px; opacity: 0.5; right: 50px; } /* SLIDER END*/ /*social buttons snippet*/ a.btn-social, .btn-social { border-radius: 50%; color: #ffffff !important; display: inline-block; height: 54px; line-height: 54px; margin: 8px 4px; text-align: center; text-decoration: none; transition: background-color .3s; webkit-transition: background-color .3s; width: 54px; } .btn-social .fa,.btn-social i { backface-visibility: hidden; moz-backface-visibility: hidden; ms-transform: scale(1); o-transform: scale(1); transform: scale(1); transition: all .25s; webkit-backface-visibility: hidden; webkit-transform: scale(1); webkit-transition: all .25s; } .btn-social:hover,.btn-social:focus { color: #fff; outline: none; text-decoration: none; } .btn-social:hover .fa,.btn-social:focus .fa,.btn-social:hover i,.btn-social:focus i { ms-transform: scale(1.3); o-transform: scale(1.3); transform: scale(1.3); webkit-transform: scale(1.3); } .btn-social.btn-xs { font-size: 9px; height: 24px; line-height: 13px; margin: 6px 2px; width: 24px; } .btn-social.btn-sm { font-size: 13px; height: 36px; line-height: 18px; margin: 6px 2px; width: 36px; } .btn-social.btn-lg { font-size: 22px; height: 72px; line-height: 40px; margin: 10px 6px; width: 72px; } .btn-facebook { background-color: #ff4f4f; } .btn-facebook:hover { background-color: #ff9191; } .btn-instagram { background-color: #ffc549; } .btn-instagram:hover { background-color: #ffd989; } .btn-trello { background-color: #94ff63; } .btn-trello:hover { background-color: #ccffb5; } .btn-youtube { background-color: #e52d27; } .btn-youtube:hover { background-color: #ea5955; } .btn-email { background-color: #75ceff; } .btn-email:hover { background-color: #b2e3ff; }