<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 ----------> <div class="walp"></div> <div class="box"> <h1>PARADIGM.</h1> <p>Locked and loaded Bob called an all-hands this afternoon, going forward imagineer. Programmatically deliverables. Critical mass UX. On your plate action item, or dog and pony show, so we want to see more charts, face time. Red flag we need a paradigm shift. Organic growth UI turd polishing thought shower, yet data-point win-win-win.</p> </div>

body { font-family: 'Open Sans', sans-serif; } * { box-sizing: border-box; } .walp { background: radial-gradient(rgba(0, 0, 0, 0), #000000), url("https://static.pexels.com/photos/482387/pexels-photo-482387.jpeg"); background-position: center; background-size: cover; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } .box { position: relative; left: 2rem; top: 3rem; height: 300px; width: 300px; border-top: 10px solid #ffe006; border-left: 10px solid #ffe006; } .box:before, .box:after { content: ''; position: absolute; } .box:before { height: 300px; width: 50%; border-bottom: 10px solid #ffe006; bottom: 0; } .box:after { height: 50%; width: 300px; border-right: 10px solid #ffe006; right: 0; } .box h1, .box p { position: absolute; color: white; padding: 0; margin: 0; } .box h1 { letter-spacing: .5rem; margin-left: 1rem; margin-top: 1rem; font-size: 2rem; line-height: 2rem; } .box p { top: calc(50% + 1rem); left: calc(50% + 1rem); width: 400px; font-size: 14px; line-height: 20px; letter-spacing: .15rem; }