tea-station/skills.html at master · pvyas033/tea-station · 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>Chai</title>
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="./fontawesome-free-5.15.3-web/css/all.min.css"
    />
    <!-- custom css -->
    <link rel="stylesheet" href="./css/styles.css" />
    <link rel="icon" href="./images/cha_icon.PNG" />
  </head>
  <body>
    <!-- navbar begin -->
    <!--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-times">
        <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>
    <!-- navbar end -->
    <!-- header begin -->
    <header class="header" id="header">
      <div class="banner">
        <h2>Over one hundred flavors of</h2>
        <h1>
          specially <br />
          crafted tea
        </h1>
        <a href="#skills" class="btn banner-btn">explore</a>
      </div>
    </header>
    <!-- header end -->
    <!-- skills section begin-->
    <section class="skills clearfix" id="skills">
      <!-- single skill begin-->
      <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. Quasi,
          adipisci?
        </p>
      </article>
      <!-- single skill end-->
      <!-- single skill begin-->
      <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. Quasi,
          adipisci?
        </p>
      </article>
      <!-- single skill end-->
      <!-- single skill begin-->
      <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. Quasi,
          adipisci?
        </p>
      </article>
      <!-- single skill end-->
      <!-- single skill begin-->
      <article class="skill">
        <span class="skill-icon"> <i class="fas fa-mortar-pestle"></i></span>
        <h4 class="skill-title">family recipe</h4>
        <p class="skill-text">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi,
          adipisci?
        </p>
      </article>
      <!-- single skill end-->
    </section>
    <!-- skills section end-->
    <!-- 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>
          <a href="#" class="social-icon">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="fab fa-linkedin"></i>
          </a>
          <a href="#" class="social-icon"> <i class="fab fa-instagram"></i> </a>
          <!-- social icons -->
        </div>
        <h4 class="footer-text">
          &copy; <span id="date"></span>
          <span class="company">tea station</span>
          all rights reserved
        </h4>
        <span class="footer-text">designed by </span>
        <a href="https://www.linkedin.com/in/pankaj033/" class="company"
          >pankajVyas</a
        >
      </div>
      <div>
        <a class="btn submit-btn" href="#header">Back to top</a>
      </div>
    </footer>
    <script src="app.js"></script>
  </body>
</html>