forked from N-Shar-ma/FOSS-Weekend-Klox-Website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (90 loc) · 4.03 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Klox</title>
<link rel="icon" type="image/svg" href="SVG/logoK.svg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="styles.css">
<script src="js.js" defer></script>
</head>
<body>
<header>
<h1><a href="#home" class="header-logo-container"><img class="header-logo" src="SVG/logoType.svg" alt="Klox K Logo"></a></h1>
<button class="dark-mode-toggle" aria-label="dark mode toggle button"></button>
<button class="hamburger-icon" data-menu-toggle aria-label="menu toggle button">
<span class="hamburger-line hamburger-top"></span>
<span class="hamburger-line hamburger-middle"></span>
<span class="hamburger-line hamburger-bottom"></span>
</button>
<nav>
<ul class="nav-links">
<li class="nav-link"><a href="#home">Home</a></li>
<li class="nav-link"><a href="#products">Products</a></li>
<li class="nav-link"><a href="#history">History</a></li>
</ul>
</nav>
</header>
<main>
<article id="home">
<section>
<section class="hero">
<img class="hero-logo" src="SVG/logoFull.svg" alt="Klox Full Logo">
<h2 class="tagline">Energy Efficient <br> Smart Clocks</h2>
</section>
<section class="about">
<p>
Tired of replacing clock batteries over and over again?
</p>
<p>
Sick of having to keep record of how slow or fast every clock in the house is running?
<p>
Presenting Klox™, the ecofriendly solution to all your problems!
</p>
<p>
These smart clocks only tick when someone is present in the room, hence conserving precious energy. Through a user friendly app, all Klox™ in the house stay connected and synchronized to always show the correct time.
</p>
<p>
Install Klox™ in your home, and begin a hassle free life today!
</p>
<button class="buy-now-btn cta-btn">Buy Now!</button>
</section>
</section>
</article>
<article id="products">
<h2>Products</h2>
<section>
<section class="product clocks">
<h3>Clocks</h3>
<img class="product-image" src="images/clocks.png" alt="Klox clocks">
<button class="cta-btn product-btn" >Buy Now</button>
</section>
<section class="product app">
<h3>App</h3>
<img class="product-image" src="images/app.png" alt="Klox app">
<button class="cta-btn product-btn" >Go to App Store</button>
</section>
</section>
</article>
<article id="history">
<h2>History</h2>
<section class="history-section">
<section class="history-image">
<img src="images/historyImg.jpg" alt="old watchmaker repairing a watch">
</section>
<section class="history-text">
<p>
On a bitterly cold January night of 2020, the old and bent watchmaker, Mr. Tock, tried his best to fix the bedroom wall clock with his numb fingers. As he shivered and grumbled about it being the 10th time the clock had stopped in a year, his daughter, Tick came in with the dining room clock in her hands, also waiting for repair. Mr. Tock lamented having to fix clocks which one hardly looked at, while they worked. “What a waste of energy!” sighed Tick, thinking of all the clocks that kept ticking away merrily while no one saw them. “Anyway, how was your class on Internet of Things (IoT), Tick?” Mr. Tock asked. A brilliant idea struck Tick, and after sharing it with Mr. Tock, the father daughter duo worked through the night, combining their skills to invent a set of smart clocks, one for each room, that ticked only when someone was present in the room, and used IoT technology to always stay connected to a smart phone through an app, from where they sourced the real time! Thus, Klox was born.
</p>
</section>
</section>
</article>
</main>
<footer>
<span class="footer-brand-name">Klox™</span>
<a href="#home" class="back-to-top">Back to Top</a>
<span>© Nehal Sharma</span>
</footer>
</body>
</html>