survey form (II)

index.html

<div class="fonts">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
  
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
  
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap" rel="stylesheet">
  
<link href="https://fonts.googleapis.com/css2?family=Road+Rage&display=swap" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,300&display=swap" rel="stylesheet">
</div>


<h1 id="title">The Altruism Survey Form</h1>
<p id="description">This survey will help us understand exactly what you love, dislike and want to improve on!</p>
<div id="last-try">
<form id="survey-form">
  <div id="test-vibes">

  
  <div class="name-div">
    <label id="name-label"> Name</label><br>
    <input 
         type="text"
         id="name"
         placeholder="Full Name"
         required
         />
  </div>
   
  
  <div class="email-div">  
     <label id="email-label"> Email Address</label><br>
     <input
         type="email"
         id="email"
         placeholder="Email Address"
         required
         />
  </div>
  
  
  <div class="bodycount-div"> 
      <label id="number-label"> Bodycount<span class="number-clue">(mandatory)</span></label> 
      <input
         type="number"
         id="number"
         placeholder= "Bodycount"
         min="0"
         max="1000"
         />       
  </div> 
  
  
  <div class="dropdown-div">
    <p> What skill level do you consider yourself?</p>
    <div class="another-dropdown">
        <select id="dropdown" required>
          <option disabled selected> Select skill level</option>
          <option> Novice</option>
          <option> Advanced Beginner</option>
          <option> Intermediate</option>
          <option> Expert</option>
        </select>
      </div>
  </div>
   
  
  <div class="radio-div">
    <p id="early-night">When do you perform the best?</p>
    <label for="earlybird">
      <input id="earlybird" value="earlybird" type="radio" name="earlybird-nightowl"> Morning</label><br>
    
    <label for="nightowl">
      <input id="nightowl" value="nightowl" type="radio" name="earlybird-nightowl"> Night
    </label>
  </div>


  <div class="checkbox-div">
    <p id="improve-on">Which sections would you like improvement on?</p>
    <label for="intro">
    <input value="intro" id="intro" type="checkbox" name="song-sections">Intro</label><br>
      
    <label for="prechorus">
    <input value="prechorus" id="prechorus" type="checkbox" name="song-sections">Endurance</label><br>
      
    <label for="chorus">
    <input value="chorus" id="chorus" type="checkbox" name="song-sections">Positions</label><br>
      
    <label for="verse">
    <input value="verse" id="verse" type="checkbox" name="song-sections">Techniques</label><br>
      
    <label for="bridge">
    <input value="bridge" id="bridge" type="checkbox" name="song-sections">Pillow Talk</label><br>
      
    <label for="outro">
    <input value="outro" id="outro" type="checkbox" name="song-sections">Next Morning</label>
  </div>
      
  <div class="additional-comments">
    <p>Any comments or suggestions?</p>
    <textarea
       name="additional-comments"
       placeholder="Enter your comment here..."
       id="additional-comments"
       ></textarea>
  </div>
  
  <div class="button-div">
    <button id="submit" type="submit" > Submit</button>
  </div>
</div>
</form>
</div>

script.babel

// !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

scripts

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.css

body {
  background: url(https://i.pinimg.com/564x/92/3a/0b/923a0b18a682e57df60bb6253c6b5036.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 70%; 
  background-attachment: fixed;
  maxed-width: 100%;
  height: auto;
}
h1 {
  font-family: Road Rage, sans-serif;
  font-size: 3.43rem;
  text-align: center;
  color: white;
  text-shadow: 0 0 0.4vmax black;
  letter-spacing: 0.195vmax;
  
}


#description {                            /*p underneath h1*/
  font-family: Raleway, sans-serif;
  text-align: center;
  margin: -1.5rem auto 2.5rem auto;
  max-width: 100%;
  color: white;
  text-shadow: 0 0 2vmax black;
  inline-size: 32.57vmax;
  overflow-wrap: normal;

}

div {                            /*all text visuals*/
  color: white;
  font-size: 1.1rem;
}

#name {                            /*name textbox*/
  height: 35px;
  width: 100%;
  border-radius: 4px;
  border:0;
  margin: 0px 0px 18px 0px;
}

