Sign-up-form/index.html at main · josefineschaefer/Sign-up-form · 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
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Sign up Page</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
      rel="stylesheet"
    />
    <meta name="viewport" content="width=device-width" />
  </head>

  <body>
    <main>
      <div class="layout layout__left">
        <div class="layout__backdrop">
          <section class="layout__socials">
            <h1>Sign up with</h1>
            <a
              href="https://www.facebook.com"
              aria-label="Sign up with Facebook"
            >
              <img class="logo" src="assets/facebook_logo.svg" alt="facebook"
            /></a>
            <a href="https://www.twitter.com" aria-label="Sign up with Twitter">
              <img class="logo" src="assets/twitter_logo.svg" alt="twitter"
            /></a>
            <a
              href="https://www.instagram.com"
              aria-label="Sign up with Instagram"
            >
              <img
                class="logo"
                src="assets/instagram_logo.svg"
                alt="instagram"
              />
            </a>
            <p>or use your email for registration:</p>
          </section>
          <form class="layout__form" action="/action_page.php">
            <label for="name">Name:</label>
            <input type="text" placeholder="Name" id="name" />
            <label for="email">E-mail: <sup class="asterisk">*</sup></label>
            <input type="email" placeholder="E-mail" id="email" required />
            <label for="pass"
              >Password <sup class="asterisk">*</sup>
              <div class="tooltip-container">
                <img
                  class="help-icon"
                  src="assets/question.png"
                  alt="Help icon"
                />
                <span class="tooltip-help" role="tooltip" id="passwordrules">
                  Min. 8 characters,<br />
                  one uppercase.
                </span>
              </div>
            </label>
            <input
              type="password"
              id="pass"
              required
              placeholder="Password"
              aria-describedby="passwordrules"
              pattern="(?=.*[A-Z]).{8,}"
            />
            <div id="message">
              <h4>Password must contain the following:</h4>
              <p id="capital" class="invalid">A capital (uppercase) letter</p>
              <p id="length" class="invalid">Minimum 8 characters</p>
            </div>
            <div>
              <input
                required
                type="checkbox"
                id="TermsPrivacyCheckbox"
                checked
              /><label for="TermsPrivacyCheckbox"
                >I agree to the <a href="#myModal" id="Terms">Terms</a>
                and
                <a id="Privacy" id="Privacy" href="#myModal">Privacy Policy</a
                ><sup class="asterisk">*</sup></label
              >
            </div>
            <!-- The Modal -->
            <div
              id="myModal"
              class="modal"
              role="alertdialog"
              aria-modal="true"
              aria-labelledby="Terms and Conditions"
            >
              <!-- Modal content -->
              <div class="modal-content">
                <button class="close-button">&times;</button>
                <p class="loremIpsum">Loading...</p>
              </div>
            </div>
            <div class="submit">
              <button
                class="sign-up-button"
                type="submit"
                onclick="loginConfirmation()"
              >
                Sign Up
              </button>
            </div>
          </form>
        </div>
      </div>
      <div class="layout layout__right">
        <img
          src="assets/illustration.jpeg"
          alt="An artistic illustration showing diverse people in various activities"
          loading="lazy"
        />
      </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>