<!-- Demo for CSS Tricks Article -->
<!-- Showcasing a layout using the between() function -->

<div class="Page">
  <section class="Hero">
    <nav class="Navigation">
      <a href="#">
        <div class="Logo"></div>
      </a>
      <ul class="Hamburger">
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul class="Navigation-list">
        <li class="Navigation-item"><a href="#">About Us</a></li>
        <li class="Navigation-item"><a href="#">Events</a></li>
        <li class="Navigation-item"><a href="#">Resources</a></li>
        <li class="Navigation-item"><a href="#">Contact</a></li>
        <li class="Navigation-item">
          <button class="Navigation-button">Call to action</button>
        </li>
      </ul>
    </nav>
    <div class="Hero-content">
      <div class="Hero-copy">
        <h1 class="Hero-title">Welcome <br /> Message</h1>
        <p class="Hero-text">Atque sint aliquam numquam quam voluptate <br /> doloremque labore accusantium, iste excepturi</p>
        <button class="Hero-button">Call to action</button>
      </div>
    </div>
  </section>
  <section class="NewsFeed">
    <!-- Single NewsFeed Article -->
    <article class="NewsFeed-article">
      <div class="NewsFeed-image"></div>
      <div class="NewsFeed-copy">
        <p class="NewsFeed-date">April 6, 2017</p>
        <h1 class="NewsFeed-title">News Feed Title</h1>
        <p class="NewsFeed-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui velit doloribus nam...</p>
      </div>
      <a href="#" class="NewsFeed-readMore">Read more</a>
    </article>
    <!-- Single NewsFeed Article -->
    <article class="NewsFeed-article">
      <div class="NewsFeed-image"></div>
      <div class="NewsFeed-copy">
        <p class="NewsFeed-date">April 6, 2017</p>
        <h1 class="NewsFeed-title">News Feed Title</h1>
        <p class="NewsFeed-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui velit doloribus nam...</p>
      </div>
      <a href="#" class="NewsFeed-readMore">Read more</a>
    </article>
    <!-- Single NewsFeed Article -->
    <article class="NewsFeed-article">
      <div class="NewsFeed-image"></div>
      <div class="NewsFeed-copy">
        <p class="NewsFeed-date">April 6, 2017</p>
        <h1 class="NewsFeed-title">News Feed Title</h1>
        <p class="NewsFeed-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui velit doloribus nam...</p>
      </div>
      <a href="#" class="NewsFeed-readMore">Read more</a>
    </article>
  </section>
  <section class="Featured u-narrowContainer">
    <div class="Featured-copy">
      <h1 class="Featured-title">Lorem ipsum <br /> dolor sit amet</h1>
      <p class="Featured-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br /> Suscipit ipsam unde, fugit, consequuntur nulla.</p>
      <button class="Featured-button">Button</button>
    </div>
    <div class="Featured-image"></div>
  </section>
  <section class="Gallery u-narrowContainer">
    <h1 class="Gallery-title">Images of volunteers</h1>
    <p class="Gallery-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br /> Suscipit laudantium, a corporis voluptatem inventore beatae.</p>
    <div class="u-breakout">
      <div class="Gallery-grid">
        <div class="Gallery-image">
          <img src="//placehold.it/500x500/D8D8D8" alt="" />
        </div>
        <div class="Gallery-image">
          <img src="//placehold.it/500x500/ABABAB" alt="" />
        </div>
        <div class="Gallery-image">
          <img src="//placehold.it/500x500/B3B3B3" alt="" />
        </div>
        <div class="Gallery-image">
          <img src="//placehold.it/500x500/BFBFBF" alt="" />
        </div>       
      </div>
    </div>
  </section>
  <section class="Contact u-narrowContainer">
    <h1 class="Contact-title">Contact Us</h1>
    <div class="Contact-forms">
      <p class="Contact-text">Lorem ipsum dolor sit amet <br /> Perspiciatis aperiam, atque amet?</p>
      <div class="Contact-inputs">
        <input type="text" placeholder="First Name"/>
        <input type="text" placeholder="Last Name"/>
        <input type="text" placeholder="Email Address"/>
        <input type="text" placeholder="Phone"/>
      </div>
      <div class="Contact-textarea">
        <label for="textarea">Message</label>
        <textarea id="textarea" cols="30" rows="10"></textarea>
      </div>
      <button class="Contact-button">Button</button>
    </div>
    <div class="Contact-image"></div>
  </section>
  <footer class="Footer">
    <div class="Footer-map"></div>
    <div class="Footer-content">
      <div class="Footer-contact">
        <h3 class="Footer-contactTitle">Contact us</h3>
        <p class="Footer-contactText">Magnam 24, Repellat Repellendus</p>
        <p class="Footer-contactText">Cupiditate Deleniti, Libero Magni</p>
        <div class="Footer-social">
          <div class="Footer-socialIcon"></div>
          <div class="Footer-socialIcon"></div>
          <div class="Footer-socialIcon"></div>
          <div class="Footer-socialIcon"></div>
        </div>
      </div>
      <div class="Footer-newsletter">
        <h1 class="Footer-newsletterTitle">Sign Up For News</h1>
        <p class="Footer-newsletterText">Lorem ipsum dolor sit amet and all that</p>
        <input class="Footer-newsletterInput" type="email" placeholder="Email" />
        <button class="Footer-button">Button</button>
      </div>
    </div>
  </footer>
