The steps of life

Lorem ipsum dolor sit amet, consectetur adipisicing elit, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


<main class="e-face e-md-screen bg-d">
  <nav class="e-nav no-bg">
    <img src="https://bit.ly/2D7yayE" style="width:90px;height:auto;">
    <a class="e-btn anime small purple no-mobile"><i class="fab fa-facebook-f"></i></a>
    <a class="e-btn anime small sky no-mobile"><i class="fab fa-twitter"></i></a>
    <a class="e-btn anime small primary no-mobile"><i class="fab fa-linkedin-in"></i></a>
    <i class="e-distribution"></i>
    <a class="e-btn outlined transparent">Portfolio</a>

  </nav>
  <!-- Body -->
  <section class="face-body centered eFade">
    <div class="e-container">
      <h1 class="size-plus">The steps of life </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, quis nostrud pariatur.</p>
    </div>
  </section>
  <nav class="e-nav transparent">
    <label for="e-menu" class="e-btn plane fullwidth purple no-desktop">
      More <i class="far fa-caret-square-down"></i>
    </label>
    <input type="checkbox" id="e-menu">
    <div class="e-menu narrow">
      <a class="e-menu-item"><i class="fas fa-home text-danger"></i> Home</a>
      <a class="e-menu-item"><i class="far fa-address-card text-sky"></i> About</a>
      <a class="e-menu-item"><i class="fas fa-boxes text-primary"></i> Services</a>
      <a class="e-menu-item"><i class="fas fa-tablet-alt text-purple"></i> Contacts</a>
      <a class="e-menu-item"><i class="fas fa-briefcase text-success"></i> Portfolio</a>
      <a class="e-menu-item"><i class="fas fa-camera-retro text-warning"></i> Gallery</a>
    </div>
  </nav>
</main>