#email {                            /*email textbox*/
  height: 35px;
  width: 100%;
  border-radius: 4px;
  border-color: rgba(50,50,50,.8);
  border:0;
  margin: 0px 0px 18px 0px;
}

#number {                            /*bodycount number*/
  height: 35px;
  width: 100%;
  border-radius: 4px;
  border:0;
  margin: 0px 0px 0px 0px;
  
}

span {
  font-size: 76%;
  padding-left: 4px;
}

#dropdown {                            /*skill level dropdown*/
  height: 40px;
  width: 100.6%;
  border-radius: 4px;
  border:0;
  font-family: Poppins, Nunito;
  padding-left: 0.5rem;
}


.another-dropdown {    /*another dropdown because I couldn't move the other higher*/
  margin-top: -18px;
}

input[type="radio"] {
  width: 27px;
  height: 20px;
  margin-left: -3px;
  margin-right: 0px;
  vertical-align: middle;
  position: relative;
  bottom: 4px;
}

#early-night, #improve-on {
  margin-bottom: 0.5rem;
}

input[type="checkbox"] {
  width: 23px;
  height: 23px;
  margin-right: 10px;
  margin-left: 0px;
  vertical-align: bottom;
  position: relative;
  bottom: 4px;
}

#additional-comments {                            /*textarea size*/
  height: 110px;
  width: 97.5%;
  border-radius: 1px;
  line-height: 35px;
  font-size: 80%;
  border:0;
  margin-top: -13px;
  padding-left: 1rem;
  font-family: Poppins, Nunito;
}

.additional-comments {
  padding-top: 8px;
}

#submit {                                /*submit button visuals*/
  height: 47px;
  width: 100.6%;
  background-color: rgba(80,90,200,1);
  margin: 20px auto;
  color: white;
  border-radius: 4px;
  font-size: 79%;
  border:0;
  cursor: pointer;
}

#submit:hover {                                /*submit button hover state*/
  height: 47px;
  width: 100%;
  background-color: rgba(50,60,170,1);
  margin: 20px auto;
  color: white;
  border-radius: 4px;
  font-size: 75%;
  border:0;
  cursor: pointer;
}

input::placeholder {            /* Placeholder positions*/
                padding-left: 10px;
                font-size: 0.9rem;
                font-family: Poppins, Nunito;
                vertical-align: center;
                
}


form {                            /*the grey background*/
  background-color: rgba(50,50,50,.8);
  border-radius: 4px;
  padding: 33px 44px; 
  line-height: 35px;
  display: inline-block;
  text-align: left;
  width: 42%
}

#last-try {               /* the parent div of form*/
  display: block;
  text-align: center;
}

#survey-form {
  margin-top: 6px;
  margin-bottom: 60px;
  letter-spacing: -0.071rem;
  font-family: Poppins, Nunito;
  
}
/* an attempt at being responsive*/

@media all and (max-width: 1400px) {
  form {
    width: 50.5%;
  }
  #description {
    width: 50%;
  }
}

@media all and (max-width: 1280px) {
  form {
    width: 50.5%;
  }
}

@media all and (max-width: 1030px) {
  form {
    width: 63%;
  }
  
  #description {
    width: 85%;
  }
}

@media all and (max-width: 768px) {
  form {
    width: 85%;
  }
  #description {
    width: 60%;
  }
}

@media all and (max-width: 560px) {
  form {
    width: 75%;
  }
  #description {
    width: 100%;
  }
}

@media all and (max-width: 440px) {
  form {
    width: 90%;
    padding: 1rem;
  }
  #description {
    width: 100%;
  }
}

@media all and (max-width: 380px) {
  form {
    width: 90%;
    padding: 1rem;
  }
  #description {
    width: 90%;
  }
}

@media all and (max-width: 360px) {
  form {
    width: 90%;
    padding: 1rem;
  }
  #description {
    width: 90%;
  }
}

@media all and (max-width: 280px) {
   form {
    width: 90%;
    padding: 1rem;
  }
}

survey-form-ii.markdown

survey form (II)

A Pen by onthewall on CodePen.

License.