skills.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tea Station Project</title>
    <!-- font awesome -->
    <link rel="stylesheet" href="./fontawesome-free-6.3.0-web/css/all.css" />
    <!-- main Style -->
    <link rel="stylesheet" href="./css/index.css" />
    <!--main javascript-->
    <script src="./js/main.js" defer></script>
  </head>
  <body>
    <!--nav button-->
    <span class="nav-btn" id="nav-btn">
      <i class="fa fa-bars"></i>
    </span>
    <!--End of nav button-->
    <!--navbar-->
    <nav class="navbar" id="navbar">
      <div class="navbar-header">
        <span class="nav-close" id="nav-close">
          <i class="fas fa-times"></i>
        </span>
      </div>
      <ul class="nav-items">
        <li><a href="index.html" class="nav-link">home</a></li>
        <li><a href="skills.html" class="nav-link">skills</a></li>
        <li><a href="about.html" class="nav-link">about</a></li>
        <li><a href="products.html" class="nav-link">products</a></li>
      </ul>
    </nav>
    <!--End of navbar-->
    <!--Header-->
    <header class="header">
      <div class="banner">
        <h3 class="banner-subtitle">over one hundred flavors of tea</h3>
        <h1 class="banner-title">specially crafted tea</h1>
        <a class="banner-btn" href="skills.html">explore</a>
      </div>
    </header>
    <!-- end of Header-->
    <!-- Content divider -->
    <div class="content-divider"></div>
    <!-- End of Content divider -->
    <!-- Skills section -->
    <section class="skills clearfix">
      <!-- Single skill -->
      <article class="skill">
        <span class="skill-icon"><i class="fas fa-mug-hot"></i></span>
        <h3 class="skill-title">made in us</h3>
        <p class="skill-text">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro,
          corrupti!
        </p>
      </article>
      <!-- End of Single skill -->
      <!-- Single skill -->
      <article class="skill">
        <span class="skill-icon"><i class="fas fa-glass-cheers"></i></span>
        <h3 class="skill-title">relaxation</h3>
        <p class="skill-text">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro,
          corrupti!
        </p>
      </article>
      <!-- End of Single skill -->
      <!-- Single skill -->
      <article class="skill">
        <span class="skill-icon"><i class="fas fa-bomb"></i></span>
        <h3 class="skill-title">energy</h3>
        <p class="skill-text">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro,
          corrupti!
        </p>
      </article>
      <!-- End of Single skill -->
      <!-- Single skill -->
      <article class="skill">
        <span class="skill-icon"><i class="fas fa-mortar-pestle"></i></span>
        <h3 class="skill-title">family recipe</h3>
        <p class="skill-text">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro,
          corrupti!
        </p>
      </article>
      <!-- End of Single skill -->
    </section>
    <!-- End of Skills section -->
  </body>
</html>