</div>
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over A-viewport-width to B-viewport-width.
 * Requires a media query to cap the value at B.
 */
 
@function between($from, $to, $fromWidth, $toWidth) {
  $slope: ($to - $from) / ($toWidth - $fromWidth);
  $base: $from - $slope * $fromWidth;

  @return calc(#{$base} + #{100vw * $slope});
}

$small: 324px;
$medium: 720px;
$large: 1440px;

$white: #ffffff;
$fadedWhite: #f9f9f9;
$lightGray: #eaeaea;
$mediumGray: #bebebe;
$darkGray: #afafaf;

$open: 'Open Sans';
$fira: 'Fira Sans';

body {
  align-items: center;
  display: flex;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  justify-content: center;
}

section {
  // horizontal padding 90px $large, 32px $medium, 16px $small
  padding: 16px;

  @media (min-width: $small) {
    padding: between(16px, 32px, $small, $medium);
  }
  @media (min-width: $medium) {
    padding: between(32px, 90px, $medium, $large);
  }
  @media (min-width: $large) {
    padding: 90px;
  }
}

button {
  background: $white;
  border: none;
  border-radius: 3px;
}

a {
  text-decoration: none;
  color: $fadedWhite;
}

.u-narrowContainer {
  // Utility that narrows containers
  // Horizontal padding 180px $large, 32px $medium, disabled $small
  // Vertical padding half that

  @media (min-width: $medium) {
    padding: between(16px, 90px, $medium, $large) between(32px, 180px, $medium, $large);
  }

  @media (min-width: $large) {
    padding: 90px 180px;
  }
}

.u-breakout {
  // Utility to escape section padding
  margin: 0;

  @media (min-width: $small) {
    margin: 0 between(0px, -180px, $small, $large);
  }
  @media (min-width: $large) {
    margin: 0 -180px;
  }
}

.Page {
  width: 100%;
  overflow: hidden;
  max-width: $large;
}

.Logo {
  width: 140px;
  height: 32px;
  background: $white;
  border-radius: 8px;
}

.Navigation {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.Navigation-list {
  align-items: center;
  display: none;

  @media (min-width: $medium) {
    display: flex;
  }
}

.Navigation-item {
  font-size: 12px;
  
  @media (min-width: $medium) {
    font-size: between(12px, 16px, $medium, $large);
  }
  @media (min-width: $large) {
    font-size: 16px;
  }

  & + & {
    padding-left: 2em;
  }
}

.Navigation-button {
  background: $white;
  color: $darkGray;
  padding: 1em 2.5em;
  font-size: inherit;
}

.Hamburger {
  display: block;

  @media (min-width: $medium) {
    display: none;
  }

  li {
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: $white;
    margin-bottom: 4px;
  }
}

.Hero {
  // height 900px $large, 420px $medium, 300px $small
  background: url('//placehold.it/1440x900/afafaf/D3D6DB');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  height: 300px;
  
  @media (min-width: $small) {
    height: between(300px, 420px, $small, $medium);
  }
  @media (min-width: $medium) {
    height: between(420px, 900px, $medium, $large);
  }
  @media (min-width: $large) {
    height: 900px;
  }
}

.Hero-content {
  display: flex;
  padding: 0 10%;
  margin: auto 0;
}

.Hero-copy {
  color: $lightGray;
}

.Hero-title {
  /* font-size 64px $large, 44px $medium, 36px $small */
  /* margin-bottom 40px $large, 30px $medium, 10px $small*/
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  color: $white;
  margin-bottom: 10px;
  
  @media (min-width: $small) {
    font-size: between(36px, 44px, $small, $medium);
    margin-bottom: between(10px, 30px, $small, $medium)
  }
  @media (min-width: $medium) {
    font-size: between(44px, 64px, $medium, $large);
    margin-bottom: between(30px, 40px, $medium, $large);
  }
  @media (min-width: $large) {
    font-size: 64px;
    margin-bottom: 40px;
  }
}

.Hero-text {
  // font-size = 18px $large, 12px $medium
  font-size: 12px;
  line-height: 1.5;

  @media (min-width: $medium) {
    font-size: between(12px, 18px, $medium, $large)
  }
  @media (min-width: $large) {
    font-size: 18px;
  }
}

.Hero-button {
  // font-size = 16px $large, 12px $medium, 10px $small
  background: $white;
  color: $darkGray;
  padding: 15px 45px;
  font-size: 10px;
  margin-top: 40px;
  
  @media (min-width: $small) {
    font-size: between(10px, 12px, $small, $medium)
  }
  @media (min-width: $medium) {
    font-size: between(12px, 16px, $medium, $large)
  }
  @media (min-width: $large) {
    font-size: 16px;
  }
}

.NewsFeed {
  // Image height 280px $large, 150px $medium, 200px $small,
  $imageHeightSmall: 200px;
  $imageHeightMedium: 150px;
  $imageHeightLarge: 280px;
  
  color: $darkGray;
  display: flex;
  flex-wrap: wrap;

@media (min-width: $medium) {
  margin-top: between(-$imageHeightMedium/2, -$imageHeightLarge/2, $medium, $large);
}
@media (min-width: $large) {
  margin-top: -$imageHeightLarge/2;
}
@media (min-width: $medium) {
  flex-wrap: nowrap;
}

  &-image {
    // Nesting for block scoped variables.
    background: url('//placehold.it/403x279/eaeaea/d3d3d3') no-repeat;
    background-size: cover;
    background-position: 100%;
    height: $imageHeightSmall;
  
    @media (min-width: $medium) {
      height: between($imageHeightMedium, $imageHeightLarge, $medium, $large);
    }
    @media (min-width: $large) {
      height: $imageHeightLarge;
    }
  }
}


.NewsFeed-article {
  flex: 1 1 auto;
  @media (min-width: $medium) {
    margin: 0 16px;
  }

  &:not(:first-child) {
    display: none;

    @media (min-width: $medium) {
      display: block;
    }
  }
}

.NewsFeed-copy {
  margin-top: 28px;
}

.NewsFeed-title {
  font-family: $fira;
  font-size: 24px;
  padding-bottom: 32px;
  line-height: 1.4;
  font-weight: 600;
}

.NewsFeed-date {
  font-family: $fira;
  font-weight: 600;
  padding-bottom: 16px;
}

.NewsFeed-text {
  color: $darkGray;
  line-height: 1.5;
}

.NewsFeed-readMore {
  font-family: $fira;
  font-weight: 600;
  color: $mediumGray;
  display: block;
  text-align: right;
  padding-top: 16px;
  &::after {
    font-family: sans-serif;
    content: ">";
    padding-left: 0.5em;
  }
}

.Featured {
  color: $darkGray;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  
  @media (min-width: $medium) {
    flex-wrap: nowrap;;
    justify-content: space-around;
  }
}

.Featured-copy {
  margin-right: 32px;
  margin-top: 28px;
}

.Featured-title {
  // font-size 36px $large, 24px $medium
  font-family: $fira;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 16px;
  
  @media (min-width: $medium) {
    font-size: between(24px, 36px, $medium, $large);
  }
  @media (min-width: $large) {
    font-size: 36px;
  }
}

.Featured-text {
  // font-size 18px $large, 16px $medium
  font-size: 16px;
  line-height: 1.4;
  
  @media (min-width: $medium) {
    font-size: between(16px, 18px, $medium, $large);
  }
  @media (min-width: $large) {
    font-size: 18px;
  }
}

.Featured-image {
  background: url('//placehold.it/508x360/eaeaea/d3d3d3');
  background-size: cover;
  background-position: 100%;
  padding-top: 50%;
  width: 100%;
  order: -1;

  @media (min-width: $medium) {
    margin-bottom: 0;
    max-width: 508px;
    order: 0;
    padding-top: 33.333%;
  }
}

.Featured-button {
  background: $darkGray;
  color: $white;
  padding: 15px 45px;
  font-size: 16px;
  margin-top: 35px;
  min-width: 190px;
}

.Gallery {
  color: $darkGray;
}
.Gallery-title {
  // 36px $large, 36px $medium, 24px $small
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 0.5em;
  
  @media (min-width: $small) {
    font-size: between(24px, 36px, $small, $medium);
  }
  @media (min-width: $medium) {
    font-size: 36px;
  }
}

.Gallery-text {
  line-height: 1.5;
  font-size: 18px;
}

.Gallery-grid {
  display: flex;
  margin-top: 50px; // todo 50px?
  flex-wrap: wrap;
  
  @media (min-width: $medium) {
    flex-wrap: nowrap;
  }
}
.Gallery-image {
  min-width: 0;
  width: 100%;
  > img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
  }
  
  @media (min-width: $small) {
    width: 50%;
  }
}

.Contact {
  color: $darkGray;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.Contact-forms {
  flex: 2;

  @media (min-width: $medium) {
    margin-right: 10%;
  }
}

.Contact-title {
  // fz: 36px $large, 36px $medium, 28px $small
  flex: 100%;
  font-family: $fira;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 0.5em;
  
  @media (min-width: $small) {
    font-size: between(28px, 36px, $small, $medium);
  }
  @media (min-width: $medium) {
    font-size: 36px;
  }
}

.Contact-text {
  line-height: 1.5;
}

.Contact-inputs {
  // margin-bottom: 40px $medium, 0px $small
  display: flex;
  flex-wrap: wrap;
  margin: 40px auto;
  margin-bottom: 0;

  @media (min-width: $small) {
    margin-bottom: between(0px, 40px, $small, $medium); 
  }
  
  @media (min-width: $medium) {
    margin-bottom: 40px;
  }

  input {
    color: #AFAFAF;
    flex: 1 1 100%;
    font-family: $fira;
    font-size: 12px;
    border: none;
    letter-spacing: 0.333px;
    font-weight: 200;
    box-shadow: 0 1px 0 $mediumGray;
    padding: 0;
    padding-bottom: 1em;
    margin-bottom: 40px;
    
    @media (min-width: $small) {
      flex: 0 1 calc(50% - 22px);
      &:nth-child(odd) {
        margin-right: 22px;
      }
    }
  }
}

.Contact-textarea {
  color: #AFAFAF;
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  label {
    font-family: $fira;
    font-size: 12px;
    letter-spacing: 0.333px;
    font-weight: 200;
  }
  textarea {
    flex: 1 1 100%;
    border-color: $mediumGray;
    margin-top: 15px;
  }
}

.Contact-button {
  // width 190px $large, 150px $medium, 100% $small
  background: $lightGray;
  color: $darkGray;
  font-size: 16px;
  width: 100%;
  padding: 1em 2.5em;
  
  @media (min-width: $small) {
    width: 150px;
  }
  @media (min-width: $medium) {
    width: between(150px, 190px, $medium, $large);
  }
  @media (min-width: $large) {
    width: 190px;
  }
}

.Contact-image {
  // margin-right -110px $large, 0px $medium and disappear
  display: none;

  @media (min-width: $medium) {
    display: block;
    background: url('//placehold.it/402x387/ffffff/D3D6DB');
    background-size: cover;
    background-position: center;
    flex: 1;
    height: 308px;
    border: 1px solid $lightGray;
    margin-bottom: 0;
    min-width: 280px;
    margin-right: between(0px, -110px, $medium, $large);
    max-width: 400px;
  }
  
  @media (min-width: $large) {
    margin-right: -110px;
  }
}

.Footer {
  // Padding 93px, 67px $large, 34px, 24px, $medium, $54px 32px $small
  padding: 54px 32px;
  display: flex;
  align-items: flex-start;
  background: $darkGray;
  flex-wrap: wrap;
  
  @media (min-width: $small) {
    padding: 54px between(32px, 24px, $small, $medium);
  }
  @media (min-width: $medium) {
    flex-wrap: nowrap;
    padding: between(34px, 93px, $medium, $large) between(24px, 67px, $medium, $large);
  }
  @media (min-width: $large) {
    padding: 93px 67px;
  }
  
}

.Footer-map {
  // margin-right: 128px $large, 24px $medium, not visible $small
  display: none;
  background: url('//placehold.it/296x181/8C8C8C/F2F2F2');
  background-size: cover;
  background-position: center;
  width: 219px;
  height: 181px;
  
  @media (min-width: $medium) {
    display: block;
  }
}

.Footer-content {
  // 130 20 0
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-wrap: wrap;
  
  @media (min-width: $small) {
    flex-wrap: nowrap;
    margin-left: between(0px, 20px, $small, $medium);
  }
  
  @media (min-width: $medium) {
    margin-left: between(20px, 130px, $medium, $large);
  }
  
  @media (min-width: $large) {
    margin-left: 130px;
  }
}

.Footer-contact {
  font-size: 12px;
  margin-bottom: 50px;
  width: 100%;

  @media (min-width: $small) {
    margin-bottom: 0;
    margin-right: 20px;
    width: auto;
  }
}
.Footer-contactTitle {
  color: $white;
  margin-bottom: 10px;
}
.Footer-contactText {
  color: #D8D8D8;
  line-height: 1.75;
}

.Footer-social {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}

.Footer-socialIcon {
  background: #D8D8D8;
  width: 36px;
  height: 36px;
}

.Footer-newsletter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  @media (min-width: $medium) {
    margin-right: between(0px, 90px, $medium, $large);
  }
  @media (min-width: $large) {
    margin-right: 90px;
  }
}

.Footer-newsletterTitle {
  font-size: 24px;
  color: $white;
  margin-bottom: 12px;
  display: none;
  
  @media (min-width: $medium) {
    display: block;
  }
}

.Footer-newsletterText {
  color: #D8D8D8;
  margin-bottom: 10px;
}

.Footer-newsletterInput {
  box-sizing: border-box;
  padding: 0 1em;
  border-radius: 3px;
  background: $white;
  height: 40px;
  border: 0;
  margin-bottom: 25px;
}

.Footer-button {
  // width 190px $large, 150px $medium, 100% $small
  background: $lightGray;
  color: $darkGray;
  font-size: 16px;
  width: 100%;
  padding: 1em 2.5em;
  
  @media (min-width: $small) {
    width: 150px;
  }
  @media (min-width: $medium) {
    width: between(150px, 190px, $medium, $large);
  }
  @media (min-width: $large) {
    width: 190px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.