-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
62 lines (56 loc) · 13 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
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Dark Mode Toggle</title>
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="img/favicon/site.webmanifest">
</head>
<body>
<!-- Checkbox Toggle -->
<input type="checkbox" id="toggle">
<!-- Container -->
<div class="container">
<!-- Header -->
<header>
<img src="img/avatar.png" id="avatar" alt="avatar">
<h1>Dark Mode Toggle</h1>
</header>
<!-- Main Content -->
<main>
<h2>Main Content</h2>
<img src="img/img-main.jpg" alt="image-main" class="sample-img">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta explicabo iure a, magnam odit veritatis et voluptas repudiandae doloribus voluptatibus ab ad molestias placeat itaque accusamus, ullam veniam corporis sed blanditiis quos ratione error! Id optio illum, doloribus quaerat nemo earum, delectus, fugiat architecto aspernatur minima totam sit necessitatibus facilis nobis in repellat cupiditate amet illo! Nam similique tempore voluptatibus aliquam, debitis accusamus sunt voluptatem reiciendis vitae laborum? Ducimus sunt odio harum neque, corporis doloribus cumque temporibus maxime, excepturi quaerat laboriosam? Explicabo quaerat nemo perferendis beatae dolorem suscipit magni dolor hic consequatur, aut et illo corporis vitae non, porro velit nobis aliquid enim obcaecati? In eveniet nobis eius temporibus provident porro commodi repudiandae quidem, iusto ipsa voluptates odit hic similique repellat illum magnam incidunt possimus dolore repellendus doloribus. Officiis mollitia aperiam eligendi similique dolore eius corporis, velit dolorem nostrum id asperiores, placeat accusantium suscipit cum quibusdam perspiciatis atque? Nostrum repudiandae alias suscipit, repellat sit, nam non odio fuga libero nemo doloribus ducimus dolorum beatae quod nisi sunt ipsa et ipsam! Voluptatibus quae, quam dicta atque repellendus velit maxime veritatis inventore sit ipsa odit veniam voluptatem non tempora. Illo est esse, autem numquam perspiciatis, suscipit accusamus laboriosam dicta nisi iure culpa nam. Velit sed, dolorum id nesciunt itaque omnis culpa ab molestiae odio quisquam voluptates fugit voluptatum vel nemo doloremque impedit voluptate numquam pariatur harum reiciendis veritatis tenetur repellendus? Laboriosam quaerat, voluptates officiis tenetur sapiente praesentium quod consequatur possimus incidunt eligendi unde sequi omnis quasi, porro libero laborum? Modi sequi quasi cumque autem beatae delectus vel totam sint ex consequuntur eius rerum ad eveniet nulla, doloremque nostrum reiciendis optio porro magnam a iure tempore! Magnam et pariatur cupiditate nisi earum officiis reiciendis, est facilis rerum eaque odio dolor hic dicta fugiat reprehenderit saepe asperiores deleniti quam necessitatibus numquam commodi officia. Amet, neque corporis. Illum, expedita. Consequuntur expedita temporibus minima nobis earum enim, voluptate explicabo modi deserunt dolor quas at beatae facilis inventore ipsa. Dolore consequatur adipisci voluptate excepturi, tempora molestiae aspernatur distinctio, itaque id aut ut assumenda a voluptatem officia sapiente quisquam quo inventore asperiores quas quasi quia? Aliquam, officiis? Minus fuga sed harum blanditiis ipsum reprehenderit numquam officiis, mollitia inventore minima nemo quod. Odit alias laudantium accusantium commodi, consequuntur atque praesentium modi consequatur eum aliquam aspernatur doloribus nemo voluptas vero corrupti qui asperiores tempore cumque repellat dolor, eligendi earum, porro dolorem deleniti. Eveniet rerum saepe a nostrum distinctio atque hic repellat numquam quasi officia inventore quaerat at aliquid, error minima similique, odit eaque! Sit id voluptate laboriosam distinctio culpa praesentium, dicta explicabo eveniet quam voluptatem, ratione aliquam repudiandae, beatae fugiat. Maxime, officia, enim corrupti in eveniet aperiam unde sit inventore quidem voluptatibus nobis soluta est. Tempora, incidunt recusandae iure fugit possimus officia veritatis, quis porro omnis, vero officiis harum iusto in! Nihil dignissimos nemo, ipsum at sint tempora ea earum veniam commodi porro facere dolor incidunt dolores maxime aspernatur alias, aliquid, consectetur non voluptatum sequi exercitationem iste et. Nulla tenetur quis ut, beatae nihil velit impedit temporibus totam aliquam voluptatem.
<br><br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta explicabo iure a, magnam odit veritatis et voluptas repudiandae doloribus voluptatibus ab ad molestias placeat itaque accusamus, ullam veniam corporis sed blanditiis quos ratione error! Id optio illum, doloribus quaerat nemo earum, delectus, fugiat architecto aspernatur minima totam sit necessitatibus facilis nobis in repellat cupiditate amet illo! Nam similique tempore voluptatibus aliquam, debitis accusamus sunt voluptatem reiciendis vitae laborum? Ducimus sunt odio harum neque, corporis doloribus cumque temporibus maxime, excepturi quaerat laboriosam? Explicabo quaerat nemo perferendis beatae dolorem suscipit magni dolor hic consequatur, aut et illo corporis vitae non, porro velit nobis aliquid enim obcaecati? In eveniet nobis eius temporibus provident porro commodi repudiandae quidem, iusto ipsa voluptates odit hic similique repellat illum magnam incidunt possimus dolore repellendus doloribus. Officiis mollitia aperiam eligendi similique dolore eius corporis, velit dolorem nostrum id asperiores, placeat accusantium suscipit cum quibusdam perspiciatis atque? Nostrum repudiandae alias suscipit, repellat sit, nam non odio fuga libero nemo doloribus ducimus dolorum beatae quod nisi sunt ipsa et ipsam! Voluptatibus quae, quam dicta atque repellendus velit maxime veritatis inventore sit ipsa odit veniam voluptatem non tempora. Illo est esse, autem numquam perspiciatis, suscipit accusamus laboriosam dicta nisi iure culpa nam. Velit sed, dolorum id nesciunt itaque omnis culpa ab molestiae odio quisquam voluptates fugit voluptatum vel nemo doloremque impedit voluptate numquam pariatur harum reiciendis veritatis tenetur repellendus? Laboriosam quaerat, voluptates officiis tenetur sapiente praesentium quod consequatur possimus incidunt eligendi unde sequi omnis quasi, porro libero laborum? Modi sequi quasi cumque autem beatae delectus vel totam sint ex consequuntur eius rerum ad eveniet nulla, doloremque nostrum reiciendis optio porro magnam a iure tempore! Magnam et pariatur cupiditate nisi earum officiis reiciendis, est facilis rerum eaque odio dolor hic dicta fugiat reprehenderit saepe asperiores deleniti quam necessitatibus numquam commodi officia. Amet, neque corporis. Illum, expedita. Consequuntur expedita temporibus minima nobis earum enim, voluptate explicabo modi deserunt dolor quas at beatae facilis inventore ipsa. Dolore consequatur adipisci voluptate excepturi, tempora molestiae aspernatur distinctio, itaque id aut ut assumenda a voluptatem officia sapiente quisquam quo inventore asperiores quas quasi quia? Aliquam, officiis? Minus fuga sed harum blanditiis ipsum reprehenderit numquam officiis, mollitia inventore minima nemo quod. Odit alias laudantium accusantium commodi, consequuntur atque praesentium modi consequatur eum aliquam aspernatur doloribus nemo voluptas vero corrupti qui asperiores tempore cumque repellat dolor, eligendi earum, porro dolorem deleniti. Eveniet rerum saepe a nostrum distinctio atque hic repellat numquam quasi officia inventore quaerat at aliquid, error minima similique, odit eaque! Sit id voluptate laboriosam distinctio culpa praesentium, dicta explicabo eveniet quam voluptatem, ratione aliquam repudiandae, beatae fugiat. Maxime, officia, enim corrupti in eveniet aperiam unde sit inventore quidem voluptatibus nobis soluta est. Tempora, incidunt recusandae iure fugit possimus officia veritatis, quis porro omnis, vero officiis harum iusto in! Nihil dignissimos nemo, ipsum at sint tempora ea earum veniam commodi porro facere dolor incidunt dolores maxime aspernatur alias, aliquid, consectetur non voluptatum sequi exercitationem iste et. Nulla tenetur quis ut, beatae nihil velit impedit temporibus totam aliquam voluptatem.
</p>
</main>
<!-- Content 1 -->
<aside class="content1">
<h3>Content 1</h3>
<img src="img/img1.jpg" alt="image-1" class="sample-img">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis nisi culpa eligendi possimus harum, asperiores non velit earum eum architecto provident fugiat corrupti dicta veritatis, fuga placeat at ex animi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id magni qui consectetur aliquam maxime odio neque eligendi reiciendis perspiciatis eveniet laboriosam, eos recusandae dignissimos dolor veritatis natus sed sint excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae hic veniam ad deserunt ipsam sunt repellendus, laboriosam odit, deleniti eius assumenda illo ex quod amet dolores. Est praesentium sapiente molestiae.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis nisi culpa eligendi possimus harum, asperiores non velit earum eum architecto provident fugiat corrupti dicta veritatis, fuga placeat at ex animi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id magni qui consectetur aliquam maxime odio neque eligendi reiciendis perspiciatis eveniet laboriosam, eos recusandae dignissimos dolor veritatis natus sed sint excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae hic veniam ad deserunt ipsam sunt repellendus, laboriosam odit, deleniti eius assumenda illo ex quod amet dolores. Est praesentium sapiente molestiae.</p><br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis nisi culpa eligendi possimus harum, asperiores non velit earum eum architecto provident fugiat corrupti dicta veritatis, fuga placeat at ex animi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id magni qui consectetur aliquam maxime odio neque eligendi reiciendis perspiciatis eveniet laboriosam, eos recusandae dignissimos dolor veritatis natus sed sint excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae hic veniam ad deserunt ipsam sunt repellendus, laboriosam odit, deleniti eius assumenda illo ex quod amet dolores. Est praesentium sapiente molestiae.</p>
</aside>
<!-- Content 2 -->
<aside class="content2">
<h3>Content 2</h3>
<img src="img/img2.jpg" alt="image-2" class="sample-img">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis nisi culpa eligendi possimus harum, asperiores non velit earum eum architecto provident fugiat corrupti dicta veritatis, fuga placeat at ex animi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id magni qui consectetur aliquam maxime odio neque eligendi reiciendis perspiciatis eveniet laboriosam, eos recusandae dignissimos dolor veritatis natus sed sint excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae hic veniam ad deserunt ipsam sunt repellendus, laboriosam odit, deleniti eius assumenda illo ex quod amet dolores. Est praesentium sapiente molestiae.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis nisi culpa eligendi possimus harum, asperiores non velit earum eum architecto provident fugiat corrupti dicta veritatis, fuga placeat at ex animi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id magni qui consectetur aliquam maxime odio neque eligendi reiciendis perspiciatis eveniet laboriosam, eos recusandae dignissimos dolor veritatis natus sed sint excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae hic veniam ad deserunt ipsam sunt repellendus, laboriosam odit, deleniti eius assumenda illo ex quod amet dolores. Est praesentium sapiente molestiae.</p><br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis nisi culpa eligendi possimus harum, asperiores non velit earum eum architecto provident fugiat corrupti dicta veritatis, fuga placeat at ex animi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id magni qui consectetur aliquam maxime odio neque eligendi reiciendis perspiciatis eveniet laboriosam, eos recusandae dignissimos dolor veritatis natus sed sint excepturi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae hic veniam ad deserunt ipsam sunt repellendus, laboriosam odit, deleniti eius assumenda illo ex quod amet dolores. Est praesentium sapiente molestiae.</p>
</aside>
<!-- Footer -->
<footer>
<p>Made with ❤ by - <span>Kunal Ukey</span></p>
</footer>
</div>
</div>
</body>
</html>