Good Vibes Form
<html lang="">
  <head>
    <title>Good Vibes form</title>
  </head>
  <body>
    <main>
      <h1 id="title"> Good Vibes</h1>
      <div class="master-div-style">
          <p>Tell us something positive that happend to you today.</p>
        <form id="survey-form" action="/do-something">
          
          <div class="form-rows"></div>
          
          <div class="labels">
            <label for="name" id="name-label">Name</label>
          </div>
          
            <div class="fields">
                  <input type="text" id="name" class="input-fields" placeholder="Enterr your name" required />
            
          </div>
          <div class="form-rows">
            
            <div class="labels">
              <label for="email" id="email-label">Email</label>
            </div>

           <div class="fields">
                   <input type="text" id="email" class="input-fields" placeholder="Enter your email address" required />
           </div> 
          </div>

          <div class="form-rows">

            <div class="labels">
              <label for="number" id="number-label">On a  Scale of 1-10, how good was it?</label>
            </div>

            <div class="fields">
              <input type="numbe" id="number" class="input-fields" placeholder="Enter a nmber 1 and 10" min="1" max="10" />
            </div>
          </div>

          <div class="form-rows">
            <div class="labels">
              <label for="dropdown" id="dropdown-label">Where did it happen?</label>
            </div>
            <div class="fields">
              <select class="dropdown" id="dropdown" name="location of positive 
 event">
                <option value="home">At home</option>
                <option value="commute">On my commute</option>
                <option value="work">At work </option>
                <option value="outside">On the Street</option>
                <option value="other">Other</option>
              </select>
            </div>
          </div>

          <div class="form-rows">
            <div class="labels">
              <label for="time-of-day">At what time of day it happen?</label>
            </div>
            <div class="fields">
              <ul id="time-of-day" style="list-style:none;">
                <li class="radio">
                  <label>Morning <input type="radio" name="time-radio" value="1" class="user-selection" /></label>
                </li>
                <li class="radio">
                  <label>Afternoon <input type="radio" name="time-radio" value="2" class="user-selection" /></label>
                </li>
                <li class="radio">
                  <label>Evening <input type="radio" name="time-radio" value="3" class="user-selection" /></label>
                </li>
              </ul>
            </div>
          </div>

          <div class="form-rows">
            <div class="labels">
              <label for="feelings">What emotions did you experience?<br />(Select all that apply)
              </label>
            </div>

            <div class="fields">
              <ul style="list-style: none;" id="feelings">
                <li class="radio">
                  <label><input type="checkbox" class="user-selection" name="feeling-check" value="1" />Excited</label>
                </li>
                <li class="radio">
                  <label><input type="checkbox" class="user-selection" name="feeling-check" value="2" />Humbled</label>
                </li>
                <li class="radio">
                  <label><input type="checkbox" class="user-selection" name="feeling-check" value="3" />Elated</label>
                </li>
                <li class="radio">
                  <label><input type="checkbox" class="user-selection" name="feeling-check" value="4" />Loved</label>
                </li>
                <li class="radio">
                  <label><input type="checkbox" class="user-selection" name="feeling-check" value="5" />Enthusiastic</label>
                </li>
              </ul>
            </div>
          </div>

          <div class="form-rows">
            <div class="labels">
              <label for="event-details">Please describe your positive experiene.</label>
            </div>
            <div class="fields">
              <textarea id="event-details" class="input-fields" style="height: 50px; width:30%; resize:vertial;font-family: Open Sans Condensed;" name="event-details" cols="1" rows="1" placeholder="Enter your experience here..."></textarea>
            </div>
          </div>
            <button type="button" id="submit" class="button">Submit</button>
        </form>
        </div>
        
    </main>
  </body>
</html>
body {
  text-align: center;
  background-color: #a9d7e9;
}

h1 {
  font-size: 48px;
}

p {
  font-size: 22px;
}

.form-rows {
  position: static;
  display: block;
}
.master-div-style {
  margin: auto;
  width: 800px;
  background-color: #f3f3f3;
  border-radius: 10px;
  padding: 20px 10px 10px 10px;
}

.fields {
  display: inline-block;
  text-align: left;
  width: 48%;
  vertical-align: middle;
}
.labels {
  display: inline-block;
  text-align: right;
  width: 40%;
  padding: 5px;
  vertical-align: top;
  margin-top: 10px;
}

.input-fields {
  height: 20px;
  width: 280px;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
}

.dropdown {
  height: 35px;
  width: 140px;
  padding: 5px;
  margin: 15px 10px 10px 10px;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
}

.radio {
  position: relative;
  left: -43px;
  margin-left: 10px;
  display: block;
  padding-bottom: 10px;
}

.user-selection {
  float: left;
  margin-right: 5px;
}

.button {
  font-size: 1em;
  background-color: #6ba2ce;
  color: white;
  border: 0px solid;
  border-radius: 4px;
  height: 40px;
  width: 80px;
  margin: 10px;
}

@media (max-width: 833px) {
  .master-div-style {
    width: 70%;
  }

  .fields {
    display: inline-block;
    text-align: left;
    width: 48%;
    vertical-align: middle;
  }

  .input-fields {
    width: 80%;
  }

  .dropdown {
    width: 90%;
  }
}

@media (max-width: 520px) {
  .master-div-style {
    width: 80%;
  }

  .fields {
    width: 80%;
    float: left;
  }
  .labels {
    width: 100%;
    text-align: left;
  }

  .input-fields {
    width: 100%;
  }

  .dropdown {
    width: 100%;
  }
}
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */

Good Vibes Form

  • Files
  • Index
  • Style
  • Script
  • README
  • CDN Add
HTML
PLEASE WAIT...