javascript-landing-page/src/index.html at ae4cc5df75fd71195b203dbded9d1dee60858dec · developer-job-simulation/javascript-landing-page · 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JobSimulator.Dev</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Lato"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <script src="script.js"></script>
  </head>

  <body>
    <nav class="top">
      <div class="bar blue card left-align large">
        <a
          class="bar-item button hide-medium hide-large right padding-large hover-white large blue"
          href="javascript:void(0);"
          id="hamburger-button"
          onclick="toggleNav()"
          title="Toggle Navigation Menu"
          ><i class="fa fa-bars"></i
        ></a>
        <a
          href="#header"
          id="nav-logo"
          class="bar-item button padding-large white"
          >JobSimulator.Dev</a
        >
        <a
          href="#challenges"
          id="nav-challenges"
          class="bar-item button padding-large hover-white hide-small"
          >Browse Challenges</a
        >
        <a
          href="#signup"
          id="nav-signup"
          class="bar-item button padding-large hover-white hide-small"
          >Sign Up</a
        >
      </div>

      <!-- Navbar on small screens -->
      <div
        id="mobile-nav"
        class="bar-block white hide hide-large hide-medium large"
      >
        <a
          id="mobile-nav-challenges"
          class="bar-item button padding-large"
          href="#challenges"
          >Browse Challenges</a
        >
        <a
          id="mobile-nav-signup"
          class="bar-item button padding-large"
          href="#signup"
          >Sign Up</a
        >
      </div>
    </nav>

    <!-- Header -->
    <header
      id="header"
      class="container white center"
      style="padding: 128px 16px"
    >
      <img id="jumbo-image" src="./banner-image.png" />
      <h1 class="margin jumbo">Want to test your software dev skills?</h1>
      <a href="#signup" class="button blue padding-large large margin-top"
        >Sign Up</a
      >
    </header>

    <section id="challenges" class="row-padding pink padding-256 container">
      <div class="content">
        <h1>Browse Our Challenges</h1>
        <div id="challenge-grid">
          <a
            class="challenge-tile"
            target="_blank"
            href="https://github.com/developer-job-simulation/vanilla-login-form"
            >Vanilla Login Form</a
          >
          <a
            target="_blank"
            class="challenge-tile"
            href="https://github.com/developer-job-simulation/vanilla-table"
            >Vanilla Table</a
          >
          <a
            target="_blank"
            class="challenge-tile"
            href="https://github.com/developer-job-simulation/react-ecommerce"
            >React Ecommerce</a
          >
          <a
            target="_blank"
            class="challenge-tile"
            href="https://github.com/developer-job-simulation/react-mui-table"
            >React Table</a
          >
        </div>
      </div>
    </section>

    <section id="signup" class="row-padding light-grey padding-256 container">
      <div class="content">
        <div id="signup-form">
          <h1>Sign Up & Get Started</h1>
          <form>
            <span id="success-message" class="success-message" hidden="true"
              >Success!</span
            >
            <span id="taken-error-message" class="error-message" hidden="true"
              >Error: Email Already Taken</span
            >
            <span id="empty-error-message" class="error-message" hidden="true"
              >Error: Email Address Empty.</span
            >
            <input id="email" type="email" placeholder="Enter your email" />
            <button>Submit</button>
          </form>
        </div>
      </div>
    </section>
  </body>
</html>