javascript-projects/light-dark-mode/index.html at main · tinawebdev/javascript-projects · 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
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="style.css" />
  <title>Light/Dark Mode</title>
</head>
<body>
  <!-- Navigation -->
  <nav id="nav">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
    <!-- Dark Mode Switch -->
    <div class="theme-switch-wrapper">
      <span id="toggle-icon">
        <span class="toggle-text">Light Mode</span>
        <i class="fas fa-sun"></i>
      </span>
      <label class="theme-switch">
        <input type="checkbox" />
        <div class="slider round"></div>
      </label>
    </div>
  </nav>
  <!-- Home Section -->
  <section id="home">
    <div class="title-group">
      <h1>Custom Title Here</h1>
      <h2>Welcome to your website!</h2>
    </div>
  </section>
  <!-- About Section -->
  <section id="about">
    <h1>Undraw Illustrations</h1>
    <div class="about-container">
      <div class="image-container">
        <h2>Web Innovation</h2>
        <img src="img/undraw_proud_coder_light.svg" alt="Proud Coder" id="image1"/>
      </div>
      <div class="image-container">
        <h2>Problem Solving</h2>
        <img src="img/undraw_feeling_proud_light.svg" alt="Feeling Proud" id="image2"/>
      </div>
      <div class="image-container">
        <h2>High Concept</h2>
        <img src="img/undraw_conceptual_idea_light.svg" alt="Conceptual Idea" id="image3"/>
      </div>
    </div>
  </section>
  <!-- Projects Section -->
  <section id="projects">
    <h1>Buttons</h1>
    <div class="buttons">
      <button class="primary">Primary</button>
      <button class="secondary">Secondary</button>
      <button class="primary" disabled>Disabled</button>
      <button class="outline">Outline</button>
      <button class="secondary outline">Alt Outline</button>
      <button class="outline" disabled>Disabled</button>
    </div>
    <div class="text-box" id="text-box">
      <p>Lorem ipsum dolor amet consectetur adipisicing elit. Voluptatibus magnam sit alias eos ducimus expedita quam, corporis, blanditiis vel facilis, animi adipisci? Nemo enim quisquam maiores minima, qui omnis. Accusamus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem magnam accusamus qui, ab voluptates reprehenderit rerum quo mollitia libero asperiores doloremque dolores, nihil repellat doloribus perspiciatis magni dolore dolorum ipsam!</p>
    </div>
  </section>
  <!-- Contact Section -->
  <section id="contact">
    <div class="social-icons">
      <i class="fab fa-github"></i>
      <i class="fab fa-codepen"></i>
      <i class="fab fa-linkedin-in"></i>
      <i class="fab fa-medium"></i>
      <i class="fab fa-instagram"></i>
      <i class="fab fa-youtube"></i>
    </div>
  </section>
  <!-- Script -->
  <script src="script.js"></script>
</body>
</html>