<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 ----------> <a class="button me" href="https://codepen.io/chrissimmons/" target="_blank" title="Click for free pizza!"></a> <div id="wrapper"> <div class="left"></div> <div class="leftCenter"></div> <div class="center"></div> <div class="rightCenter"></div> <div class="right"></div> </div>

@charset "UTF-8"; body { width: 100vw; height: 100vh; overflow: hidden; background: url(http://www.publicdomainpictures.net/pictures/70000/velka/wooden-floor-and-old-wall-1389632581lZO.jpg); background-size: 100% 100%; } #wrapper { position: relative; width: 70%; margin: 5% auto; padding-bottom: 25%; display: flex; } #wrapper div { background: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Beskid_%C5%9Al%C4%85sko-Morawski_-_panorama_2.jpg); background-size: auto 100%; position: Absolute; box-shadow: inset 0 0 15px black, inset 0 0 0 2px black; border: 5px outset transparent; border-image: url(https://images.designtrends.com/wp-content/uploads/2015/12/17131011/White-Linen-Canvas-Texture.jpg) 30 round; } #wrapper div:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(http://images.delphiglass.com/image_new/130206.jpg); background-size: 100% 100%; opacity: .25; } #wrapper .left { width: 15%; height: 70%; left: 0; top: 15%; background-position: -120%, 0; } #wrapper .leftCenter { width: 15%; height: 80%; left: 18%; top: 10%; background-position: -93%, 0; } #wrapper .center { width: 26%; height: 90%; left: 50%; top: 5%; transform: translate(-50%, 0); background-position: 49%, 0; } #wrapper .rightCenter { width: 15%; height: 80%; right: 18%; top: 10%; background-position: 84%, 0; } #wrapper .right { width: 15%; height: 70%; right: 0; top: 15%; background-position: 220%, 0; } /* Profile Link */ .button.me { width: 80px; height: 80px; padding: 5px; position: absolute; bottom: 0; right: 0; transform: translate(-50%, -50%); cursor: pointer; opacity: .25; transition: all .5s ease; } .button.me:hover { opacity: 1; } .button.me:before { content: ''; height: 100%; width: 100%; display: block; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/306669/profile/profile-80_7.jpg); background-size: contain; background-repeat: no-repeat; line-height: 20px; z-index: 9999; color: whitesmoke; border-radius: 5px 50% 50% 5px; position: absolute; top: 0; left: 0; } .button.me:After { content: '