consumer-theme-example-site/skills.html at main · seth808rose/consumer-theme-example-site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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" />
    <title>Tea Station || Skills</title>
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="./fontawesome-free-5.12.1-web/css/all.min.css"
    />
    <!-- custom css -->
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
    <!-- navbar -->
    <!-- nav button -->
    <span class="nav-btn" id="nav-btn">
      <i class="fas fa-bars"></i>
    </span>
    <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>
    <!-- header -->
    <header class="header">
      <div class="banner">
        <h2>Over one hundred flavors of</h2>
        <h1>
          specially <br />
          crafted tea
        </h1>
        <a href="skills.html" class="btn banner-btn">explore</a>
      </div>
    </header>
    <div class="content-divider"></div>
    <!-- end of header -->
     <!-- skills section -->
    <section class="skills clearfix">
      <!-- single skill 1-->
      <article class="skill">
        <span class="skill-icon">
          <i class="fas fa-mug-hot"></i>
        </span>
        <h4 class="skill-title">made in US</h4>
        <p class="skill-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, aperiam.
        </p>
      </article>
      <!-- end of single skill 1 -->
      <!-- single skill 2 -->
      <article class="skill">
        <span class="skill-icon">
          <i class="fas fa-glass-cheers"></i>
        </span>
        <h4 class="skill-title">relaxation</h4>
        <p class="skill-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, aperiam.
        </p>
      </article>
      <!-- end of single skill 2-->
      <!-- single skill 3-->
      <article class="skill">
        <span class="skill-icon">
          <i class="fas fa-bomb"></i>
        </span>
        <h4 class="skill-title">energy</h4>
        <p class="skill-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, aperiam.
        </p>
      </article>
      <!-- end of single skill 3 -->
      <!-- single skill 4-->
      <article class="skill">
        <span class="skill-icon">
          <i class="fas fa-mortar-pestle"></i>
        </span>
        <h4 class="skill-title">Family Recepi</h4>
        <p class="skill-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, aperiam.
        </p>
      </article>
      <!-- end of single skill 4-->
    </section>
    <!-- end of skills section -->
        <!-- footer -->
    <footer class="footer">
      <div class="section-center">
        <div class="social-icons">
          <!-- social icons -->
          <a href="#" class="social-icon">
            <i class="fab fa-facebook"></i>
          </a>
          <!-- end of social icons -->
          <!-- social icons -->
          <a href="#" class="social-icon">
            <i class="fab fa-twitter"></i>
          </a>
          <!-- end of social icons -->
          <!-- social icons -->
          <a href="#" class="social-icon">
            <i class="fab fa-instagram"></i>
          </a>
          <!-- end of social icons -->
        </div>
        <h4 class="footer-text">
          &copy;
          <span>2021</span>
          <span class="company">tea station</span>
          all right reserved
        </h4>
      </div>
    </footer>
    <script src="app.js"></script>
  </body>
</html>