-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
78 lines (70 loc) · 3.62 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
<html lang="en" data-theme="ligth">
<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">
<script src="https://kit.fontawesome.com/8c25178190.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://meilune.github.io/light-dark-modes/style.css">
<title>Light Dark Modes</title>
<link rel="icon" type="image/x-icon" href="https://meilune.github.io/light-dark-modes/uploads/light-dark.jpg"/>
</head>
<body>
<header>
<nav class="navigation">
<a href="#">Home</a>
<a href="#about">About</a>
<a href="#gallery">Gallery</a>
<a href="#contact">Contact Us</a>
</nav>
<div class="mode-changer">
<span id="sun"><i class="fa-solid fa-sun"></i></span>
<span id="moon" hidden><i class="fa-solid fa-moon"></i></span>
<div class="toggle-container">
<input type="checkbox" id="switch" name="theme" /><label for="switch">Toggle</label>
</div>
</div>
</header>
<section class="container">
<div class="hero">
<h1>WELCOME TO THE LIGHT AND DARK MODE SWITCHER</h1>
</div>
</section>
<section class="container" id="about">
<div class="about-us">
<h2>Learn about our works</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil in eligendi praesentium et pariatur ex reprehenderit, aliquam culpa sit iusto excepturi nemo repudiandae fuga ratione! Cumque animi repellat laboriosam quia? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius magnam nisi animi sapiente non voluptas sint facilis commodi illo consequuntur suscipit perspiciatis omnis ex pariatur cumque maxime, nihil quaerat delectus? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic sed dolores, ex earum error impedit numquam asperiores nemo maiores, natus nisi quis excepturi fugiat libero ipsam qui quae minus beatae.</p>
</div>
</section>
<section class="container" id="gallery">
<h2>Frienship is what makes the world go round</h2>
<div class="gallery">
<div class="card">
<img src="https://meilune.github.io/light-dark-modes/uploads/friends-1.jpg" alt="Friends having fun">
<h3>Card One</h3>
</div>
<div class="card">
<img src="https://meilune.github.io/light-dark-modes/uploads/friends-2.jpg" alt="Friends">
<h3>Card Two</h3>
</div>
<div class="card">
<img src="https://meilune.github.io/light-dark-modes/uploads/friends-3.jpg" alt="Friends together">
<h3>Card Three</h3>
</div>
</div>
</section>
<section class="container" id="contact">
<div class="contact-us">
<h2>Contact Us for more information</h2>
<div class="contact-info">
<p>Adress: 8 Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Phone: 123456789</p>
<p>Email: ghjk@ghjk.hh</p>
</div>
</div>
</section>
<footer>
<p>Get more information about my projects on <a href="https://condingginja.com">codingGinja</a></p>
</footer>
<script type="text/javascript" src="https://meilune.github.io/light-dark-modes/app.js"></script>
</body>
</html>