<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Robert Pfaff Codecademy CSS Cheatsheet Project</title>
    <style>
      body {
        padding: 25px;
        background-color: #f1e3a4;
      }
    </style>
    <link rel="stylesheet" href="styles.css" >
</head>
<body>
    <form class="form" action="./" method="POST">
         <div class="form_title">Please register.</div>
          <p class="form_desc">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum placeat sint veritatis debitis necessitatibus saepe illo culpa maxime expedita dolores mollitia, iusto, reiciendis beatae atque aut enim fugiat, voluptas eveniet.
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit culpa enim facilis ratione commodi praesentium aliquid saepe illo nostrum, repellendus voluptas ipsa illum magnam quo animi, rerum eius voluptatum doloremque.
          </p>
          
           <div class="form_item">
    <label for="names" class="form_label">Enter your name</label>
    <input type="text" class="form_input" name="names" id="names" placeholder="Enter your given name(s)">
    <span class="form_error">A sample error message</span>
  </div>
          
          <div class="form_item" >
            <label for="numusers" class="form_label">Number of users?</label>
            <input type="number" class="form_input form_input_small" name="numusers" id="numusers" min="1" max="5" placeholder="How many users? Max = 5">
            <span class="form_error">Sample Error Message</span>
          </div>
          
          <div class="form_item" >
             <label for="exdate" class="form_label">Enter expiration date</label>
             <input type="date" class="form_input form_input_small" name="exdate" id="exdate" placeholder="Please enter an expiration date.">
            <span class="form_error">Sample Error Message</span>
          </div>

          <div class="form_item" >
            <label for="message" class="form_label">Leave a message</label>
            <textarea  class="form_input" name="message" id="message" maxlength="2000" class="message" placeholder="Enter a detailed message"></textarea>
            <span class="form_error">Sample Error Message</span>
         </div>

         <div class="form_item" >
          <button class="form_btn" type="submit">Register me</button>
       </div>         
    </form>
    <script scr="client.js"></script>   
</body>
</html>
@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;800&family=Source+Sans+3:ital,wght@0,400;0,600;1,400;1,600&display=swap’);

.form {
font-family: "Source Sans 3", sans-serif;
font-size: 18px;
}

.form * {
box-sizing: border-box;
line-height: 1.5;
}

.form_title {
font-size: 3em;
font-weight: 600;
}

.form_desc {
font-size: 16px;
}

.form_item {
display: flex;
flex-direction: column;
}

.form_item > * {
align-self: flex-start;
}

.form_label > * {
font-weight: 600;
padding: 10px 0;
}

.form_input {
  
-webkit-appearance: none;

width: 100%;
max-width: 425px;

/* Fix for Safari/iOS date fields */
min-height: calc(0.9em + (0.8em * 2) + 0.6em);
 
padding: 0.8em;
font-size: 0.9em;
font-family: "Source Sans Pro", sans-serif;

outline: none;
border: 1px solid #dddddd;
border-radius: 8px;
background: #ffffff;
transition: background .25s, border-color .25s, color .25s;
}

.form_input:focus {
  background: f9f9f9f9;
}

.form_input::placeholder {
    color: #bbbbbb;
}

.form_input--error {
    color: #d50000;
    background: #fff8f8;
    border-color: #dd5500;
}

.form_input--error::placeholder {
    color: #ffbfbf;
}

.form_error {
  padding-top: 10px;
  color: #ffffff;
  font-size: 0.9em;
  visibility: hidden;
}

.form_input--error + .form_error {
  visibility:  visible;
}

.form_input_small {
    max-width: 300px;
}

textarea.form_input {
    resize: none;
    max-height: 200px;
}

textarea.form_input {
    resize: none;
    min-height: 200px;
    min-width: 400px;
}

.form_btn {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 1.1em;
    padding: 10px 16px;
    margin: 10px 0;

    color: #ffffff;
    background: #14b64a;
    border: 2px solid #0fa942;
    border-radius: 5px;

    cursor: pointer;
    outline: none;

}

.form_btn:active {
    background: #0fa942;
    
}


document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.form_input').forEach(function (input) {
        input.addEventListener('input', function () {
            input.className = this.className.replace(form_error, "" );

        });
    });
});

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.