<main class="website">
  
  <header class="section section--fullwidth section--header">
    <nav class="nav">
      <div class="nav__brand"></div>
      <ul class="nav__menu">
        <li class="nav__item"></li>
        <li class="nav__item"></li>
        <li class="nav__item"></li>
        <li class="nav__item"></li>
      </ul>
    </nav>
  </header>
  
  <section class="section section--fullwidth section--hero">
    <div class="hero">
      <div class="box">
        <div class="box__inner">
          <picture>
            <source media="(max-width: 767px)" 
                    srcset="https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=1:1/resize=300 300w, 
                            https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=1:1/resize=500 500w, 
                            https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=1:1/resize=700 700w, 
                            https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=1:1/resize=900 900w">
            <source media="(min-width: 992px)" 
                    srcset="https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=16:4/resize=1000 1000w, 
                            https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=16:4/resize=1500 1500w, 
                            https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=16:4/resize=1900 1900w">
            <source media="(min-width: 768px)" 
                    srcset="https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=16:9/resize=800 800w, 
                            https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=16:9/resize=1000 1000w, 
                            https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=16:9/resize=1200 1200w">
            <img src="https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=16:9/resize=1024" alt="hero">
          </picture>
        </div>
      </div>
    </div>
  </section>
  
  <section class="section section--fullwidth section--thumbnails">
    <div class="thumbs">
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner" 
               data-twic-background="url(image:codepen/tp-cereals.jpg)" 
               style="background-image: url(https://demo.twic.pics/codepen/tp-cereals.jpg?twic=v1/cover=16:9/output=preview)"></div>
        </div>
      </div>
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner" 
               data-twic-background="url(image:codepen/tp-artichoke.jpg)" 
               style="background-image: url(https://demo.twic.pics/codepen/tp-artichoke.jpg?twic=v1/cover=16:9/output=preview)"></div>
        </div>
      </div>
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner" 
               data-twic-background="url(image:codepen/tp-castle.jpg)" 
               style="background-image: url(https://demo.twic.pics/codepen/tp-castle.jpg?twic=v1/cover=16:9/output=preview)"></div>
        </div>
      </div>
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner" 
               data-twic-background="url(image:codepen/tp-canyon.jpg)" 
               style="background-image: url(https://demo.twic.pics/codepen/tp-canyon.jpg?twic=v1/cover=16:9/output=preview)"></div>
        </div>
      </div>      
    </div>
  </section>
  
  <section class="section section--cta">
    <button class="button">Call to action</button>
  </section>
  
  <section class="section section--articles">
    <div class="section__row">
      <h2 class="section__title">Lorem ipsum dolor sit amet</h2>
    </div>
    <div class="section__row">
      <div class="article">
        <div class="article__figure">
          <div class="box box--4-3">
            <div class="box__inner" 
                 data-twic-background="url(image:codepen/tp-rasp.jpg)" 
                 style="background-image: url(https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=4:3/output=preview)"></div>
          </div>
        </div>
        <div class="article__text article__text--right">
          <h3>Lorem ipsum dolor sit amet</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum consectetur est, ac scelerisque enim ultrices in. Proin consectetur tortor et sem tincidunt, at fringilla massa vestibulum. Duis eget tempor eros. Sed porttitor scelerisque leo, nec tempus enim luctus sed. Vivamus eget arcu quis nisl laoreet porttitor in et lacus. Morbi ultricies interdum vehicula. Donec nulla ante, gravida at lobortis vitae, vestibulum sed ipsum. Maecenas ultricies cursus arcu, facilisis pharetra purus rhoncus sed. Suspendisse potenti.</p>
        </div>
      </div>
    </div>
    <div class="section__row">
      <div class="article">
        <div class="article__figure">
          <div class="box box--4-3">
            <div class="box__inner" 
                 data-twic-background="url(image:codepen/tp-snow.jpg)" 
                 style="background-image: url(https://demo.twic.pics/codepen/tp-snow.jpg?twic=v1/cover=4:3/output=preview)"></div>
          </div>
        </div>
        <div class="article__text article__text--left">
          <h3>Lorem ipsum dolor sit amet</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum consectetur est, ac scelerisque enim ultrices in. Proin consectetur tortor et sem tincidunt, at fringilla massa vestibulum. Duis eget tempor eros. Sed porttitor scelerisque leo, nec tempus enim luctus sed. Vivamus eget arcu quis nisl laoreet porttitor in et lacus. Morbi ultricies interdum vehicula. Donec nulla ante, gravida at lobortis vitae, vestibulum sed ipsum. Maecenas ultricies cursus arcu, facilisis pharetra purus rhoncus sed. Suspendisse potenti.</p>
        </div>
      </div>
    </div>
  </section>
  
  <section class="section section--fullwidth section--grid">
    <div class="section__row">
      <h2 class="section__title">Lorem ipsum dolor sit amet</h2>
    </div>
    <div class="section__row">
      <div class="grid">
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img data-twic-src="image:codepen/tp-doggy.jpg">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img data-twic-src="image:codepen/tp-friend.jpg">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img data-twic-src="image:codepen/tp-lake.jpg">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img data-twic-src="image:codepen/tp-lion.jpg">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img data-twic-src="image:codepen/tp-moth.jpg">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img data-twic-src="image:codepen/tp-pug.jpg">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img data-twic-src="image:codepen/tp-rasp.jpg">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img data-twic-src="image:codepen/tp-snow.jpg">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img data-twic-src="image:codepen/tp-write.jpg">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img data-twic-src="image:codepen/tp-cafe.jpg">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
</main>
@import url('https://fonts.googleapis.com/css?family=Nova+Mono|Lato|Oswald');

