Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="viewer">
  <section class="box header">
    <header>
    <span class="author">mark manson</span>
   <h1>the dark side of the digital nomad</h1>
    <span class="tag">travel</span>
    </header>
    <footer class="footer">
      <span class="btn">close</span>
      <ul>
        <li class="span"></li>
        <li></li>
        <li></li>
      </ul>
      <i class="fa fa-comment-o fa-lg btn" aria-hidden="true"></i>
    </footer>
  </section>
  <section class="box content">
    <article>
      <p><span class="big-letter clearfix">T</span>he 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>
    <footer class="footer">
      <span class="btn">close</span>
      <ul>
        <li></li>
        <li class="span"></li>
        <li></li>
      </ul>
      <i class="fa fa-comment-o fa-lg btn" aria-hidden="true"></i>
    </footer>
  </section>
  <section class="box comments">
    <header class="comments__header">
      <h3 class="comments__header-title">comments (45)</h3>
      <i class="fa fa-times fa-lg comments__header-icon btn" aria-hidden="true"></i>
    </header>
    <div class="comment-box">
      <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU1IDU1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NSA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiPgo8cGF0aCBkPSJNNTUsMjcuNUM1NSwxMi4zMzcsNDIuNjYzLDAsMjcuNSwwUzAsMTIuMzM3LDAsMjcuNWMwLDguMDA5LDMuNDQ0LDE1LjIyOCw4LjkyNiwyMC4yNThsLTAuMDI2LDAuMDIzbDAuODkyLDAuNzUyICBjMC4wNTgsMC4wNDksMC4xMjEsMC4wODksMC4xNzksMC4xMzdjMC40NzQsMC4zOTMsMC45NjUsMC43NjYsMS40NjUsMS4xMjdjMC4xNjIsMC4xMTcsMC4zMjQsMC4yMzQsMC40ODksMC4zNDggIGMwLjUzNCwwLjM2OCwxLjA4MiwwLjcxNywxLjY0MiwxLjA0OGMwLjEyMiwwLjA3MiwwLjI0NSwwLjE0MiwwLjM2OCwwLjIxMmMwLjYxMywwLjM0OSwxLjIzOSwwLjY3OCwxLjg4LDAuOTggIGMwLjA0NywwLjAyMiwwLjA5NSwwLjA0MiwwLjE0MiwwLjA2NGMyLjA4OSwwLjk3MSw0LjMxOSwxLjY4NCw2LjY1MSwyLjEwNWMwLjA2MSwwLjAxMSwwLjEyMiwwLjAyMiwwLjE4NCwwLjAzMyAgYzAuNzI0LDAuMTI1LDEuNDU2LDAuMjI1LDIuMTk3LDAuMjkyYzAuMDksMC4wMDgsMC4xOCwwLjAxMywwLjI3MSwwLjAyMUMyNS45OTgsNTQuOTYxLDI2Ljc0NCw1NSwyNy41LDU1ICBjMC43NDksMCwxLjQ4OC0wLjAzOSwyLjIyMi0wLjA5OGMwLjA5My0wLjAwOCwwLjE4Ni0wLjAxMywwLjI3OS0wLjAyMWMwLjczNS0wLjA2NywxLjQ2MS0wLjE2NCwyLjE3OC0wLjI4NyAgYzAuMDYyLTAuMDExLDAuMTI1LTAuMDIyLDAuMTg3LTAuMDM0YzIuMjk3LTAuNDEyLDQuNDk1LTEuMTA5LDYuNTU3LTIuMDU1YzAuMDc2LTAuMDM1LDAuMTUzLTAuMDY4LDAuMjI5LTAuMTA0ICBjMC42MTctMC4yOSwxLjIyLTAuNjAzLDEuODExLTAuOTM2YzAuMTQ3LTAuMDgzLDAuMjkzLTAuMTY3LDAuNDM5LTAuMjUzYzAuNTM4LTAuMzE3LDEuMDY3LTAuNjQ4LDEuNTgxLTEgIGMwLjE4NS0wLjEyNiwwLjM2Ni0wLjI1OSwwLjU0OS0wLjM5MWMwLjQzOS0wLjMxNiwwLjg3LTAuNjQyLDEuMjg5LTAuOTgzYzAuMDkzLTAuMDc1LDAuMTkzLTAuMTQsMC4yODQtMC4yMTdsMC45MTUtMC43NjQgIGwtMC4wMjctMC4wMjNDNTEuNTIzLDQyLjgwMiw1NSwzNS41NSw1NSwyNy41eiBNMiwyNy41QzIsMTMuNDM5LDEzLjQzOSwyLDI3LjUsMlM1MywxMy40MzksNTMsMjcuNSAgYzAsNy41NzctMy4zMjUsMTQuMzg5LTguNTg5LDE5LjA2M2MtMC4yOTQtMC4yMDMtMC41OS0wLjM4NS0wLjg5My0wLjUzN2wtOC40NjctNC4yMzNjLTAuNzYtMC4zOC0xLjIzMi0xLjE0NC0xLjIzMi0xLjk5M3YtMi45NTcgIGMwLjE5Ni0wLjI0MiwwLjQwMy0wLjUxNiwwLjYxNy0wLjgxN2MxLjA5Ni0xLjU0OCwxLjk3NS0zLjI3LDIuNjE2LTUuMTIzYzEuMjY3LTAuNjAyLDIuMDg1LTEuODY0LDIuMDg1LTMuMjg5di0zLjU0NSAgYzAtMC44NjctMC4zMTgtMS43MDgtMC44ODctMi4zNjl2LTQuNjY3YzAuMDUyLTAuNTE5LDAuMjM2LTMuNDQ4LTEuODgzLTUuODY0QzM0LjUyNCw5LjA2NSwzMS41NDEsOCwyNy41LDggIHMtNy4wMjQsMS4wNjUtOC44NjcsMy4xNjhjLTIuMTE5LDIuNDE2LTEuOTM1LDUuMzQ1LTEuODgzLDUuODY0djQuNjY3Yy0wLjU2OCwwLjY2MS0wLjg4NywxLjUwMi0wLjg4NywyLjM2OXYzLjU0NSAgYzAsMS4xMDEsMC40OTQsMi4xMjgsMS4zNCwyLjgyMWMwLjgxLDMuMTczLDIuNDc3LDUuNTc1LDMuMDkzLDYuMzg5djIuODk0YzAsMC44MTYtMC40NDUsMS41NjYtMS4xNjIsMS45NThsLTcuOTA3LDQuMzEzICBjLTAuMjUyLDAuMTM3LTAuNTAyLDAuMjk3LTAuNzUyLDAuNDc2QzUuMjc2LDQxLjc5MiwyLDM1LjAyMiwyLDI3LjV6IE00Mi40NTksNDguMTMyYy0wLjM1LDAuMjU0LTAuNzA2LDAuNS0xLjA2NywwLjczNSAgYy0wLjE2NiwwLjEwOC0wLjMzMSwwLjIxNi0wLjUsMC4zMjFjLTAuNDcyLDAuMjkyLTAuOTUyLDAuNTctMS40NDIsMC44M2MtMC4xMDgsMC4wNTctMC4yMTcsMC4xMTEtMC4zMjYsMC4xNjcgIGMtMS4xMjYsMC41NzctMi4yOTEsMS4wNzMtMy40ODgsMS40NzZjLTAuMDQyLDAuMDE0LTAuMDg0LDAuMDI5LTAuMTI3LDAuMDQzYy0wLjYyNywwLjIwOC0xLjI2MiwwLjM5My0xLjkwNCwwLjU1MiAgYy0wLjAwMiwwLTAuMDA0LDAuMDAxLTAuMDA2LDAuMDAxYy0wLjY0OCwwLjE2LTEuMzA0LDAuMjkzLTEuOTY0LDAuNDAyYy0wLjAxOCwwLjAwMy0wLjAzNiwwLjAwNy0wLjA1NCwwLjAxICBjLTAuNjIxLDAuMTAxLTEuMjQ3LDAuMTc0LTEuODc1LDAuMjI5Yy0wLjExMSwwLjAxLTAuMjIyLDAuMDE3LTAuMzM0LDAuMDI1QzI4Ljc1MSw1Mi45NywyOC4xMjcsNTMsMjcuNSw1MyAgYy0wLjYzNCwwLTEuMjY2LTAuMDMxLTEuODk1LTAuMDc4Yy0wLjEwOS0wLjAwOC0wLjIxOC0wLjAxNS0wLjMyNi0wLjAyNWMtMC42MzQtMC4wNTYtMS4yNjUtMC4xMzEtMS44OS0wLjIzMyAgYy0wLjAyOC0wLjAwNS0wLjA1Ni0wLjAxLTAuMDg0LTAuMDE1Yy0xLjMyMi0wLjIyMS0yLjYyMy0wLjU0Ni0zLjg5LTAuOTcxYy0wLjAzOS0wLjAxMy0wLjA3OS0wLjAyNy0wLjExOC0wLjA0ICBjLTAuNjI5LTAuMjE0LTEuMjUxLTAuNDUxLTEuODYyLTAuNzEzYy0wLjAwNC0wLjAwMi0wLjAwOS0wLjAwNC0wLjAxMy0wLjAwNmMtMC41NzgtMC4yNDktMS4xNDUtMC41MjUtMS43MDUtMC44MTYgIGMtMC4wNzMtMC4wMzgtMC4xNDctMC4wNzQtMC4yMTktMC4xMTNjLTAuNTExLTAuMjczLTEuMDExLTAuNTY4LTEuNTA0LTAuODc2Yy0wLjE0Ni0wLjA5Mi0wLjI5MS0wLjE4NS0wLjQzNS0wLjI3OSAgYy0wLjQ1NC0wLjI5Ny0wLjkwMi0wLjYwNi0xLjMzOC0wLjkzM2MtMC4wNDUtMC4wMzQtMC4wODgtMC4wNy0wLjEzMy0wLjEwNGMwLjAzMi0wLjAxOCwwLjA2NC0wLjAzNiwwLjA5Ni0wLjA1NGw3LjkwNy00LjMxMyAgYzEuMzYtMC43NDIsMi4yMDUtMi4xNjUsMi4yMDUtMy43MTRsLTAuMDAxLTMuNjAybC0wLjIzLTAuMjc4Yy0wLjAyMi0wLjAyNS0yLjE4NC0yLjY1NS0zLjAwMS02LjIxNmwtMC4wOTEtMC4zOTZsLTAuMzQxLTAuMjIxICBjLTAuNDgxLTAuMzExLTAuNzY5LTAuODMxLTAuNzY5LTEuMzkydi0zLjU0NWMwLTAuNDY1LDAuMTk3LTAuODk4LDAuNTU3LTEuMjIzbDAuMzMtMC4yOTh2LTUuNTdsLTAuMDA5LTAuMTMxICBjLTAuMDAzLTAuMDI0LTAuMjk4LTIuNDI5LDEuMzk2LTQuMzZDMjEuNTgzLDEwLjgzNywyNC4wNjEsMTAsMjcuNSwxMGMzLjQyNiwwLDUuODk2LDAuODMsNy4zNDYsMi40NjYgIGMxLjY5MiwxLjkxMSwxLjQxNSw0LjM2MSwxLjQxMyw0LjM4MWwtMC4wMDksNS43MDFsMC4zMywwLjI5OGMwLjM1OSwwLjMyNCwwLjU1NywwLjc1OCwwLjU1NywxLjIyM3YzLjU0NSAgYzAsMC43MTMtMC40ODUsMS4zNi0xLjE4MSwxLjU3NWwtMC40OTcsMC4xNTNsLTAuMTYsMC40OTVjLTAuNTksMS44MzMtMS40MywzLjUyNi0yLjQ5Niw1LjAzMmMtMC4yNjIsMC4zNy0wLjUxNywwLjY5OC0wLjczNiwwLjk0OSAgbC0wLjI0OCwwLjI4M1YzOS44YzAsMS42MTIsMC44OTYsMy4wNjIsMi4zMzgsMy43ODJsOC40NjcsNC4yMzNjMC4wNTQsMC4wMjcsMC4xMDcsMC4wNTUsMC4xNiwwLjA4MyAgQzQyLjY3Nyw0Ny45NzksNDIuNTY3LDQ4LjA1NCw0Mi40NTksNDguMTMyeiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" class="comment-avatar"/>
      <div class="comment-text">
      <h5>jonathandunn</h5>
      <span class="comment-time">3 hours ago
      </span>
      <p class="comment-text">
        Good point! There are travel bloggers. Then there are freelancers: coders mainly.
      </p>
      </div>
    </div>
    <div class="comment-box">
      <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU1IDU1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NSA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiPgo8cGF0aCBkPSJNNTUsMjcuNUM1NSwxMi4zMzcsNDIuNjYzLDAsMjcuNSwwUzAsMTIuMzM3LDAsMjcuNWMwLDguMDA5LDMuNDQ0LDE1LjIyOCw4LjkyNiwyMC4yNThsLTAuMDI2LDAuMDIzbDAuODkyLDAuNzUyICBjMC4wNTgsMC4wNDksMC4xMjEsMC4wODksMC4xNzksMC4xMzdjMC40NzQsMC4zOTMsMC45NjUsMC43NjYsMS40NjUsMS4xMjdjMC4xNjIsMC4xMTcsMC4zMjQsMC4yMzQsMC40ODksMC4zNDggIGMwLjUzNCwwLjM2OCwxLjA4MiwwLjcxNywxLjY0MiwxLjA0OGMwLjEyMiwwLjA3MiwwLjI0NSwwLjE0MiwwLjM2OCwwLjIxMmMwLjYxMywwLjM0OSwxLjIzOSwwLjY3OCwxLjg4LDAuOTggIGMwLjA0NywwLjAyMiwwLjA5NSwwLjA0MiwwLjE0MiwwLjA2NGMyLjA4OSwwLjk3MSw0LjMxOSwxLjY4NCw2LjY1MSwyLjEwNWMwLjA2MSwwLjAxMSwwLjEyMiwwLjAyMiwwLjE4NCwwLjAzMyAgYzAuNzI0LDAuMTI1LDEuNDU2LDAuMjI1LDIuMTk3LDAuMjkyYzAuMDksMC4wMDgsMC4xOCwwLjAxMywwLjI3MSwwLjAyMUMyNS45OTgsNTQuOTYxLDI2Ljc0NCw1NSwyNy41LDU1ICBjMC43NDksMCwxLjQ4OC0wLjAzOSwyLjIyMi0wLjA5OGMwLjA5My0wLjAwOCwwLjE4Ni0wLjAxMywwLjI3OS0wLjAyMWMwLjczNS0wLjA2NywxLjQ2MS0wLjE2NCwyLjE3OC0wLjI4NyAgYzAuMDYyLTAuMDExLDAuMTI1LTAuMDIyLDAuMTg3LTAuMDM0YzIuMjk3LTAuNDEyLDQuNDk1LTEuMTA5LDYuNTU3LTIuMDU1YzAuMDc2LTAuMDM1LDAuMTUzLTAuMDY4LDAuMjI5LTAuMTA0ICBjMC42MTctMC4yOSwxLjIyLTAuNjAzLDEuODExLTAuOTM2YzAuMTQ3LTAuMDgzLDAuMjkzLTAuMTY3LDAuNDM5LTAuMjUzYzAuNTM4LTAuMzE3LDEuMDY3LTAuNjQ4LDEuNTgxLTEgIGMwLjE4NS0wLjEyNiwwLjM2Ni0wLjI1OSwwLjU0OS0wLjM5MWMwLjQzOS0wLjMxNiwwLjg3LTAuNjQyLDEuMjg5LTAuOTgzYzAuMDkzLTAuMDc1LDAuMTkzLTAuMTQsMC4yODQtMC4yMTdsMC45MTUtMC43NjQgIGwtMC4wMjctMC4wMjNDNTEuNTIzLDQyLjgwMiw1NSwzNS41NSw1NSwyNy41eiBNMiwyNy41QzIsMTMuNDM5LDEzLjQzOSwyLDI3LjUsMlM1MywxMy40MzksNTMsMjcuNSAgYzAsNy41NzctMy4zMjUsMTQuMzg5LTguNTg5LDE5LjA2M2MtMC4yOTQtMC4yMDMtMC41OS0wLjM4NS0wLjg5My0wLjUzN2wtOC40NjctNC4yMzNjLTAuNzYtMC4zOC0xLjIzMi0xLjE0NC0xLjIzMi0xLjk5M3YtMi45NTcgIGMwLjE5Ni0wLjI0MiwwLjQwMy0wLjUxNiwwLjYxNy0wLjgxN2MxLjA5Ni0xLjU0OCwxLjk3NS0zLjI3LDIuNjE2LTUuMTIzYzEuMjY3LTAuNjAyLDIuMDg1LTEuODY0LDIuMDg1LTMuMjg5di0zLjU0NSAgYzAtMC44NjctMC4zMTgtMS43MDgtMC44ODctMi4zNjl2LTQuNjY3YzAuMDUyLTAuNTE5LDAuMjM2LTMuNDQ4LTEuODgzLTUuODY0QzM0LjUyNCw5LjA2NSwzMS41NDEsOCwyNy41LDggIHMtNy4wMjQsMS4wNjUtOC44NjcsMy4xNjhjLTIuMTE5LDIuNDE2LTEuOTM1LDUuMzQ1LTEuODgzLDUuODY0djQuNjY3Yy0wLjU2OCwwLjY2MS0wLjg4NywxLjUwMi0wLjg4NywyLjM2OXYzLjU0NSAgYzAsMS4xMDEsMC40OTQsMi4xMjgsMS4zNCwyLjgyMWMwLjgxLDMuMTczLDIuNDc3LDUuNTc1LDMuMDkzLDYuMzg5djIuODk0YzAsMC44MTYtMC40NDUsMS41NjYtMS4xNjIsMS45NThsLTcuOTA3LDQuMzEzICBjLTAuMjUyLDAuMTM3LTAuNTAyLDAuMjk3LTAuNzUyLDAuNDc2QzUuMjc2LDQxLjc5MiwyLDM1LjAyMiwyLDI3LjV6IE00Mi40NTksNDguMTMyYy0wLjM1LDAuMjU0LTAuNzA2LDAuNS0xLjA2NywwLjczNSAgYy0wLjE2NiwwLjEwOC0wLjMzMSwwLjIxNi0wLjUsMC4zMjFjLTAuNDcyLDAuMjkyLTAuOTUyLDAuNTctMS40NDIsMC44M2MtMC4xMDgsMC4wNTctMC4yMTcsMC4xMTEtMC4zMjYsMC4xNjcgIGMtMS4xMjYsMC41NzctMi4yOTEsMS4wNzMtMy40ODgsMS40NzZjLTAuMDQyLDAuMDE0LTAuMDg0LDAuMDI5LTAuMTI3LDAuMDQzYy0wLjYyNywwLjIwOC0xLjI2MiwwLjM5My0xLjkwNCwwLjU1MiAgYy0wLjAwMiwwLTAuMDA0LDAuMDAxLTAuMDA2LDAuMDAxYy0wLjY0OCwwLjE2LTEuMzA0LDAuMjkzLTEuOTY0LDAuNDAyYy0wLjAxOCwwLjAwMy0wLjAzNiwwLjAwNy0wLjA1NCwwLjAxICBjLTAuNjIxLDAuMTAxLTEuMjQ3LDAuMTc0LTEuODc1LDAuMjI5Yy0wLjExMSwwLjAxLTAuMjIyLDAuMDE3LTAuMzM0LDAuMDI1QzI4Ljc1MSw1Mi45NywyOC4xMjcsNTMsMjcuNSw1MyAgYy0wLjYzNCwwLTEuMjY2LTAuMDMxLTEuODk1LTAuMDc4Yy0wLjEwOS0wLjAwOC0wLjIxOC0wLjAxNS0wLjMyNi0wLjAyNWMtMC42MzQtMC4wNTYtMS4yNjUtMC4xMzEtMS44OS0wLjIzMyAgYy0wLjAyOC0wLjAwNS0wLjA1Ni0wLjAxLTAuMDg0LTAuMDE1Yy0xLjMyMi0wLjIyMS0yLjYyMy0wLjU0Ni0zLjg5LTAuOTcxYy0wLjAzOS0wLjAxMy0wLjA3OS0wLjAyNy0wLjExOC0wLjA0ICBjLTAuNjI5LTAuMjE0LTEuMjUxLTAuNDUxLTEuODYyLTAuNzEzYy0wLjAwNC0wLjAwMi0wLjAwOS0wLjAwNC0wLjAxMy0wLjAwNmMtMC41NzgtMC4yNDktMS4xNDUtMC41MjUtMS43MDUtMC44MTYgIGMtMC4wNzMtMC4wMzgtMC4xNDctMC4wNzQtMC4yMTktMC4xMTNjLTAuNTExLTAuMjczLTEuMDExLTAuNTY4LTEuNTA0LTAuODc2Yy0wLjE0Ni0wLjA5Mi0wLjI5MS0wLjE4NS0wLjQzNS0wLjI3OSAgYy0wLjQ1NC0wLjI5Ny0wLjkwMi0wLjYwNi0xLjMzOC0wLjkzM2MtMC4wNDUtMC4wMzQtMC4wODgtMC4wNy0wLjEzMy0wLjEwNGMwLjAzMi0wLjAxOCwwLjA2NC0wLjAzNiwwLjA5Ni0wLjA1NGw3LjkwNy00LjMxMyAgYzEuMzYtMC43NDIsMi4yMDUtMi4xNjUsMi4yMDUtMy43MTRsLTAuMDAxLTMuNjAybC0wLjIzLTAuMjc4Yy0wLjAyMi0wLjAyNS0yLjE4NC0yLjY1NS0zLjAwMS02LjIxNmwtMC4wOTEtMC4zOTZsLTAuMzQxLTAuMjIxICBjLTAuNDgxLTAuMzExLTAuNzY5LTAuODMxLTAuNzY5LTEuMzkydi0zLjU0NWMwLTAuNDY1LDAuMTk3LTAuODk4LDAuNTU3LTEuMjIzbDAuMzMtMC4yOTh2LTUuNTdsLTAuMDA5LTAuMTMxICBjLTAuMDAzLTAuMDI0LTAuMjk4LTIuNDI5LDEuMzk2LTQuMzZDMjEuNTgzLDEwLjgzNywyNC4wNjEsMTAsMjcuNSwxMGMzLjQyNiwwLDUuODk2LDAuODMsNy4zNDYsMi40NjYgIGMxLjY5MiwxLjkxMSwxLjQxNSw0LjM2MSwxLjQxMyw0LjM4MWwtMC4wMDksNS43MDFsMC4zMywwLjI5OGMwLjM1OSwwLjMyNCwwLjU1NywwLjc1OCwwLjU1NywxLjIyM3YzLjU0NSAgYzAsMC43MTMtMC40ODUsMS4zNi0xLjE4MSwxLjU3NWwtMC40OTcsMC4xNTNsLTAuMTYsMC40OTVjLTAuNTksMS44MzMtMS40MywzLjUyNi0yLjQ5Niw1LjAzMmMtMC4yNjIsMC4zNy0wLjUxNywwLjY5OC0wLjczNiwwLjk0OSAgbC0wLjI0OCwwLjI4M1YzOS44YzAsMS42MTIsMC44OTYsMy4wNjIsMi4zMzgsMy43ODJsOC40NjcsNC4yMzNjMC4wNTQsMC4wMjcsMC4xMDcsMC4wNTUsMC4xNiwwLjA4MyAgQzQyLjY3Nyw0Ny45NzksNDIuNTY3LDQ4LjA1NCw0Mi40NTksNDguMTMyeiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" class="comment-avatar"/>
      <div class="comment-text">
      <h5>jonathandunn</h5>
      <span class="comment-time">3 hours ago
      </span>
      <p class="comment-text">
        Good point! There are travel bloggers. Then there are freelancers: coders mainly.
      </p>
      </div>
    </div>
    <div class="comment-box">
      <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU1IDU1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NSA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiPgo8cGF0aCBkPSJNNTUsMjcuNUM1NSwxMi4zMzcsNDIuNjYzLDAsMjcuNSwwUzAsMTIuMzM3LDAsMjcuNWMwLDguMDA5LDMuNDQ0LDE1LjIyOCw4LjkyNiwyMC4yNThsLTAuMDI2LDAuMDIzbDAuODkyLDAuNzUyICBjMC4wNTgsMC4wNDksMC4xMjEsMC4wODksMC4xNzksMC4xMzdjMC40NzQsMC4zOTMsMC45NjUsMC43NjYsMS40NjUsMS4xMjdjMC4xNjIsMC4xMTcsMC4zMjQsMC4yMzQsMC40ODksMC4zNDggIGMwLjUzNCwwLjM2OCwxLjA4MiwwLjcxNywxLjY0MiwxLjA0OGMwLjEyMiwwLjA3MiwwLjI0NSwwLjE0MiwwLjM2OCwwLjIxMmMwLjYxMywwLjM0OSwxLjIzOSwwLjY3OCwxLjg4LDAuOTggIGMwLjA0NywwLjAyMiwwLjA5NSwwLjA0MiwwLjE0MiwwLjA2NGMyLjA4OSwwLjk3MSw0LjMxOSwxLjY4NCw2LjY1MSwyLjEwNWMwLjA2MSwwLjAxMSwwLjEyMiwwLjAyMiwwLjE4NCwwLjAzMyAgYzAuNzI0LDAuMTI1LDEuNDU2LDAuMjI1LDIuMTk3LDAuMjkyYzAuMDksMC4wMDgsMC4xOCwwLjAxMywwLjI3MSwwLjAyMUMyNS45OTgsNTQuOTYxLDI2Ljc0NCw1NSwyNy41LDU1ICBjMC43NDksMCwxLjQ4OC0wLjAzOSwyLjIyMi0wLjA5OGMwLjA5My0wLjAwOCwwLjE4Ni0wLjAxMywwLjI3OS0wLjAyMWMwLjczNS0wLjA2NywxLjQ2MS0wLjE2NCwyLjE3OC0wLjI4NyAgYzAuMDYyLTAuMDExLDAuMTI1LTAuMDIyLDAuMTg3LTAuMDM0YzIuMjk3LTAuNDEyLDQuNDk1LTEuMTA5LDYuNTU3LTIuMDU1YzAuMDc2LTAuMDM1LDAuMTUzLTAuMDY4LDAuMjI5LTAuMTA0ICBjMC42MTctMC4yOSwxLjIyLTAuNjAzLDEuODExLTAuOTM2YzAuMTQ3LTAuMDgzLDAuMjkzLTAuMTY3LDAuNDM5LTAuMjUzYzAuNTM4LTAuMzE3LDEuMDY3LTAuNjQ4LDEuNTgxLTEgIGMwLjE4NS0wLjEyNiwwLjM2Ni0wLjI1OSwwLjU0OS0wLjM5MWMwLjQzOS0wLjMxNiwwLjg3LTAuNjQyLDEuMjg5LTAuOTgzYzAuMDkzLTAuMDc1LDAuMTkzLTAuMTQsMC4yODQtMC4yMTdsMC45MTUtMC43NjQgIGwtMC4wMjctMC4wMjNDNTEuNTIzLDQyLjgwMiw1NSwzNS41NSw1NSwyNy41eiBNMiwyNy41QzIsMTMuNDM5LDEzLjQzOSwyLDI3LjUsMlM1MywxMy40MzksNTMsMjcuNSAgYzAsNy41NzctMy4zMjUsMTQuMzg5LTguNTg5LDE5LjA2M2MtMC4yOTQtMC4yMDMtMC41OS0wLjM4NS0wLjg5My0wLjUzN2wtOC40NjctNC4yMzNjLTAuNzYtMC4zOC0xLjIzMi0xLjE0NC0xLjIzMi0xLjk5M3YtMi45NTcgIGMwLjE5Ni0wLjI0MiwwLjQwMy0wLjUxNiwwLjYxNy0wLjgxN2MxLjA5Ni0xLjU0OCwxLjk3NS0zLjI3LDIuNjE2LTUuMTIzYzEuMjY3LTAuNjAyLDIuMDg1LTEuODY0LDIuMDg1LTMuMjg5di0zLjU0NSAgYzAtMC44NjctMC4zMTgtMS43MDgtMC44ODctMi4zNjl2LTQuNjY3YzAuMDUyLTAuNTE5LDAuMjM2LTMuNDQ4LTEuODgzLTUuODY0QzM0LjUyNCw5LjA2NSwzMS41NDEsOCwyNy41LDggIHMtNy4wMjQsMS4wNjUtOC44NjcsMy4xNjhjLTIuMTE5LDIuNDE2LTEuOTM1LDUuMzQ1LTEuODgzLDUuODY0djQuNjY3Yy0wLjU2OCwwLjY2MS0wLjg4NywxLjUwMi0wLjg4NywyLjM2OXYzLjU0NSAgYzAsMS4xMDEsMC40OTQsMi4xMjgsMS4zNCwyLjgyMWMwLjgxLDMuMTczLDIuNDc3LDUuNTc1LDMuMDkzLDYuMzg5djIuODk0YzAsMC44MTYtMC40NDUsMS41NjYtMS4xNjIsMS45NThsLTcuOTA3LDQuMzEzICBjLTAuMjUyLDAuMTM3LTAuNTAyLDAuMjk3LTAuNzUyLDAuNDc2QzUuMjc2LDQxLjc5MiwyLDM1LjAyMiwyLDI3LjV6IE00Mi40NTksNDguMTMyYy0wLjM1LDAuMjU0LTAuNzA2LDAuNS0xLjA2NywwLjczNSAgYy0wLjE2NiwwLjEwOC0wLjMzMSwwLjIxNi0wLjUsMC4zMjFjLTAuNDcyLDAuMjkyLTAuOTUyLDAuNTctMS40NDIsMC44M2MtMC4xMDgsMC4wNTctMC4yMTcsMC4xMTEtMC4zMjYsMC4xNjcgIGMtMS4xMjYsMC41NzctMi4yOTEsMS4wNzMtMy40ODgsMS40NzZjLTAuMDQyLDAuMDE0LTAuMDg0LDAuMDI5LTAuMTI3LDAuMDQzYy0wLjYyNywwLjIwOC0xLjI2MiwwLjM5My0xLjkwNCwwLjU1MiAgYy0wLjAwMiwwLTAuMDA0LDAuMDAxLTAuMDA2LDAuMDAxYy0wLjY0OCwwLjE2LTEuMzA0LDAuMjkzLTEuOTY0LDAuNDAyYy0wLjAxOCwwLjAwMy0wLjAzNiwwLjAwNy0wLjA1NCwwLjAxICBjLTAuNjIxLDAuMTAxLTEuMjQ3LDAuMTc0LTEuODc1LDAuMjI5Yy0wLjExMSwwLjAxLTAuMjIyLDAuMDE3LTAuMzM0LDAuMDI1QzI4Ljc1MSw1Mi45NywyOC4xMjcsNTMsMjcuNSw1MyAgYy0wLjYzNCwwLTEuMjY2LTAuMDMxLTEuODk1LTAuMDc4Yy0wLjEwOS0wLjAwOC0wLjIxOC0wLjAxNS0wLjMyNi0wLjAyNWMtMC42MzQtMC4wNTYtMS4yNjUtMC4xMzEtMS44OS0wLjIzMyAgYy0wLjAyOC0wLjAwNS0wLjA1Ni0wLjAxLTAuMDg0LTAuMDE1Yy0xLjMyMi0wLjIyMS0yLjYyMy0wLjU0Ni0zLjg5LTAuOTcxYy0wLjAzOS0wLjAxMy0wLjA3OS0wLjAyNy0wLjExOC0wLjA0ICBjLTAuNjI5LTAuMjE0LTEuMjUxLTAuNDUxLTEuODYyLTAuNzEzYy0wLjAwNC0wLjAwMi0wLjAwOS0wLjAwNC0wLjAxMy0wLjAwNmMtMC41NzgtMC4yNDktMS4xNDUtMC41MjUtMS43MDUtMC44MTYgIGMtMC4wNzMtMC4wMzgtMC4xNDctMC4wNzQtMC4yMTktMC4xMTNjLTAuNTExLTAuMjczLTEuMDExLTAuNTY4LTEuNTA0LTAuODc2Yy0wLjE0Ni0wLjA5Mi0wLjI5MS0wLjE4NS0wLjQzNS0wLjI3OSAgYy0wLjQ1NC0wLjI5Ny0wLjkwMi0wLjYwNi0xLjMzOC0wLjkzM2MtMC4wNDUtMC4wMzQtMC4wODgtMC4wNy0wLjEzMy0wLjEwNGMwLjAzMi0wLjAxOCwwLjA2NC0wLjAzNiwwLjA5Ni0wLjA1NGw3LjkwNy00LjMxMyAgYzEuMzYtMC43NDIsMi4yMDUtMi4xNjUsMi4yMDUtMy43MTRsLTAuMDAxLTMuNjAybC0wLjIzLTAuMjc4Yy0wLjAyMi0wLjAyNS0yLjE4NC0yLjY1NS0zLjAwMS02LjIxNmwtMC4wOTEtMC4zOTZsLTAuMzQxLTAuMjIxICBjLTAuNDgxLTAuMzExLTAuNzY5LTAuODMxLTAuNzY5LTEuMzkydi0zLjU0NWMwLTAuNDY1LDAuMTk3LTAuODk4LDAuNTU3LTEuMjIzbDAuMzMtMC4yOTh2LTUuNTdsLTAuMDA5LTAuMTMxICBjLTAuMDAzLTAuMDI0LTAuMjk4LTIuNDI5LDEuMzk2LTQuMzZDMjEuNTgzLDEwLjgzNywyNC4wNjEsMTAsMjcuNSwxMGMzLjQyNiwwLDUuODk2LDAuODMsNy4zNDYsMi40NjYgIGMxLjY5MiwxLjkxMSwxLjQxNSw0LjM2MSwxLjQxMyw0LjM4MWwtMC4wMDksNS43MDFsMC4zMywwLjI5OGMwLjM1OSwwLjMyNCwwLjU1NywwLjc1OCwwLjU1NywxLjIyM3YzLjU0NSAgYzAsMC43MTMtMC40ODUsMS4zNi0xLjE4MSwxLjU3NWwtMC40OTcsMC4xNTNsLTAuMTYsMC40OTVjLTAuNTksMS44MzMtMS40MywzLjUyNi0yLjQ5Niw1LjAzMmMtMC4yNjIsMC4zNy0wLjUxNywwLjY5OC0wLjczNiwwLjk0OSAgbC0wLjI0OCwwLjI4M1YzOS44YzAsMS42MTIsMC44OTYsMy4wNjIsMi4zMzgsMy43ODJsOC40NjcsNC4yMzNjMC4wNTQsMC4wMjcsMC4xMDcsMC4wNTUsMC4xNiwwLjA4MyAgQzQyLjY3Nyw0Ny45NzksNDIuNTY3LDQ4LjA1NCw0Mi40NTksNDguMTMyeiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" class="comment-avatar"/>
      <div class="comment-text">
      <h5>jonathandunn</h5>
      <span class="comment-time">3 hours ago
      </span>
      <p class="comment-text">
        Good point! There are travel bloggers. Then there are freelancers: coders mainly.
      </p>
      </div>
    </div>
    <div class="comment-box">
      <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU1IDU1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NSA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiPgo8cGF0aCBkPSJNNTUsMjcuNUM1NSwxMi4zMzcsNDIuNjYzLDAsMjcuNSwwUzAsMTIuMzM3LDAsMjcuNWMwLDguMDA5LDMuNDQ0LDE1LjIyOCw4LjkyNiwyMC4yNThsLTAuMDI2LDAuMDIzbDAuODkyLDAuNzUyICBjMC4wNTgsMC4wNDksMC4xMjEsMC4wODksMC4xNzksMC4xMzdjMC40NzQsMC4zOTMsMC45NjUsMC43NjYsMS40NjUsMS4xMjdjMC4xNjIsMC4xMTcsMC4zMjQsMC4yMzQsMC40ODksMC4zNDggIGMwLjUzNCwwLjM2OCwxLjA4MiwwLjcxNywxLjY0MiwxLjA0OGMwLjEyMiwwLjA3MiwwLjI0NSwwLjE0MiwwLjM2OCwwLjIxMmMwLjYxMywwLjM0OSwxLjIzOSwwLjY3OCwxLjg4LDAuOTggIGMwLjA0NywwLjAyMiwwLjA5NSwwLjA0MiwwLjE0MiwwLjA2NGMyLjA4OSwwLjk3MSw0LjMxOSwxLjY4NCw2LjY1MSwyLjEwNWMwLjA2MSwwLjAxMSwwLjEyMiwwLjAyMiwwLjE4NCwwLjAzMyAgYzAuNzI0LDAuMTI1LDEuNDU2LDAuMjI1LDIuMTk3LDAuMjkyYzAuMDksMC4wMDgsMC4xOCwwLjAxMywwLjI3MSwwLjAyMUMyNS45OTgsNTQuOTYxLDI2Ljc0NCw1NSwyNy41LDU1ICBjMC43NDksMCwxLjQ4OC0wLjAzOSwyLjIyMi0wLjA5OGMwLjA5My0wLjAwOCwwLjE4Ni0wLjAxMywwLjI3OS0wLjAyMWMwLjczNS0wLjA2NywxLjQ2MS0wLjE2NCwyLjE3OC0wLjI4NyAgYzAuMDYyLTAuMDExLDAuMTI1LTAuMDIyLDAuMTg3LTAuMDM0YzIuMjk3LTAuNDEyLDQuNDk1LTEuMTA5LDYuNTU3LTIuMDU1YzAuMDc2LTAuMDM1LDAuMTUzLTAuMDY4LDAuMjI5LTAuMTA0ICBjMC42MTctMC4yOSwxLjIyLTAuNjAzLDEuODExLTAuOTM2YzAuMTQ3LTAuMDgzLDAuMjkzLTAuMTY3LDAuNDM5LTAuMjUzYzAuNTM4LTAuMzE3LDEuMDY3LTAuNjQ4LDEuNTgxLTEgIGMwLjE4NS0wLjEyNiwwLjM2Ni0wLjI1OSwwLjU0OS0wLjM5MWMwLjQzOS0wLjMxNiwwLjg3LTAuNjQyLDEuMjg5LTAuOTgzYzAuMDkzLTAuMDc1LDAuMTkzLTAuMTQsMC4yODQtMC4yMTdsMC45MTUtMC43NjQgIGwtMC4wMjctMC4wMjNDNTEuNTIzLDQyLjgwMiw1NSwzNS41NSw1NSwyNy41eiBNMiwyNy41QzIsMTMuNDM5LDEzLjQzOSwyLDI3LjUsMlM1MywxMy40MzksNTMsMjcuNSAgYzAsNy41NzctMy4zMjUsMTQuMzg5LTguNTg5LDE5LjA2M2MtMC4yOTQtMC4yMDMtMC41OS0wLjM4NS0wLjg5My0wLjUzN2wtOC40NjctNC4yMzNjLTAuNzYtMC4zOC0xLjIzMi0xLjE0NC0xLjIzMi0xLjk5M3YtMi45NTcgIGMwLjE5Ni0wLjI0MiwwLjQwMy0wLjUxNiwwLjYxNy0wLjgxN2MxLjA5Ni0xLjU0OCwxLjk3NS0zLjI3LDIuNjE2LTUuMTIzYzEuMjY3LTAuNjAyLDIuMDg1LTEuODY0LDIuMDg1LTMuMjg5di0zLjU0NSAgYzAtMC44NjctMC4zMTgtMS43MDgtMC44ODctMi4zNjl2LTQuNjY3YzAuMDUyLTAuNTE5LDAuMjM2LTMuNDQ4LTEuODgzLTUuODY0QzM0LjUyNCw5LjA2NSwzMS41NDEsOCwyNy41LDggIHMtNy4wMjQsMS4wNjUtOC44NjcsMy4xNjhjLTIuMTE5LDIuNDE2LTEuOTM1LDUuMzQ1LTEuODgzLDUuODY0djQuNjY3Yy0wLjU2OCwwLjY2MS0wLjg4NywxLjUwMi0wLjg4NywyLjM2OXYzLjU0NSAgYzAsMS4xMDEsMC40OTQsMi4xMjgsMS4zNCwyLjgyMWMwLjgxLDMuMTczLDIuNDc3LDUuNTc1LDMuMDkzLDYuMzg5djIuODk0YzAsMC44MTYtMC40NDUsMS41NjYtMS4xNjIsMS45NThsLTcuOTA3LDQuMzEzICBjLTAuMjUyLDAuMTM3LTAuNTAyLDAuMjk3LTAuNzUyLDAuNDc2QzUuMjc2LDQxLjc5MiwyLDM1LjAyMiwyLDI3LjV6IE00Mi40NTksNDguMTMyYy0wLjM1LDAuMjU0LTAuNzA2LDAuNS0xLjA2NywwLjczNSAgYy0wLjE2NiwwLjEwOC0wLjMzMSwwLjIxNi0wLjUsMC4zMjFjLTAuNDcyLDAuMjkyLTAuOTUyLDAuNTctMS40NDIsMC44M2MtMC4xMDgsMC4wNTctMC4yMTcsMC4xMTEtMC4zMjYsMC4xNjcgIGMtMS4xMjYsMC41NzctMi4yOTEsMS4wNzMtMy40ODgsMS40NzZjLTAuMDQyLDAuMDE0LTAuMDg0LDAuMDI5LTAuMTI3LDAuMDQzYy0wLjYyNywwLjIwOC0xLjI2MiwwLjM5My0xLjkwNCwwLjU1MiAgYy0wLjAwMiwwLTAuMDA0LDAuMDAxLTAuMDA2LDAuMDAxYy0wLjY0OCwwLjE2LTEuMzA0LDAuMjkzLTEuOTY0LDAuNDAyYy0wLjAxOCwwLjAwMy0wLjAzNiwwLjAwNy0wLjA1NCwwLjAxICBjLTAuNjIxLDAuMTAxLTEuMjQ3LDAuMTc0LTEuODc1LDAuMjI5Yy0wLjExMSwwLjAxLTAuMjIyLDAuMDE3LTAuMzM0LDAuMDI1QzI4Ljc1MSw1Mi45NywyOC4xMjcsNTMsMjcuNSw1MyAgYy0wLjYzNCwwLTEuMjY2LTAuMDMxLTEuODk1LTAuMDc4Yy0wLjEwOS0wLjAwOC0wLjIxOC0wLjAxNS0wLjMyNi0wLjAyNWMtMC42MzQtMC4wNTYtMS4yNjUtMC4xMzEtMS44OS0wLjIzMyAgYy0wLjAyOC0wLjAwNS0wLjA1Ni0wLjAxLTAuMDg0LTAuMDE1Yy0xLjMyMi0wLjIyMS0yLjYyMy0wLjU0Ni0zLjg5LTAuOTcxYy0wLjAzOS0wLjAxMy0wLjA3OS0wLjAyNy0wLjExOC0wLjA0ICBjLTAuNjI5LTAuMjE0LTEuMjUxLTAuNDUxLTEuODYyLTAuNzEzYy0wLjAwNC0wLjAwMi0wLjAwOS0wLjAwNC0wLjAxMy0wLjAwNmMtMC41NzgtMC4yNDktMS4xNDUtMC41MjUtMS43MDUtMC44MTYgIGMtMC4wNzMtMC4wMzgtMC4xNDctMC4wNzQtMC4yMTktMC4xMTNjLTAuNTExLTAuMjczLTEuMDExLTAuNTY4LTEuNTA0LTAuODc2Yy0wLjE0Ni0wLjA5Mi0wLjI5MS0wLjE4NS0wLjQzNS0wLjI3OSAgYy0wLjQ1NC0wLjI5Ny0wLjkwMi0wLjYwNi0xLjMzOC0wLjkzM2MtMC4wNDUtMC4wMzQtMC4wODgtMC4wNy0wLjEzMy0wLjEwNGMwLjAzMi0wLjAxOCwwLjA2NC0wLjAzNiwwLjA5Ni0wLjA1NGw3LjkwNy00LjMxMyAgYzEuMzYtMC43NDIsMi4yMDUtMi4xNjUsMi4yMDUtMy43MTRsLTAuMDAxLTMuNjAybC0wLjIzLTAuMjc4Yy0wLjAyMi0wLjAyNS0yLjE4NC0yLjY1NS0zLjAwMS02LjIxNmwtMC4wOTEtMC4zOTZsLTAuMzQxLTAuMjIxICBjLTAuNDgxLTAuMzExLTAuNzY5LTAuODMxLTAuNzY5LTEuMzkydi0zLjU0NWMwLTAuNDY1LDAuMTk3LTAuODk4LDAuNTU3LTEuMjIzbDAuMzMtMC4yOTh2LTUuNTdsLTAuMDA5LTAuMTMxICBjLTAuMDAzLTAuMDI0LTAuMjk4LTIuNDI5LDEuMzk2LTQuMzZDMjEuNTgzLDEwLjgzNywyNC4wNjEsMTAsMjcuNSwxMGMzLjQyNiwwLDUuODk2LDAuODMsNy4zNDYsMi40NjYgIGMxLjY5MiwxLjkxMSwxLjQxNSw0LjM2MSwxLjQxMyw0LjM4MWwtMC4wMDksNS43MDFsMC4zMywwLjI5OGMwLjM1OSwwLjMyNCwwLjU1NywwLjc1OCwwLjU1NywxLjIyM3YzLjU0NSAgYzAsMC43MTMtMC40ODUsMS4zNi0xLjE4MSwxLjU3NWwtMC40OTcsMC4xNTNsLTAuMTYsMC40OTVjLTAuNTksMS44MzMtMS40MywzLjUyNi0yLjQ5Niw1LjAzMmMtMC4yNjIsMC4zNy0wLjUxNywwLjY5OC0wLjczNiwwLjk0OSAgbC0wLjI0OCwwLjI4M1YzOS44YzAsMS42MTIsMC44OTYsMy4wNjIsMi4zMzgsMy43ODJsOC40NjcsNC4yMzNjMC4wNTQsMC4wMjcsMC4xMDcsMC4wNTUsMC4xNiwwLjA4MyAgQzQyLjY3Nyw0Ny45NzksNDIuNTY3LDQ4LjA1NCw0Mi40NTksNDguMTMyeiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" class="comment-avatar"/>
      <div class="comment-text">
      <h5>jonathandunn</h5>
      <span class="comment-time">3 hours ago
      </span>
      <p class="comment-text">
        Good point! There are travel bloggers. Then there are freelancers: coders mainly.
      </p>
      </div>
    </div>
  </section>
