DBZ Survey

In this example below you will see how to do a DBZ Survey with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by msnillum91, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright msnillum91 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>DBZ Survey</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<html>
  <head>
    <title>Survey</title>
  </head>
  <body>
   <h1 id ="title">Dragonball Universe</h1>
   <main> 
      <p id="description">A Survey</p>
      <form id="survey-form">
        <div class="fieldrow">
          <div class="labels">
            <label id="name-label" for="name">Name:</label>
          </div>
            <div class="inputs">
              <input class="input-field" id="name" name="name"type="name"placeholder="Write your name here!"required></input>
            </div>
          </div>
          <div class="fieldrow">
            <div class="labels">
              <label id="email-label" for="email">Email</label>
            </div>
            <div class="inputs">
              <input class="input-field" name="email" id="email" placeholder="e-mail goes here." type="email" required></input> 
            </div>  
          </div>  
         <div class="fieldrow">
           <div class="labels">
             <label id="number-label" for="number">Age</label>
           </div>
           <div class="inputs">
             <input class="input-field" name="number" id="number" type="number" placeholder="Tell us your age!" min="1" max="110" required></input>
           </div>  
         </div>
         <div class="fieldrow">
           <div class="labels">
             <label for="dropdown">Which of these do you think is the weakest DBZ character?</labe>
           </div>
           <div class="inputs">
             <select id="dropdown" class="input-field">
               <option>Yamcha</option>
               <option>Krillen</option>
               <option>Hercule</option>
               <option>Nappa</option>
               <option>Recoome</option>
               <option>Ginyu</option>
               <option>Babidi</option>
               <option>Chiaotzu</option>
             </select>
           </div>  
        </div>
        <br></br>
<h2>Select Your Favorite!</h2>

        <div class="fieldrow">
          <div class="labels">
            
          </div>
          <div class="inputs">
            <input value="7" name="rb" type="radio">Vegeta</input>
          <br></br>
          <input value="7" name="rb" type="radio">Dende</input>
<br></br>
<input value="7" name="rb" type="radio">
Piccolo</input>
<br></br>
<input value="7" name="rb" type="radio">Android 18</input>
<br></br>
<input value="7" name="rb" type="radio">Supreme Kai</input>
<br></br>
<input value="7" name="rb" type="radio">Chichi</input>
          </div>  
</div><br></br>
<h3>Who do you love to hate?(Favorite Baddies)</h3>
        <div class="fieldrow">
          <div class="labels">
              
          </div>
          <div class="inputs">
            <input value="8" type="checkbox">
              Cell
            </input>
          <br></br>
          <input value="8" type="checkbox">
              Frieza
            </input>
          <br></br>
          <input value="8" type="checkbox">
              Garlic Jr
            </input>
          <br></br>
          <input value="8" type="checkbox">
            Android 17
          </input>
          <br></br>
          <input value="8" type="checkbox">
            Majin Buu
            
             <ul>
               <li>Super Buu</li>
               
               <li>Kid Buu</li>
              </ul>
               
          </input>
          
          <input value="8" type="checkbox">
            Dr. Gero
          </input>
          <br></br>
          <input value="8" type="checkbox">
            Zarbon
          </input>
          <br></br>
          <input value="8" type="checkbox">
            Raditz
          </input>
          <br></br>
            

          </div>  
        </div>
          <div class="fieldrow">
          <div class="labels">
              Comment Section
          </div>
          <div class="inputs">
            <textarea id="textarea" type="textarea" placeholder="Want to add anything?Type it here!"></textarea>
            </div> 
            
            <button type="submit" id="submit">Submit</button>   
      </form> 
   </main>  
  </body>  
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/msnillum91/dbz-survey-wJaOdN */
html{
  font-family:Acme;
}
body{
  background-color:#2d5986;
  margin:auto;
  background-image:url("http://img05.deviantart.net/6503/i/2016/083/6/d/dragon_ball_pattern_free_by_sarah_is_serenity-d9w99a4.png");
  background-size:100%;
    
}
main{
  width:55%;
  background-color:orange;
  margin:auto;
  opacity: 0.89;
border:15px solid transparent;
  padding: 10px;
  border-image:url("https://img.clipartfest.com/408225762f210cae418132b96fc61648_1000-images-about-borders-on-free-clipart-wedding-borders_3300-1212.png") 40%;
    border-raidus:75%;
 }
#title{
  background-color:;
  width:50%;
  padding-bottom:10px;
  margin:0 auto;
  text-align:center;
  font-family:Acme;
  
}
.labels{
  display:inline-block;
  width:39%;
  text-align: right;
  font-size:20px;
  font-family:Acme;
  
}
.inputs{
  display:inline-block;
  margin-left:10px;
  font-family:Acme;
  font-size:20px;
  
}
p{
  text-align:center;
  font-family:Acme;
  font-size:29px;
  
}
.input-field{
  width:200px;
  height:25px;
  font-family:Acme;
  
}
h2{
  text-align:center;
  margin-top:15px;
  margin-bottom:12px;
  font-size:30px;
  font-family:Acme;
}

h3{
  text-align:center;
  margin-top:15px;
  margin-bottom:20px;
  font-family:Acme;
}
.radio{
  font-family:Acme;
}

Comments