Travel

index.html

<nav class="flex-nav">
  <div class="container">
    <div class="grid">
      <div class="column-xs-9 column-md-8">
        <p id="logo">Japan<span id="highlight">.</span></p>
      </div>
      <div class="column-xs-3 column-md-4">
        <a href="#" class="toggle-nav">Menu <i class="ion-navicon-round"></i></a>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Discover</a></li>
          <li><a href="#">Plan Your Trip</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
<main class="intro-section">
  <div class="container">
    <div class="grid">
      <div class="column-xs-12">
        <ul class="slider">
          <li class="slider-item active">
            <div class="grid vertical">
              <div class="column-xs-12 column-md-2 hide-mobile">
                <div class="intro">
                  <a href="#">
                    <h1 class="title"><span class="underline">Explore Tokyo</span></h1>
                  </a>
                </div>
              </div>
              <div class="column-xs-12 column-md-10">
                <div class="image-holder">
                  <img src="https://source.unsplash.com/cddaZDt6uRw">
                </div>
                <div class="grid">
                  <div class="column-xs-12 column-md-9">
                    <div class="intro show-mobile">
                      <a href="#">
                        <h1 class="title"><span class="underline">Explore Tokyo</span></h1>
                      </a>
                    </div>
                    <p class="description">Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples.</p>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="slider-item">
            <div class="grid vertical">
              <div class="column-xs-12 column-md-2 hide-mobile">
                <div class="intro">
                  <a href="#">
                    <h1 class="title"><span class="underline">Explore Kyoto</span></h1>
                  </a>
                </div>
              </div>
              <div class="column-xs-12 column-md-10">
                <div class="image-holder">
                  <img src="https://source.unsplash.com/Pz3EHf-KJfc">
                </div>
                <div class="grid">
                  <div class="column-xs-12 column-md-9">
                    <div class="intro show-mobile">
                      <a href="#">
                        <h1 class="title"><span class="underline">Explore Kyoto</span></h1>
                      </a>
                    </div>
                    <p class="description">Kyoto is famous for its numerous classical Buddhist temples, gardens, imperial palaces, Shinto shrines and traditional wooden houses.</p>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="slider-item">
            <div class="grid vertical">
              <div class="column-xs-12 column-md-2 hide-mobile">
                <div class="intro">
                  <a href="#">
                     <h1 class="title"><span class="underline">Explore Osaka</span></h1>
                  </a>
                </div>
              </div>
              <div class="column-xs-12 column-md-10">
                <div class="image-holder">
                  <img src="https://source.unsplash.com/peYW3VwICpE">
                </div>
                <div class="grid">
                  <div class="column-xs-12 column-md-9">
                    <div class="intro show-mobile">
                      <a href="#">
                        <h1 class="title"><span class="underline">Explore Osaka</span></h1>
                      </a>
                    </div>
                    <p class="description">Osaka is a large port city and commercial center known for its modern architecture, nightlife and hearty street food.</p>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="slider-item">
            <div class="grid vertical">
              <div class="column-xs-12 column-md-2 hide-mobile">
                <div class="intro">
                  <a href="#">
                    <h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
                  </a>
                </div>
              </div>
              <div class="column-xs-12 column-md-10">
                <div class="image-holder">
                  <img src="https://source.unsplash.com/VmeOZQjTVGE">
                </div>
                <div class="grid">
                  <div class="column-xs-12 column-md-9">
                    <div class="intro show-mobile">
                      <a href="#">
                        <h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
                      </a>
                    </div>
                    <p class="description">Hokkaido, the northernmost of Japan’s main islands, is known for its volcanoes, natural hot springs ("onsen") and ski areas.</p>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      <div class="grid">
        <div class="column-xs-12">
          <div class="controls">
              <button class="previous">
                <span class="visually-hidden">Previous</span>
                <span class="icon arrow-left" aria-hidden="true"></span>
              </a>
              <button class="next">
                <span class="visually-hidden">Next</span>
                <span class="icon arrow-right" aria-hidden="true"></span>
              </a>
            </div>
          </div>
      </div>
    </div>
  </div>
</main>

script.js

const items = document.querySelectorAll('.slider-item');
const itemCount = items.length;
const nextItem = document.querySelector('.next');
const previousItem = document.querySelector('.previous');
const navItem = document.querySelector('a.toggle-nav');
let count = 0;

function showNextItem() {
  items[count].classList.remove('active');

  if(count < itemCount - 1) {
    count++;
  } else {
    count = 0;
  }

  items[count].classList.add('active');
  console.log(count);
}

function showPreviousItem() {
  items[count].classList.remove('active');

  if(count > 0) {
    count--;
  } else {
    count = itemCount - 1;
  }

  items[count].classList.add('active');
  // Check if working...
  console.log(count);
}

function toggleNavigation(){
  this.nextElementSibling.classList.toggle('active');
}

function keyPress(e) {
  e = e || window.event;
  
  if (e.keyCode == '37') {
    showPreviousItem();
  } else if (e.keyCode == '39') {
    showNextItem();
  }
}