</div>
              
            
!

CSS

              
                $gray-light: #BDBFC2;
$gray: #2F343A;
$text-gray: #616973;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC) repeat;
  
}

.box {
  width: 520px;
  min-height: 80vh;
  padding: 0 40px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 10px #999999;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #8e44ad url(https://picsum.photos/723/1024/?blur
) no-repeat 0 -60px;
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
  .header--wrapper  {
    padding: 40px 0;
  }
  h1 {
    max-width: 50%;
    font-size: 42px;
    line-height: 1.4em;
    margin-top: .5em;
  }
  
  .tag {
    border: 1px solid #fff;
    align-self: flex-start;
    background: #fff;
    color: $gray;
    letter-spacing: 1.5px;
    padding: 10px 20px;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.67s, color 0.5s;
    &:hover {
      background: transparent;
      color: #fff;
      
    }
  }
  
  .author {
    background: rgba(0, 0, 0, 0.3);
  }
  
}

.footer {
  display: flex;
  margin-left: -40px;
  margin-right: -40px;
  margin-top: 40px;
  padding: 30px 40px;
  justify-content: space-between;
  color: $gray;
  text-transform: uppercase;
  background: #fff;
  > ul {
    display: flex;
    > li { 
      width: 24px; 
      color: $gray-light;
      &.span { color: $gray; }
    }
  } 
 
}

