Project X - Home Page

index.html

<div id="app" v-if="devMode">
  <header>
    <nav>
      <div class="container">
        <ul class="menu">
          <li>
            <a href-="">Backstory</a>
          </li>
        </ul>
        <a href="#" class="menu-btn" @click.prevent="toggleMobileMenu()">
          <img src="https://res.cloudinary.com/code-moran-cl-ltd/image/upload/v1599554354/Unseen%20Empire/harmburger-icon.svg" />
        </a>
      </div>
    </nav>

    <div class="intro-container">
      <div class="webg-container"></div>
      <div class="intro-container-bg"></div>

      <div class="container">

        <div class="content">
          <h1 class="intro-title">UNSEEN EMPIRE</h1>
          <h4 class="intro-text">Play the story of the largest camera trap study in history</h4>

          <a href="#" class="intro-btn">
            <span>Play Now</span>
            <img src="https://res.cloudinary.com/code-moran-cl-ltd/image/upload/v1599554354/Unseen%20Empire/angle-right.svg" />
          </a>
        </div>

      </div>


    </div>

    <div class="footer-section">
      <div class="container">
        <h4>For the best experience, get the free mobile app</h4>
        <div class="btn-container">
          <a href="#">
            <img src="https://res.cloudinary.com/code-moran-cl-ltd/image/upload/v1599554354/Unseen%20Empire/app-store-icon.png" />
          </a>
          <a href="#">
            <img src="https://res.cloudinary.com/code-moran-cl-ltd/image/upload/v1599554353/Unseen%20Empire/google-play-icon.png" />
          </a>
        </div>
      </div>
    </div>

  </header>

  <div :class="{'menu-container':true, 'opened':openMobileMenu}">
    <div class="container">
      <div class="close-menu-btn-wrapper">
        <a href="#" @click.prevent="toggleMobileMenu()">
          <img src="https://res.cloudinary.com/code-moran-cl-ltd/image/upload/v1599725912/Unseen%20Empire/close.png" alt="" />
        </a>
      </div>
      <div class="logo-wrapper">
        <img src="https://res.cloudinary.com/code-moran-cl-ltd/image/upload/v1599725903/Unseen%20Empire/logo.png" alt="" />
      </div>
      <ul class="menu-wrapper">
        <li>
          <a href="#">
            <span>Backstory</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Credits</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Press</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Contact</span>
          </a>
        </li>
      </ul>
      <div class="app-links-wrapper">
        <a href="#">
          <img src="https://res.cloudinary.com/code-moran-cl-ltd/image/upload/v1599554354/Unseen%20Empire/app-store-icon.png" />
        </a>
        <a href="#">
          <img src="https://res.cloudinary.com/code-moran-cl-ltd/image/upload/v1599554353/Unseen%20Empire/google-play-icon.png" />
        </a>
      </div>
    </div>
  </div>

</div>

project-x-home-page.markdown

Project X - Home Page

A Pen by Chris Muiruri N. on CodePen.

License.

script.js

let config = {
  el: "#app",
  data() {
    return {
      devMode: false,
      openMobileMenu: false,
    }
  },
  methods: {
    toggleMobileMenu() {
      this.openMobileMenu = !this.openMobileMenu;
    }
  }
}

let app = new Vue(config);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');

@font-face {
  font-family: 'Belwe TL Bold';
  src: url('https://res.cloudinary.com/code-moran-cl-ltd/raw/upload/v1599553236/Unseen%20Empire/Tilde-Belwe-TL-Bold.ttf') format('ttf');
}

body {
  font-family: 'Source Code Pro', monospace;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

.container {
  margin: 0 auto;
  width: 90%;
  max-width: 1360px;
}

header {
  nav {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    .container {
      display: flex;
      justify-content: flex-end;
      padding: 1.5rem 0;
    }
  }
}

.menu {
  display: none;
}

.menu-btn {
  img {
    width: 35px;
  }
}

.intro-container {
  position: relative;
  min-height: 100vh;
  .intro-container-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00ff00;
    background-image: url('https://res.cloudinary.com/code-moran-cl-ltd/image/upload/v1599561477/Unseen%20Empire/webgle-placeholder-hd.jpg');
    background-size: cover;
    background-position: center;
  }
  display: flex;
  align-items: center;
  .content {
    position: relative;
    .intro-title {
      color: #fff;
      font-weight: bold;
      font-size: 1.05rem;
      font-family: 'Belwe TL Bold';
      margin-bottom: 1rem;
    }
    .intro-text {
      color: #fff;
      font-size: 1.7rem;
      line-height: 1.6;
      max-width: 400px;
      margin-bottom: 1.5rem;
    }
    .intro-btn {
      display: inline-flex;
      align-items: center;
      background-color: #FF761B;
      padding: 0.5rem 1rem;
      min-height: 50px;
      border-radius: 8px;
      box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
      span {
        display: inline-block;
        margin-right: 1rem;
        color: #ffffff;
        font-size: 0.985rem;
        font-family: 'Belwe TL Bold';
      }
      img {
        width: 20px;
      }
    }
  }
}

.footer-section {
  background: #000;
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  padding: 1.5rem 0;
  .container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  h4 {
    color: #FF761B;
    font-family: 'Belwe TL Bold';
    margin-right: 2rem;
    font-weight: 600;
    font-size: 1.1rem;
  }
  .btn-container {
    display: flex;
    a {
      img {
        height: 50px;
      }
      ~ a {
        margin-left: 1rem;
      }
    }
  }
}

.webg-container {
  display: none;
}

.menu-container {
  position: fixed;
  min-height: 100vh;
  background: #04070E;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  &.opened {
    opacity: 1;
    z-index: 9999;
    pointer-events: all;
  }
  .container {
    .close-menu-btn-wrapper {
      display: flex;
      justify-content: flex-end;
      padding: 1.5rem 0;
      a {
        img {
          width: 25px;
        }
      }
    }
    .logo-wrapper {
      text-align: center;
      padding: 1.5rem 0;
      img {        
        width: 90px;
        margin: 0 auto;
      }
    }
    .menu-wrapper {
      width: 100%;
      padding: 1.5rem 0;
      li {
        text-align: center;
        padding-bottom: 1rem;
        a {
          span {
            color: #ffffff;
            font-size: 2rem;
            font-weight: 600;
            font-family: 'Belwe TL Bold';
          }
        }
        &:last-child {
          padding-bottom: 1.5rem;
        }
      }
    }
    .app-links-wrapper {
      display: flex;
      justify-content: center;
      a {
        img {
          height: 45px;
        }
        ~ a {
          margin-left: 1rem;
        }
      }
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.5/tailwind.min.css" rel="stylesheet" />