index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
      crossorigin="anonymous"
    />
    <title>Landing with blur Effect | MIXblack</title>
  </head>
  <body>
    <header class="showcase">
      <div class="content">
        <img class="logo" src="img/logo.png" alt="MIXblack" />
        <div class="title">
          Welcome To MIXblack
        </div>
        <div class="text">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel, in?
        </div>
      </div>
    </header>

    <!-- Services -->
    <section class="services">
      <div class="container grid-3 center">
        <div>
          <i class="fab fa-youtube fa-3x"></i>
          <h3>YouTube</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi,
            dolor!
          </p>
        </div>
        <div>
          <i class="fas fa-chalkboard-teacher fa-3x"></i>
          <h3>Courses</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi,
            dolor!
          </p>
        </div>
        <div>
          <i class="fas fa-briefcase fa-3x"></i>
          <h3>Freelancing Projects</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi,
            dolor!
          </p>
        </div>
      </div>
    </section>

    <!-- About -->
    <section class="about bg-light">
      <div class="container">
        <div class="grid-2">
          <div class="center">
            <i class="fas fa-laptop-code fa-10x"></i>
          </div>
          <div>
            <h3>About Us</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis
              ipsum atque perferendis distinctio, a qui debitis alias magni
              corrupti, natus, doloribus aspernatur. Magnam consequuntur ex ab
              necessitatibus voluptate quasi facere vero iusto aperiam ipsa
              laborum debitis dolor autem, unde dolores.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="center bg-dark">
      <p>MIXblack &copy; 2019</p>
    </footer>
  </body>
</html>