simon-html/index.html at main · webprogramming260/simon-html · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- Tell browsers not to scale the viewport automatically -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simon HTML</title>
    <link rel="icon" href="favicon.ico" />
  </head>
  <body>
    <!-- Use header, main, and footer elements to give semantic structure -->
    <header>
      <h1>Simon<sup>&reg;</sup></h1>

      <!-- Navigation elements -->
      <nav>
        <!-- Menu is a semantic alternative to <ul> that represents an interaction -->
        <menu>
          <li><a href="index.html">Home</a></li>
          <li><a href="play.html">Play</a></li>
          <li><a href="scores.html">Scores</a></li>
          <li><a href="about.html">About</a></li>
        </menu>
      </nav>

      <!-- Since we don't have the ability to style we use old style HTML to give some visual formatting -->
      <hr />
    </header>

    <main>
      <h1>Welcome to Simon</h1>
      <form method="get" action="play.html">
        <div>
          <span>@</span>
          <input type="text" placeholder="your@email.com" />
        </div>
        <div>
          <span>🔒</span>
          <input type="password" placeholder="password" />
        </div>
        <button type="submit">Login</button>
        <button type="submit">Create</button>
      </form>
    </main>

    <footer>
      <hr />
      <span class="text-reset">Author Name(s)</span>
      <br />
      <a href="https://github.com/webprogramming260/simon-html">GitHub</a>
    </footer>
  </body>
</html>