.btn {
    cursor: pointer;
}

.content {
  background: #F8F9FA;
  color: $text-gray;
  padding-top: 40px;
  p {
    font-family: 'Arvo', serif;
    font-size: 18px;
    line-height: 2.3em;
    word-spacing: 4px;
    margin-bottom: 20px;
    >span.big-letter {
      color: $gray;
      font-size: 7em;
      line-height: 0.5em;
      float: left;
      margin: 30px 30px 20px 0;
     
    }
  }
}
.comments {
  display: flex;
  flex-flow: column;
  height: 100%;
  background: #FFFFFF;
  justify-content: space-around;
  &__header {
    display: flex;
    justify-content: center;
    padding-top: 2em;
    padding-bottom: 1em;
    text-transform: uppercase;
    &-title,
    &-icon {
      margin-left: auto;
    }
    
    &-icon {
      font-size: 1.5em;
    }
    
  }
}

.comment-box {
  display: flex;
  // height: 33.3333%;
  &:last-child {
    margin-bottom: 1em;
  }
}

.comment-avatar {
  align-self: flex-start;
  margin-right: 2em;
}

.comment-text {
  flex-grow: 3;
  align-items: baseline;
  > h5 { 
    display: inline-block; 
    margin-right: 1em;
  }
  
  > p {
    margin: 1em 0;
  }
}

.comment-time {
  color: $gray-light;
  &:before {
    display: inline-block;
    content: "\2022";
    margin-right: 1em;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

p {
  font-family: 'Arvo', serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
footer {
  font-family: 'Open Sans', sans-serif;
}

h1 {
  margin: 1em 0;
}
              
            
!

JS

              
                
              
            
!
999px

Console