<div class='main-wrapper'>
<div class='hero-image'>
<div class='hero-content'>
<div class='hc-label'>The Italian Dolomites</div>
<div class='hc-desc'>Interview with Andy Free about his trip to the dolomites in Italy</div>
<div class='hc-footer'>
<div class='hcf-comments'><span class='amount'>168</span>Comments</div>
<div class='hcf-divider'></div>
<div class='hcf-shares'><span class='amount'>26.842</span>Shares</div>
<div class='hcf-toggle'>
<p class='hcft-label'>More Articles</p>
<div class='hcft-icon-holder'>
<i class='hcft-icon closed fa fa-chevron-down'></i>
<i class='hcft-icon opened fa fa-times'></i>
</div>
</div>
</div>
</div>
</div>
<div class='scroll-content'>
<div class='sc-row'>
<div class='content-article'>
<div class='article-number'>01</div>
<div class='article-info'>
<div class='ai-label'>Visiting Vester Peak</div>
<div class='ai-desc'>Everything you should know about hiking in the mountains</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>24</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>128</span>Shares</div>
</div>
</div>
<div class='article-image ca-1'></div>
</div>
<div class='content-article'>
<div class='article-number'>02</div>
<div class='article-info'>
<div class='ai-label'>Trailing Together</div>
<div class='ai-desc'>Walking among the nature in the Rocky Mountain National Park, Colorado</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>458</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>110</span>Shares</div>
</div>
</div>
<div class='article-image ca-2'></div>
</div>
</div>
<div class='sc-row'>
<div class='content-article'>
<div class='article-number'>03</div>
<div class='article-info'>
<div class='ai-label'>The Magic Pond</div>
<div class='ai-desc'>The scenery is set like a Monet painting</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>1640</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>86.451</span>Shares</div>
</div>
</div>
<div class='article-image ca-3'></div>
</div>
<div class='content-article'>
<div class='article-number'>04</div>
<div class='article-info'>
<div class='ai-label'>Beach Essentials</div>
<div class='ai-desc'>What should you bring to the beach, and what beaches should you visit?</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>58</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>1.359</span>Shares</div>
</div>
</div>
<div class='article-image ca-4'></div>
</div>
</div>
<div class='sc-row'>
<div class='content-article'>
<div class='article-number'>05</div>
<div class='article-info'>
<div class='ai-label'>Romantic Camping</div>
<div class='ai-desc'>We went to Norway to find out just how romantic it can be sleeping under the stars</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>14</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>36</span>Shares</div>
</div>
</div>
<div class='article-image ca-5'></div>
</div>
<div class='content-article'>
<div class='article-number'>06</div>
<div class='article-info'>
<div class='ai-label'>Cave Explorers</div>
<div class='ai-desc'>In USA there's over a thousand caves. We list everyone that you should visit.</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>3590</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>129.547</span>Shares</div>
</div>
</div>
<div class='article-image ca-6'></div>
</div>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Oxygen:400,300,700)
$content-padding: 40px
$nav-height: 60px
$hero-stop: 40%
$hero-speed: .5s
.ca-1
background: url('https://farm1.staticflickr.com/571/21101592188_f5da31c3f5_o.jpg') no-repeat center center
.ca-2
background: url('https://i.redd.it/ool7yp323aux.jpg') no-repeat center center
.ca-3
background: url('https://i.redd.it/cz572ctve9ux.jpg') no-repeat center center
.ca-4
background: url('https://i.redd.it/etwqy45ntqcx.jpg') no-repeat center center
.ca-5
background: url('https://farm6.staticflickr.com/5692/21342201074_aef835df8d_k.jpg') no-repeat center center
.ca-6
background: url('https://i.redd.it/co3a6ufwmuqx.jpg') no-repeat center center
*
margin: 0
padding: 0
box-sizing: border-box
.clear-after
&:after
content: ''
display: block
clear: both
body
text-rendering: auto
-webkit-font-smoothing: antialiased
font-family: Oxygen
color: white
.main-wrapper
position: relative
width: 100vw
height: 100vh
overflow: hidden
.hero-image
z-index: 3
position: relative
width: 100%
height: 100%
background: url('https://c1.staticflickr.com/1/632/21136101110_1dde1c1a7e_o.jpg') no-repeat center center fixed
background-size: cover
box-shadow: 0 5px 60px 10px rgba(black, .75)
transition: all $hero-speed ease
&.browsing-content
height: $hero-stop
background-position: center -150px
&:after
opacity: 1
height: 100%
.hcft-icon
&.closed
opacity: 0 !important
.hcft-icon
&.opened
opacity: 1 !important
&:after
content: ''
display: block
position: absolute
background: linear-gradient(0deg, rgba(black, 1), rgba(black, 0))
height: 50%
width: 100%
bottom: 0
left: 0
opacity: 0.65
transition: all $hero-speed ease
.hero-content
position: absolute
z-index: 4
width: 100%
padding: $content-padding
bottom: 0
.hc-label
font-size: 44px
text-transform: uppercase
font-weight: 700
.hc-desc
font-size: 22px
text-transform: uppercase
font-weight: 300
.hc-footer
@extend .clear-after
margin-top: calc(#{$content-padding} / 1.5)
line-height: 32px
font-size: 14px
.hcf-divider
float: left
margin: 7px 10px
height: 18px
width: 1px
background-color: white
.hcf-comments,
.hcf-shares
float: left
text-transform: uppercase
.amount
margin-right: 5px
font-weight: 700
.hcf-toggle
float: right
.hcft-label
float: left
line-height: 32px
margin-right: 10px
text-transform: uppercase
.hcft-icon-holder
float: left
position: relative
width: 32px
height: 32px
text-align: center
background-color: rgba(black, .25)
transition: background-color .25s ease
&:hover
background-color: rgba(black, .5)
.hcft-icon
cursor: pointer
line-height: 32px
width: 32px
left: 0
position: absolute
font-size: 14px
transition: all $hero-speed ease
&.closed
opacity: 1
&.opened
opacity: 0
.scroll-content
position: absolute
top: $hero-stop
left: 0
width: 100%
overflow: auto
height: calc(100% - #{$hero-stop})
.sc-row
@extend .clear-after
z-index: 1
.content-article
float: left
cursor: pointer
width: 50%
height: 360px
overflow: hidden
position: relative
&:after
content: ''
display: block
position: absolute
background: linear-gradient(0deg, rgba(black, .85), rgba(black, 0.1))
height: 100%
width: 100%
bottom: 0
left: 0
opacity: 1
transition: opacity .25s ease
&:hover
&:after
opacity: 0
.article-image
transform: scale(1.1) !important
.article-image
width: 100%
height: 100%
background-size: cover
transform: scale(1)
transition: all .25s ease
.article-number
z-index: 2
position: absolute
top: $content-padding
left: $content-padding
font-size: 20px
font-weight: 700
letter-spacing: 2px
.article-info
z-index: 2
position: absolute
bottom: 0
padding: $content-padding
text-transform: uppercase
.ai-label
font-size: 20px
font-weight: 700
margin-bottom: calc(#{$content-padding} / 4)
.ai-desc
font-size: 16px
font-weight: 300
.ai-footer
@extend .clear-after
line-height: 20px
margin-top: calc(#{$content-padding} / 4)
.aif-comments, .aif-shares
float: left
font-size: 14px
.amount
font-weight: 700
margin-right: 5px
.aif-divider
float: left
height: 14px
margin: 3px 10px
width: 1px
background-color: white
View Compiled
