JavaScript-Effects/Switch-Theme/index.html at master · Akshay2996/JavaScript-Effects · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="style.css" />

    <script defer src="app.js"></script>
  </head>
  <body class="light">
    <nav class="navbar">
      <ul class="navbar-nav">
        <li class="nav-item">Home</li>
        <li class="nav-item">About</li>

        <!-- Dropdown -->
        <li class="nav-item has-dropdown">
          <a href="#">Theme</a>

          <ul class="dropdown">
            <li class="dropdown-item">
              <a href="#" id="light">light</a>
            </li>
            <li class="dropdown-item">
              <a href="#" id="dark">dark</a>
            </li>
            <li class="dropdown-item">
              <a href="#" id="solar">solarize</a>
            </li>
          </ul>
        </li>

        <li class="nav-item">Login</li>
      </ul>
    </nav>

    <header>
      <img src="logo.png" alt="Image not displayed" class="logo" />
      <h1>Front-End Web Development<br />Fired Up</h1>

      <p>Html5, Css3, Javascript, Node.js, React.js</p>
    </header>

    <main>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ipsum suspendisse
      ultrices gravida dictum fusce ut placerat. Diam vel quam elementum
      pulvinar etiam non. Massa massa ultricies mi quis.
      <br />
      <br />
      Nunc pulvinar sapien et ligula ullamcorper. Sem fringilla ut morbi
      tincidunt. Neque laoreet suspendisse interdum consectetur libero. Aliquet
      risus feugiat in ante. Amet volutpat consequat mauris nunc congue nisi.
      Aliquam etiam erat velit scelerisque in. Enim praesent elementum facilisis
      leo vel. Odio aenean sed adipiscing diam.
      <br />
      <br />
      Nisi scelerisque eu ultrices vitae auctor eu. Molestie a iaculis at erat
      pellentesque. Interdum velit laoreet id donec ultrices tincidunt arcu.
      Amet aliquam id diam maecenas ultricies mi eget.
    </main>
  </body>
</html>