<body>
  
<div class="intro">
<h1 id="title">Ragnarok Assassin Cross Youtube Video Survey Form</h1>
<p id="description">Please let me know what content you want to see next on my <a href="https://www.youtube.com/user/vashgibz13/videos">Assassin Cross Youtube Videos Playlist.</a></p>
</div>

<div class="video" alt="SinX Videos">
<iframe width="460" height="360" src="https://www.youtube.com/embed/NGWGe_LII5I?start=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video">
  
<form id="survey-form">
  
  <fieldset>
        <label>Enter Your Name: <input type="text" id="name-label" placeholder="Vengeance SinX" required /></label>
        <label>Enter Your Email: <input type="email" id="email-label" placeholder="sinx@gmail.com" required>                </label> 
        <label id="number">Enter Your Age: <input type="number" id="number-label" placeholder="32" min="18"                 max="150" required></label>   

    <label id="dropdown">How did you find this YouTube channel?<br>
          <select>
            <option value="">(select one)</option>
            <option value="1">Discord</option>
            <option value="2">Facebook</option>
            <option value="3">YouTube Recommendation</option>
            <option value="4">Others</option>
          </select>
    </label>
    
    <label id="experience">Have you ever played Ragnarok Online before?<br>
      <input type="radio" name="player-yes-no" class="inline" checked>Yes
      <input type="radio" name="player-yes-no" class="inline">No
    </label>
    
    <label id="check">Please check which ones would you like to see on my next videos:<br>
          <input type="checkbox" value="SinX-vs-MVP" class="inline2" checked/>MVP SinX
          <input type="checkbox" value="SinX-WOE" class="inline2"/>WOE SinX
          <input type="checkbox" value="SinX-PVM" class="inline2"/>PVM SinX
          <input type="checkbox" value="SinX-PVP" class="inline2" />PVP SinX
    </label>
			
    <label id="request">If you have any comments, suggestions, or requests, please let me know in the textbox provided below. Thank you and have a nice day!<textarea name="comments" rows="5" cols="60" placeholder="I would like to see..."></textarea>
    </label>
  
  <label><input type="submit" id="submit" class="submit"/></label>
  
  </fieldset>
    
    </form>
  </body>
body {
  color: white;
  background-color: #202020;
  width: 600px;
  height: 1500px;
  margin: auto;
  border-style: dashed;
  border-color: red;
  border-width: 5px;
  font-family: "Comic Sans MS", "Comic Sans";
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  
  }

.intro {
 width: 500px;
 margin: auto;
 margin-top: 30px;
 line-height: 50px;
 font-weight: bold;
}

.video {
  display: block;
  margin-bottom: 500px;
}

#description {
  font-size: 15px;
  font-family: "Verdana";
  line-height: 30px;
  font-weight: normal;
  width: 500px;
  margin: auto;
  padding-bottom: 30px;
}

a:link {
  color: yellow;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: none;  
 }
  
 fieldset {
    width: 500px;
    height: 800px;
    margin: auto;
    line-height: 40px;
    margin-top: 50px;
    text-align: left;
    border-radius: 8px;
    background-color: silver;
    color: black;
    }

label {
  display: block;
  	}

input[type="submit"] {
  display: block;
  width: 200px;
  height: 50px;
  font-size: 15px;
  font-weight: bold;
  background-color: white;
  border-color: gray;
  margin: auto;
  margin-top: 35px;
  border-radius: 10px;
  }

textarea {
  display: block;
  background-color: white;
  border: 2px solid black;
  color: black;
  font-size: 15px;
  width: 100%;
  margin-top: 25px;
  font-family: "Comic Sans MS", "Comic Sans";
  font-style: italic;
  }

.textbox {
margin: auto;
}

a {
font-weight: bold;
}

#request {
padding-top: 20px;
font-style: italic;
font-size: 15px;
line-height: 20px;
margin-bottom: 10px;
color: purple;
}

#dropdown, #number-label, #name-label, #email-label {
  height: 20px;
  width: 510px;
  margin: auto;
  font-size: 15px;
  text-align: left;
  padding-top: 5px;
      }

#experience {
  margin-top: 70px;
  width: 500px;
  display: block; 
  }

#check, #request {
  margin-top: 10px;
  width: 500px;
  display: block; 
  }

select {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 15px;
  text-align: center;
  }

.inline {
width: 50px;
margin-left: 105px;
}

.inline2 {
margin-left: 25px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.