<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='split-pane col-xs-12 col-sm-6 uiux-side'> <div> <img src='http://bit.ly/BCR-design'> <div class='text-content'> <div>You want</div> <div class='big'>UI/UX?</div> </div> <button> SHOW ME THE DESIGN </button> </div> </div> <div class='split-pane col-xs-12 col-sm-6 frontend-side'> <div> <img src='http://bit.ly/bcr-dev'> <div class='text-content'> <div>You want</div> <div class='big'>FRONT-END?</div> </div> <a class='button'> SHOW ME THE CODE </a> </div> </div> <div id='split-pane-or'> <div> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/bcr-white.png'> </div> </div>

@import url("https://dl.dropboxusercontent.com/u/2821967/fonts/proxima-nova.css"); @media (min-width: 500px) { .col-sm-6 { width: 50%; } } html, body { height: 100%; min-height: 18em; } .frontend-side { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-code.png"); } .uiux-side { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-post-its.png"); } .split-pane { padding-top: 1em; background-size: cover; background-repeat: no-repeat; background-position: center center; height: 50%; min-height: 9em; font-size: 2em; color: white; font-family: "proxima-bold"; } @media(min-width: 500px) { .split-pane { padding-top: 2em; height: 100%; } } .split-pane > div { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } .split-pane > div .text-content { line-height: 1.6em; margin-bottom: 1em; } .split-pane > div .text-content .big { font-size: 2em; } .split-pane > div img { height: 1.3em; } @media (max-width: 500px) { .split-pane > div img { display:none; } } .split-pane button, .split-pane a.button { font-family: "proxima-regular"; background: none; border: 1px solid white; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 15em; padding: 0.7em; font-size: 0.5em; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none; color: white; display: inline-block; cursor: pointer; } .split-pane button:hover, .split-pane a.button:hover { text-decoration: none; background-color: white; border-color: white; cursor: pointer; } .uiux-side.split-pane button:hover, .split-pane a.button:hover { color: violet; } .frontend-side.split-pane button:hover, .split-pane a.button:hover { color: blue; } #split-pane-or { font-size: 2em; color: white; font-family: "proxima-bold"; text-align: center; width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 925px) { #split-pane-or { top:15%; } } #split-pane-or > div img { height: 2.5em; } @media (max-width: 500px) { #split-pane-or { position: absolute; top: 50px; } #split-pane-or > div img { height:2em; } } @media(min-width: 500px) { #split-pane-or { font-size: 3em; } } .big { font-size: 2em; } #slogan { position: absolute; width: 100%; z-index: 100; text-align: center; vertical-align: baseline; top: 0.5em; color: white; font-family: "proxima-regular"; font-size: 1.4em; } @media(min-width: 500px) { #slogan { top: 5%; font-size: 1.8em; } } #slogan img { height: 0.7em; }