frontendmentorchallenger-signup/index.html at master · renatobmps/frontendmentorchallenger-signup · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <title>Frontend Mentor | Intro component with sign up form</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>

  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <strong>Learn to code by watching others</strong>
    <p>See how experienced developers solve problems in real-time. Watching scripted tutorials is great,
    but understanding how developers think is invaluable.</p>
  </header>
  <main>
    <div class="banner"><strong>Try it free 7 days</strong> then $20/mo. thereafter</div>
    <form action="enviar" id="formulario">
      <div id="campo-first-name">
        <input type="text" id="first-name" class="campos" placeholder="First Name" name="first-name" aria-labelledby="first-name formulario">
        <img src="images/icon-error.svg" alt="icone de erro" class="error-icon icon-erro-first-name">
        <p class="error-message erro-first-name">First Name cannot be empty</p>
      </div>
      <div id="campo-last-name">
        <input type="text" id="last-name" class="campos" placeholder="Last Name"  name="last-name" aria-labelledby="last-name formulario">
        <img src="images/icon-error.svg" alt="icone de erro" class="error-icon icon-erro-last-name">
        <p class="error-message erro-first-name">Last Name cannot be empty</p>
      </div>
      <div id="campo-email">
        <input type="email" id="email" class="campos" placeholder="Email Address"  name="email" aria-labelledby="email formulario">
        <img src="images/icon-error.svg" alt="icone de erro" class="error-icon icon-erro-email">
        <p class="error-message erro-first-name">Looks like this is not an email</p>
      </div>
      <div id="campo-password">
        <input type="password" id="password" class="campos" placeholder="Password" aria-labelledby="password formulario">
        <img src="images/icon-error.svg" alt="icone de erro" class="error-icon icon-erro-password">
        <p class="error-message erro-first-name">Password cannot be empty</p>
      </div>
      <input type="submit" value="Claim your free trial" class="claim">
      <p>By clicking the button, you are agreeing to our <a href="#">Terms and Services</a></p>
    </form>
  </main>
  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="https://renatobmps.github.io/curriculo" target="_blank">Renato Brandão</a>.
    </p>
  </footer>
  <script src="js/index.js"></script>
</body>
</html>