Upskill-Task/index.html at main · Jo-anny/Upskill-Task · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css\styles.css" />
    <link rel="shortcut icon" href="images/LOGO/logo.jpg" type="image/x-icon" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <title>Phones Hub</title>
  </head>
  <body>
    <header>
      <nav class="header-container">
        <a href="#" class="logo">PHONESHUB</a>
        <div class="menu-bar" onclick="myFunction()">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>

        <div class="nav-list-items">
          <ul>
            <a href="#home"><li class="nav-list">Home</li></a>
            <a href="#about"><li class="nav-list">About us</li></a>
            <a href="shop.html"><li class="nav-list nav-shop">
                <img src="images/Shop.png" alt="" /></li
            ></a>
            <a href="#contact"><li class="nav-list">Contact</li></a>
            <a href="#faq"><li class="nav-list">FAQ</li></a>
          </ul>
        </div>
        <div class="nav-icons">
          <img src="images/carbon_search.png" alt="" />
          <img src="images/bi_cart.png" alt="" />
          <img src="images/iconamoon_profile-circle-light.png" alt="" />
        </div>
      </nav>
    </header>
    <main>
      <section class="home" id="home">
        <div class="left">
          <h2>Unbeatable Deals for Every Budget We have Got at our Store</h2>
          <p>
            We bring you the latest smartphones from the industry's leading
            brands. We offer a wide range of options to suit every budget.
            Whether you are looking for a flagship model or a budget-friendly
            smartphone, we have the perfect device for you.
          </p>
          <h1>Unleash Your Potential with the Latest Tech at PhonesHub</h1>
          <div class="shop-btn">Shop With Us Today</div>
        </div>
        <div class="home-img-container right">
          <img
            src="images/less-than-solid.svg"
            alt=""
            class="arrow less-than"
          />
          <img src="images/PHONES-removebg-preview 1.png" alt="" />
          <img
            src="images/greater-than-solid.svg"
            alt=""
            class="arrow greater-than"
          />
        </div>
      </section>

      <section class="about" id="about">
        <h2 class="reasons_title">Why You Should Choose PhonesHub</h2>
        <div class="labels">
            <div>
              <img src="images/premium_quality_label.png" alt="Premium Quality Label">
              <h3 class="labels_title">Quality products that beats your imagination</h3>
              <p class="label_text">Get top-notch phones and phone accessories from us with a 1 year warranty</p>
            </div>
            <div>
              <img src="images/phone1.png" alt="">
              <h3 class="labels_title">Latest Models of Phones and Accessories</h3>
              <p class="label_text">With our regular store stocking,you can be sure to get the latest products of you choice</p>
            </div>
            <div>
              <img src="images/black_friday_sales.png" alt="Black Friday's Label">
              <h3 class="labels_title">Awoof Sales During Black Fridays</h3>
              <p class="label_text">Don’t miss our discount sales during black fridays. Get products without breaking a bank</p>
            </div>
        </div>
      </section>

      <section id="shop">
        <h2>Collections</h2>
        <div class="shop-items-container shop">
          <div class="shop-items item-1">
            <div class="shop-img-container">
              <img src="images/iphone_14_pro_max.png" alt="" />
            </div>
            <h3>Apple iphone 14 Pro Max</h3>
            <h3 class="price">(#920,000)</h3>
            <span class="shop-items-spec">4323mAh battery</span>
            <span class="shop-items-spec">128GB/256GB/512GB/1TB</span>
            <span class="shop-items-spec">12 months warranty</span>
          </div>
          <div class="shop-items item-2">
            <div class="shop-img-container">
              <img src="images/poco_m4_pro_5g.png" alt="" />
            </div>
            <h3>Xiaomi Poco M4 Pro 5G</h3>
            <h3 class="price">(#118,000)</h3>
            <span class="shop-items-spec">5000mAh battery</span>
            <span class="shop-items-spec">128GB/64GB</span>
            <span class="shop-items-spec">12 months warranty</span>
          </div>
          <div class="shop-items item-3">
            <div class="shop-img-container">
              <img src="images/realme-gt-neo5.png" alt="" />
            </div>
            <h3>Realme GT Neo 6</h3>
            <h3 class="price">(#154,800)</h3>
            <span class="shop-items-spec">5000 Li-Po battery</span>
            <span class="shop-items-spec">128GB/256GB</span>
            <span class="shop-items-spec">12 months warranty</span>
          </div>
          <div class="shop-items item-4">
            <div class="shop-img-container">
              <img src="images/samsung_galaxy_a53.png" alt="" />
            </div>
            <h3>Samsung Galaxy A53 5G</h3>
            <h3 class="price">(#183,000)</h3>
            <span class="shop-items-spec">5000 Li-Po battery</span>
            <span class="shop-items-spec">128GB/256GB</span>
            <span class="shop-items-spec">12 months warranty</span>
          </div>
          <div class="shop-items item-5">
            <div class="shop-img-container">
              <img src="images/redminote11stwilightblue2.png" alt="" />
            </div>
            <h3>Redmi Note 11S</h3>
            <h3 class="price">(#175,000)</h3>
            <span class="shop-items-spec">5000 mAh battery</span>
            <span class="shop-items-spec">128GB/256GB</span>
            <span class="shop-items-spec">12 months warranty</span>
          </div>
        </div>
      </section>
      <section class="review" id="review">
        <h2>CUSTOMER'S REVIEWS</h2>
        <div class="customers-review-container">
          <div class="customer-review">
            <div>
              <img src="images/customer-1.png" alt="" />
            </div>
            <div>
              <h3>DANNY ALBERT</h3>
              <p>
                I've been using phoneshub for quite some time now and their
                service is wonderful
              </p>
            </div>
          </div>
          <div class="customer-review">
            <img src="images/customer-2.png" alt="" />
            <div>
              <h3>MORENIKE ADEGBITE</h3>
              <p>
                Got a phone for my mum a few years ago and their customer
                service can't be found anywhere else.
              </p>
            </div>
          </div>
          <div class="customer-review">
            <img src="images/customer-3.png" alt="" />
            <div>
              <h3>ELIJAH ETIM</h3>
              <p>
                The quality of products they sell and the service they deliver
                make me love and recommend them.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section class="faq" id="faq">
        <div class="faq-container">
          <h2>FREQUENTLY ASKED QUESTIONS ABOUT US</h2>
          <div>
            <span class="what">What is PhonesHub?</span>
            <select name="what" id="one"></select>
          </div>
          <hr />
          <div>
            <span class="what"
              >Are the products sold in PhonesHub under warranty?</span
            >
            <select name="what" id="two"></select>
          </div>
          <hr />
          <div>
            <span class="what">How many years warranty do products have?</span>
            <select name="what" id="three"></select>
          </div>
          <hr />
          <div>
            <span class="what">How do i place an order?</span>
            <select name="what" id="four"></select>
          </div>
          <hr />
        </div>
      </section>
    </main>
    <footer id="contact">
      <div class="footer-container">
        <div class="upper-container">
          <div class="subscribe">
            <h3>Subscribe to Our Newsletter:</h3>
            <span
              >Be the first to know about our latest product and updates
              concerning the phone world.
            </span>
          </div>

          <div class="input-field">
            <i class="fa fa-envelope-o" aria-hidden="true"> </i>
            <input type="email" name="" id="email" placeholder= "Email..." >
            <input type="submit" value="Subscribe" id="submit">
          </div>
        </div>

        <div class="lower-container">
          <div class="contact">
            <h3>Contact Information:</h3>
            <div class="phone-no">
              <i class="fa fa-phone" aria-hidden="true"></i>
              <span> +2348000800000</span>
            </div>
            <div class="email-address">
              <i class="fa fa-envelope-o" aria-hidden="true"></i>
              <span class="email">info.phoneshub@gmail.com</span>
            </div>
            <div class="address">
              <i class="fa fa-map-marker" aria-hidden="true"></i>
              <span>6,Oba Crescent, Ikotun.</span>
            </div>
          </div>
          <div class="policy">
            <h3>Policies:</h3>
            <p><a href="#">Privacy Policy</a></p>
		        <p><a href="#">Terms of Service</a></p>
          </div>
          <div class="social-media contact">
            <h3>Follow us on:</h3>
            <div class="twitter">
              <a href="#">
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <span>phoneshub@twitter.com</span>
              </a>
            </div>
            <div class="instagram">
              <a href="#">
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <span>phoneshub@instagram.com</span>
              </a>
            </div>
            <div class="facebook">
              <a href="#">
                <i class="fa fa-facebook-official" aria-hidden="true"></i>
                <span>phoneshub@facebook.com</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>