form
<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Good Vibes Form</h1>

    <form method="POST" action="/" id="form">
      <p class="intro">tell us something positive that happened to you today</p>
      <div class="form-rows">
        <div class="labels fild">
          <label for="name" id="name-label">Name:</label>
        </div>
        <div class="fields">
          <input id="name" type="text" placeholder="Enter your name" />
        </div>
      </div>
      <div class="form-rows">
        <div class="labels fild">
          <label class="email-label" for="email">Email</label>
        </div>
        <div class="fields">
          <input
            type="email"
            id="email"
            placeholder="Enter your email Address"
          />
        </div>
      </div>
      <div class="form-rows">
        <div class="labels fild">
          <label for="rate" class="rate-label"
            >On a scale of 1-10, how good was it?</label
          >
        </div>
        <div class="fields">
          <input type="number" placeholder="Enter a number Between 1 and 10" />
        </div>
      </div>
      <div class="form-rows">
        <div class="labels fild">
          <label id="place-label" for="place">Where did it happen?</label>
        </div>
        <div class="fields">
          <select id="place">
            <option>At home</option>
            <option>At work</option>
            <option>On my commute</option>
            <option>on the Street</option>
            <option>other</option>
          </select>
        </div>
      </div>

      <div class="form-rows">
        <div class="labels  radios">
          <label for="time" id="time-label"
            >At what time of day did it happen?</label
          >
        </div>
        <div class="fields">
          <p>
            <input type="radio" name="time" /> Morning <br />
            <input type="radio" name="time" /> Afternoon <br />
            <input type="radio" name="time" /> Evening <br />
          </p>
        </div>
      </div>

      <div class="form-rows">
        <div class="labels radios">
          <label for="emotions" id="emotion-label"
            >What emotions did you experience? (Select all that apply)</label
          >
        </div>
        <div class="fields">
          <p>
            <input type="checkbox" /> Exited <br />
            <input type="checkbox" /> Humbled <br />
            <input type="checkbox" /> Elated <br />
            <input type="checkbox" /> Loved <br />
            <input type="checkbox" /> Enthusiastic <br />
          </p>
        </div>
      </div>
      <div class="form-rows">
        <div class="labels fild">
          <label for="describe" id="describe-label"
            >Please describe your positive experience.</label
          >
        </div>
        <div class="fields">
          <textarea
            id="describe"
            placeholder="enter your experience here"
            rows="5"
            cols="30"
          ></textarea>
        </div>
      </div>

      <button type="submit">submit</button>
    </form>
  </body>
</html>
body {
  background-color: skyblue;
  text-align: center;
}

h1 {
  
  
}

form {
  width: 600px;
  background-color: #eee8e8;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  display: blcok;
}

form .intro {
  padding-top: 30px;
  padding-bottom: 10px;
}

.form-rows {
  position: static;
  display: blcok;
  margin-top: 15px;
  
}

.labels {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  width: 40%;
  padding: 5px;
  
  
}

.fields {
  display: inline-block;
  width: 48%;
  vertical-align: middle;
  text-align: left;
}
.radios {
  margin-top: 10px;
}


textarea {
  resize: vertical;
}
button {
  padding: 8px;
  margin: 10px 10px 15px 10px;
  border: none;
  background-color: #0091ff;
  color: white;
  border-radius: 3px;
  cursor: pointer;
}
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */
  • Files
  • Index
  • Style
  • Script
  • README
  • CDN Add
HTML
PLEASE WAIT...