Skip to content

Commit 6e4638d

Browse files
elemarmarelemarmar
committed
Add Theme Switcher
1 parent ba640ad commit 6e4638d

File tree

1 file changed

+104
-11
lines changed

1 file changed

+104
-11
lines changed

‎index.html

+104-11
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,108 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Template</title>
7-
<link rel="icon" type="image/png" href="favicon.png">
8-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
9-
<link rel="stylesheet" href="style.css">
10-
</head>
11-
<body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Light & Dark Mode</title>
7+
<link rel="icon" type="image/png" href="favicon.png" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
11+
/>
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Comfortaa&family=Kaushan+Script&family=Oswald&display=swap"
14+
rel="stylesheet"
15+
/>
16+
<link rel="stylesheet" href="style.css" />
17+
</head>
18+
<body>
19+
<!-- Dark Mode Switcher -->
20+
<div class="theme-switch-wrapper">
21+
<!-- Text and icon -->
22+
<span id="toggle-icon">
23+
<span class="toggle-text">Light Mode</span>
24+
<i class="fas fa-sun"></i>
25+
</span>
26+
<!-- Switcher -->
27+
<label class="theme-switch">
28+
<input type="checkbox" />
29+
<div class="slider round"></div>
30+
</label>
31+
</div>
32+
<!-- Navigation -->
33+
<nav id="nav">
34+
<a href="#home">HOME</a>
35+
<a href="#about">ABOUT</a>
36+
<a href="#projects">PROJECTS</a>
37+
<a href="#contact">CONTACT</a>
38+
</nav>
39+
<!-- Home Section -->
40+
<section id="home">
41+
<div class="title-group">
42+
<h1>Custom Title Here</h1>
43+
<h2>Welcome to the Website!</h2>
44+
</div>
45+
</section>
46+
<!-- About Section -->
47+
<section id="about">
48+
<h1>Undraw Illustrations</h1>
49+
<div class="about-container">
50+
<div class="image-container">
51+
<h2>Web Innovation</h2>
52+
<img
53+
src="img/undraw_proud_coder_light.svg"
54+
alt="Proud Coder"
55+
id="image1"
56+
/>
57+
</div>
58+
<div class="image-container">
59+
<h2>Web Innovation</h2>
60+
<img
61+
src="img/undraw_feeling_proud_light.svg"
62+
alt="Feeling Proud"
63+
id="image2"
64+
/>
65+
</div>
66+
<div class="image-container">
67+
<h2>Web Innovation</h2>
68+
<img
69+
src="img/undraw_conceptual_idea_light.svg"
70+
alt="Conceptual idea"
71+
id="image3"
72+
/>
73+
</div>
74+
</div>
75+
</section>
76+
<!-- Projects Section -->
77+
<section id="projects">
78+
<h1>Buttons</h1>
79+
<div class="buttons">
80+
<button class="primary">Primary</button>
81+
<button class="secondary">Secondary</button>
82+
<button class="primary" disabled>Disabled</button>
83+
<button class="secondary outline">Alt Outline</button>
84+
<button class="outline" disabled>Disabled</button>
85+
</div>
86+
<div class="text-box" id="text-box">
87+
<p>
88+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ipsam
89+
praesentium vero corrupti deleniti ab minus ut quidem cum commodi?
90+
Animi harum excepturi, illum aperiam cum reiciendis sed maiores magni!
91+
</p>
92+
</div>
93+
</section>
94+
<!-- Contact Section -->
95+
<section id="contact">
96+
<div class="social-icons">
97+
<i class="fab fa-github"></i>
98+
<i class="fab fa-codepen"></i>
99+
<i class="fab fa-linkedin-in"></i>
100+
<i class="fab fa-medium"></i>
101+
<i class="fab fa-instagram"></i>
102+
<i class="fab fa-youtube"></i>
103+
</div>
104+
</section>
12105
<!-- Script -->
13106
<script src="script.js"></script>
14-
</body>
15-
</html>
107+
</body>
108+
</html>

0 commit comments

Comments
 (0)