style.css

html, body {margin: 0; padding: 0; -webkit-font-smoothing:antialiased; font-family:nova-round, gudea, 'antic', Arial,sans-serif ; height: 100%; } ul {padding: 0; } li {list-style: none; } .container {position: relative; height: 100%; width:100%; min-height: 500px; background: url('assets/harry_wide.jpg') no-repeat; background-size: cover; } .container .txt-container {position: absolute; height: 50%; width: 100%; background-color: #000; opacity: 0.9; bottom: 0; } .container .txt-container .msg-container {width:527px; position: relative; margin: 50px auto; } .container .txt-container .msg-container {width: 527px; margin: 50px auto; } .container .txt-container .msg-container > ul > li {margin-top: 40px; } .container .txt-container .msg-container > ul > li span {font-size: 2em; background-color: #fff; padding: 10px; } .container .social-container {width:100%; position: absolute; bottom: 10px; } .container .social-container li {float:left; margin-left:10px; width: 40px; height: 40px; } .container .social-container ul {width: 160px; margin: 0 auto; } .container .social-container li a {text-decoration: none; display: block; text-indent: -9999px; width: 100%; height: 100%; -webkit-transition: background-color ease-out 0.2s; -moz-transition: background-color ease-out 0.2s; -o-transition: background-color ease-out 0.2s; transition: background-color ease-out 0.2s; } .container .social-container li .twt-icon {background: url('assets/social.png') no-repeat 5px 5px; } .container .social-container li .twt-icon:hover {background-color:#55ACEE; background-position:5px -28px; } .container .social-container li .gplus-icon:hover {background-color:#DD4B39; background-position:-32px -28px; } .container .social-container li .git-icon:hover {background-color:#498FC2; background-position:-67px -28px; } .container .social-container li .gplus-icon {background: url('assets/social.png') no-repeat -32px 5px; } .container .social-container li .git-icon {background: url('assets/social.png') no-repeat -67px 5px; } @media screen and (max-width: 900px){.container {background: url('assets/harry_narrow.jpg') no-repeat; background-size: cover; } } @media screen and (max-width: 480px) {.container {background: url('assets/harry_mobile.jpg') no-repeat; background-size: cover; } .container .txt-container .msg-container > ul > li span {font-size: 1.2em; } .container .txt-container .msg-container {width: 310px; margin: 50px auto; } .container .txt-container .msg-container > ul > li span {padding: 6px; } }