@import "breakpoint";

// breakpoints
$breakpoint-from-tablet: 768px;
$breakpoint-from-desktop: 992px;
$breakpoint-from-desktop-lrg: 1200px;

// colors
$color-brand-darkest: #2c233f;
$color-brand-darker: #342d4e;
$color-brand: #393254;
$color-brand-lighter: #40375c;
$color-brand-lightest: #5a4f7c;
$color-text: lighten($color-brand-lightest, 40%);

// helpers
@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
  > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
    
  @include breakpoint($breakpoint-from-desktop) {
    font-size: 18px;
  }
    
  @include breakpoint($breakpoint-from-desktop-lrg) {
    font-size: 20px;
  }
}

body {
  background-color: $color-brand-darkest;
  font-family: "Lato", sans-serif;
  color: $color-text;
}

h1, h2, h3 {
  font-family: "Oswald", sans-serif;
}

.website {
  background-color: $color-brand-darker;
  margin: 20px;
  border-radius: 20px;
  //max-width: 960px;
}

.section {
  padding: 20px;
  max-width: 960px;
  margin: auto;
  
  &--fullwidth {
    max-width: 100%;
  }
  
  &__row:not(:last-child) {
    margin-bottom: 20px;
  }
  
  &__title {
    text-align: center;
    text-transform: uppercase;
  }
}

.nav {
  display: flex;
  justify-content: space-between;
  
  &__brand {
    min-width: 160px;
    min-height: 80px;
    background-color: $color-brand-lightest;
    border-radius: 10px;
    margin: auto;
    
    @include breakpoint($breakpoint-from-tablet) {
      margin: 0;
    }
  }
  
  &__menu {
    display: none;
    @include breakpoint($breakpoint-from-tablet) {
      display: flex;
      justify-content: flex-end;
    }
    margin: 0;
    padding: 0;
  }
  
  &__item {
    display: block;
    list-style: none;
    min-width: 80px;
    min-height: 30px;
    background-color: $color-brand-lightest;
    border-radius: 20px;
    margin: auto 10px;
  }
}

.button {
  display: block;
  margin: auto;
  border: none;
  border-radius: 20px;
  background-color: #f5a623;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  padding: 20px 50px;
}

.box {
  @include aspect-ratio(1, 1);
  background-color: $color-brand-lightest;
  border-radius: 20px;
  overflow: hidden;
  
  &--16-9 {
    @include aspect-ratio(16, 9);

    .box__inner {
      &:after {
        content: "aspect ratio: 16:9";
      }
    }
  }

  &--4-3 {
    @include aspect-ratio(4, 3);

    .box__inner {
      
      &:after {
        content: "aspect ratio: 4:3";
      }
    }
  }
  
  &__inner {
    background-size: cover;
    border-radius: 20px;
    overflow: hidden;
    z-index: 0;
    
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      border-radius: 20px;
      z-index: 1;
    }
    
    &:after {
      content: "aspect ratio: 1:1";
      position: absolute;
      bottom: 20px;
      right: 20px;
      font-family: 'Nova Mono', monospace;
      font-size: .6em;
      color: white;
    }
  }
}

.box:hover .box__inner:before {
  //background-color: rgba($color-brand-darkest, 0);
}

.section--thumbnails {
  display: none;
  @include breakpoint($breakpoint-from-tablet) {
    display: block;
  }
}

.hero {
  
  .box {
    @include breakpoint($breakpoint-from-tablet) {
      @include aspect-ratio(16, 9);
    }
    @include breakpoint($breakpoint-from-desktop) {
      @include aspect-ratio(16, 4);
    }

    .box__inner {
      
      img {
        width: 100%;
      }
      
      &:after {
        @include breakpoint($breakpoint-from-tablet) {
          content: "aspect ratio: 16:9";
        }
        @include breakpoint($breakpoint-from-desktop) {
          content: "aspect ratio: 16:4";
        }
      }
    }
  }
}

.thumbs {
  display: flex;
  justify-content: space-between;

  &__item {
    flex-basis: 24%;
  }
}

.article {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  
  &__figure {
    flex: 1 100%;
    @include breakpoint($breakpoint-from-desktop) {
      flex: 1 0;
    }
    
    .box, .box__inner {
      border-radius: 0;
    }
  }
  
  &__text {
    flex: 1 100%;
    text-align: justify;
    margin-top: 20px;
    @include breakpoint($breakpoint-from-desktop) {
      flex: 2 0;
      margin-top: 0;
    }
    
    &--left {
      @include breakpoint($breakpoint-from-desktop) {
        order: -1;
        padding-right: 40px;
      }
    }
    
    &--right {
      @include breakpoint($breakpoint-from-desktop) {
        padding-left: 40px;
      }      
    }
    
    p {
      margin-top: 0;
    }
    
    h3 {
      margin-top: 0;
      margin-bottom: .5em;
    }
  }
}

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;

  &__item {
    flex: 0 calc(50% - 10px);
    @include breakpoint($breakpoint-from-tablet) {
      flex: 0 calc(25% - 20px);
    }
    @include breakpoint($breakpoint-from-desktop) {
      flex: 0 calc(20% - 20px);
    }
  }
}

.figure {
  
  &__media {
    
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      visibility: hidden;
      opacity: 0;
      will-change: opacity;
      transition: opacity 1s; 
      
      &.twic-done {
        visibility: visible;
        opacity: 1;
      }
    }
  }
  
  &__caption {
    
    h3 {
      text-align: center;
      margin-top: .5em;
      font-size: .9em;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://demo.twic.pics/v1/script