<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <h1 class="name">Ty Strong</h1> <div class="line"></div> <p>Professional Web Developer and Graphic Designer.</p> <div class="container"> <div class="box1"> <i class="icon-file-text"></i> <h2>Resumè</h2> </div> <div class="box2"> <i class="icon-pencil"></i> <h2>Biography</h2> </div> <div class="box3"> <i class="icon-briefcase"></i> <h2>Portfolio</h2> </div> <div class="box4"> <i class="icon-envelope"></i> <h2>Contact</h2> </div> </div> <div class="footer-container"> <div class="footer"> <i class="icon-facebook"></i>Facebook <i class="icon-github"></i>Dribble <i class="icon-rss"></i>RSS Feed </div> </div>

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); body { background: #485b6e; color: #fff; font-weight: 400; font-family: 'Lato', Calibri, Arial, sans-serif; text-align: center; margin: 0; } .name { margin: 120px 0 50px; font-size: 100px; text-shadow: 0 0 10px #333; line-height: 0; } .container { margin: 20px auto; width: 1000px; height: 300px; } .box1, .box2, .box3, .box4 { padding: 22px; width: 150px; height: 150px; margin: 25px; float: left; background: #FC6E51; border-radius: 10px; border: solid 3px #E9573F; text-shadow: 0 0 20px #333; box-shadow: 0 0 25px #333; transition: margin-top 1000ms, box-shadow 300ms; cursor: pointer; } .box2 { background: #CCD1D9; border: solid 3px #AAB2BD; } .box3 { background: #FFCE54; border: solid 3px #F6BB42; } .box4 { background: #A0D468; border: solid 3px #8CC152; } .box1:hover { box-shadow: 0 0 10px #999; margin-top: 10px; } .box2:hover { box-shadow: 0 0 10px #999; margin-top: 10px; } .box3:hover { box-shadow: 0 0 10px #999; margin-top: 10px; } .box4:hover { box-shadow: 0 0 10px #ccc; margin-top: 10px; } i { font-size: 96px; } .line { width: 600px; height: 1px; background: #fff; margin: 0 auto; box-shadow: 0 0 10px #333; } p { margin: 14px 0 40px; } .footer-container { width: 100%; height: 24px; position: fixed; bottom: 0; left: 0; } .footer { margin: 0 auto; width: 360px; height: 22px; padding: 2px 30px 0 0; background: rgba(255,255,255,0.2); border-top-left-radius: 3px; border-top-right-radius: 3px; font-size: 16px; color: #333; cursor: pointer; transition: background 300ms; } .footer i { font-size: 16px; margin: 0 5px 0 20px; } .footer:hover { background: rgba(255,255,255,0.7); }