<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>