nextItem.addEventListener('click', showNextItem);
previousItem.addEventListener('click', showPreviousItem);
document.addEventListener('keydown', keyPress);
navItem.addEventListener('click', toggleNavigation);

style.scss

@import url('https://fonts.googleapis.com/css?family=Barlow:400,500,700');

$white: #fff;
$black: #232323;
$gray: #8d8d8d;
$red: #e83f43;

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

body {
  font-family: 'Barlow', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: $gray;
  background: $white;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: $gray;
  text-decoration: none;
  &:hover {
    color: $black;
  }
}

nav {
  position: relative;
  z-index: 2;
  padding: 1.25rem 0 1.25rem 0;
  ul {
    line-height: 2.2;
    display: flex;
    justify-content: flex-start;
    li {
      margin: 0.325rem 0;
    }
  }
}

#logo {
  color: $black;
  font-weight: 700;
  font-size: 1.125rem;
}

#highlight {
  color: $red;
}

img {
	width: 100%;
  height: 43vh;
	object-fit: cover;
}

.vertical {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.intro {
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: fadeIn 0.8s 0.4s ease forwards;
  .title {
    display: inline-block;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: underline;
    color: $red;
    .underline {
      color: $black;
    }
  }
}

.description {
  position: relative;
  z-index: 1;
  margin: 1rem 0 1.5rem 0;
  font-size: 1rem;
  opacity: 0;
  animation: fadeIn 0.8s 0.6s ease forwards;
}

.slider-item {
  display: none;
  &.active {
    display: block;
    .hide-mobile {
      display: none;
    }
    .show-mobile {
      display: block;
      margin: 1rem 0;
    }
  }
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
  font-size: inherit;
  width: 55px;
  height: 55px;
}

.controls {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0 0.25rem 0;
  .previous {
    border: 1px solid $black;
  }
  .next {
    border-top: 1px solid $black;
    border-right: 1px solid $black;
    border-bottom: 1px solid $black;
  }
  .icon {
    position: relative;
    margin: auto;
    width: 20px;
    height: 1px;
    background-color: currentColor;
    &.arrow-left {
      &::before {
        content: '';
        position: absolute;
        left: 1px;
        top: -4px;
        width: 9px;
        height: 9px;
        border-top: solid 1px currentColor;
        border-right: solid 1px currentColor;
        transform: rotate(-135deg);
      }
    }
    &.arrow-right {
      &::before {
        content: '';
        position: absolute;
        right: 1px;
        top: -4px;
        width: 9px;
        height: 9px;
        border-top: solid 1px currentColor;
        border-right: solid 1px currentColor;
        transform: rotate(45deg);
      }
    }
  }
}

.previous, .next {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-basis: 15%;
  font-size: 2rem;
  color: $black;
  &:hover .icon {
    transform: scale(1.5);
  }
  .icon {
    transition: transform 0.1s ease;
  }
}

.active .image-holder::before {
  position: absolute;
  content: '';
  z-index: 1;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $white;
  transform-origin: 100% 50%;
  animation: revealRight 1s cubic-bezier(0.23,1,0.75,1) forwards;
}

@keyframes revealRight {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

.toggle-nav {
  display: flex;
  justify-content: flex-end;
  font-size: 1rem;
  line-height: 1.9;
  i {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0 0 0 0.5rem;
  }
}

.flex-nav ul {
  position: absolute;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  display: none;
  width: 100%;
  left: 0;
  padding: 1rem;
  background: $white;
  text-align: center;
  &.active {
    display: flex;
  }
}

@media (min-width: $md) {
  nav ul {
    justify-content: flex-end;
  }
  
  #logo {
    font-size: 1.25rem;
  }
  
  .controls {
    padding: 1.75rem 0 1.75rem 0;
  }

  .intro {
    animation: fadeInLeft 0.8s 0.4s ease forwards;
    .title {
      font-size: 4.25rem;
      padding: 2.5rem 2.5rem 3rem 2.5rem;
      background: $white;
    }
  }
  
  img {
    height: 60vh;
  }
  
  .description {
    font-size: 1.25rem;
    margin: 1rem 0 0 0;
  }
  
  .previous, .next {
    flex-basis: 8.33%;
  }
  
  .slider-item.active .hide-mobile {
    display: block;
  }
  
  .slider-item.active .show-mobile {
    display: none;
  }
  
  .toggle-nav {
    display: none;
  }
  
  .flex-nav ul {
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 0;
    justify-content: flex-end;
  }
  
  nav {
    padding: 1.75rem 0 1.75rem 0;
    ul {
      line-height: 2.2;
      display: flex;
      justify-content: flex-start;
      li {
        font-size: 1rem;
        text-transform: uppercase;
        margin: 0 2rem 0 0;
        &:nth-child(3) {
          margin: 0;
        }
      }
    }
  }
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

styles

<link href="https://codepen.io/kathykato/pen/57f0b5b76e6aa7e4917e08b81d378d7b" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

travel.markdown

Travel

Travel landing page made with Flexbox and CSS Grid.

A Pen by Katherine Kato on CodePen.

License.