"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/kaiquezimerer/pen/qPMxxX?limit=all&page=23&q=mobile" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700'> <style class="cp-pen-styles">/**-- Vars --**/ /**-- Mixins --**/ /**-- Base --**/ * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #DBE2EC; font-family: "Open Sans", sans-serif; font-size: 100%; color: #444; } ol, ul { list-style: none; } p { line-height: 1.6; } a { color: inherit; text-decoration: none; } /**-- Content --**/ .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; } /**-- Boxes --**/ .box { -ms-flex-negative: 0; flex-shrink: 0; position: relative; margin: 20px; width: 360px; height: 600px; box-shadow: 0 0 10px 5px rgba(68, 68, 68, 0.2); background-color: #FBFBFC; } .box a { font-size: 0.8em; font-weight: 700; text-transform: uppercase; } /**-- Controls --**/ .box-controls { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; bottom: 0; left: 0; width: 100%; height: 10%; } .pagination li { display: inline-block; } .pagination a { display: block; margin: 0 2px; width: 6px; height: 6px; border-radius: 50%; background-color: #DBE2EC; } .pagination a.is-checked { background-color: #444; } .btn-comment { width: 17px; height: 17px; background: url("https://cdn0.iconfinder.com/data/icons/feather/96/591234-speech-bubble-16.png") no-repeat; background-size: cover; cursor: pointer; } /**-- Header Box --**/ .box-header { position: absolute; top: 0; left: 0; width: 100%; height: 90%; background: url("https://images.unsplash.com/photo-1421809313281-48f03fa45e9f?dpr=1&auto=compress,format&fit=crop&w=1410&h=&q=80&cs=tinysrgb&crop=") no-repeat 70% bottom; background-size: 240%; } .box-header:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(68, 68, 68, 0.1); } .box-header .header-content { position: absolute; bottom: 40px; left: 25px; } .box-header h1, .box-header h2 { text-transform: uppercase; color: #FBFBFC; } .box-header .author { font-size: 0.6em; } .box-header .title { font-size: 2.2em; } .box-header .btn-travel { display: inline-block; padding: 5px 10px; margin-top: 20px; border-radius: 2px; background-color: #FBFBFC; } /**-- Article Box --**/ .box-article { position: absolute; top: 0; left: 0; padding-top: 20px; width: 100%; height: 90%; background-color: rgba(219, 226, 236, 0.4); font-family: "Droid Serif", serif; font-size: 0.9em; } .box-article p { padding: 20px 30px; line-height: 2em; color: rgba(68, 68, 68, 0.8); } .box-article p:first-child:first-letter { float: left; padding-right: 20px; color: #444; font-size: 5em; font-weight: 700; line-height: 1; } /**-- Comments Box --**/ .box-comments { position: absolute; top: 0; left: 0; padding-top: 20px; width: 100%; height: 100%; } .box-comments h3 { text-align: center; font-size: .8em; text-transform: uppercase; } .box-comments .btn-close { position: absolute; top: 20px; right: 30px; } .box-comments .btn-close:after { content: '\2716'; } .post { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 25px; margin-top: 25px; } .post .avatar { width: 50px; height: 50px; border-radius: 50px; } .post .user-post { padding: 0 20px; font-family: "Droid Serif", serif; font-size: 0.8em; } .post .user-post h4, .post .user-post h5 { float: left; margin-right: 10px; } .post .user-post .post-time { font-weight: normal; color: #DBE2EC; } .post .user-post .post-time:before { content: '\25CF'; margin-right: 10px; } .post .user-post .post-msg { clear: both; padding: 5px 0; color: rgba(68, 68, 68, 0.8); } </style></head><body> <div class="container"> <!-- Header Box --> <section class="box"> <header class="box-header"> <div class="header-content"> <h2 class="author">Mark Manson</h2> <h1 class="title">The<br> Dark Side<br> of The<br> Digital<br> Nomad</h1> <a href="#" class="btn-travel">Travel</a> </div> </header> <!-- Controls --> <div class="box-controls"> <a href="#" class="btn-close">Close</a> <ol class="pagination"> <li><a href="#" class="is-checked"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ol> <div class="btn-comment"></div> </div> </section> <!-- Article Box --> <section class="box"> <article class="box-article"> <p>The following is the original piece I wrote for CNN last year entrepreneurs, also known as "digital nomads." Since the whole "Work Online, Travel the World and Live the Dream" angle had been done to death in a million places, I decided to go the other direction and show the dark side of being a digital nomad — the challenges one faces, the emotional pitfalls, the social sacrifices</p> <p>Predictably, CNN hated it. The editors hacked it to pieces and asked me to rewrite sections to make it less gloomy. But I was always fond of the original, so I'm posting it here unabridged.</p> </article> <!-- Controls --> <div class="box-controls"> <a href="#" class="btn-close">Close</a> <ol class="pagination"> <li><a href="#"></a></li> <li><a href="#" class="is-checked"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ol> <div class="btn-comment"></div> </div> </section> <!-- Comments Box --> <section class="box"> <div class="box-comments"> <h3>Comments (45)</h3> <a href="#" class="btn-close"></a> <!-- Post 1 --> <div class="post"> <img class="avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg" alt="johnatandunn"> <article class="user-post"> <h4 class="username">johnatandunn</h4> <h5 class="post-time">3 hours ago</h5> <p class="post-msg">Good point! There are travel bloggers. Then there are freelancers: coders mainly.</p> </article> </div> <!-- Post 2 --> <div class="post"> <img class="avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/kerem/128.jpg" alt="roberto98"> <article class="user-post"> <h4 class="username">roberto98</h4> <h5 class="post-time">3 hours ago</h5> <p class="post-msg">Not one family on amongst that. Being nomadic is easier when you only have 1 person to worry about.</p> </article> </div> <!-- Post 3 --> <div class="post"> <img class="avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/mattchevy/128.jpg" alt="danielrubinho"> <article class="user-post"> <h4 class="username">danielrubinho</h4> <h5 class="post-time">4 hours ago</h5> <p class="post-msg">Not saying it's not doable, some good friends of mine manage it but would have been a better article with a 50/50.</p> </article> </div> <!-- Post 4 --> <div class="post"> <img class="avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/dancounsell/128.jpg" alt="patricscott"> <article class="user-post"> <h4 class="username">patricscott</h4> <h5 class="post-time">5 hours ago</h5> <p class="post-msg">here people do business from the road (running an IT company, traveling and filming their travel.</p> </article> </div> </div> </section> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >/** HTML & CSS Exercise # 1 Based on Dribbble's : https://dribbble.com/shots/2262761-Mobile-Blog-App-Interface/attachments/424147 **/ //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: