Barron V Brock survey form v2

barron-v-brock-survey-form-v2.markdown

Barron V Brock survey form v2

A Pen by Barron M Brock on CodePen.

License.

index.html

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

<div id="header-box" class="text-center container header-box">
  <header>
    <h1 id="title">Survey Form<h1>
    <p  id="description">Just a free code camp survey </p>
  </header>
  <form id="survey-form"> 
      <div class="row">
          <div class="contact-margin col-5">
            <div class="block">
                <div class="label">
                    <label id="name-label" for="name">* Name: </label>
                </div>
                <input type="text" placeholder="Name" id="name"  required>
            </div>
            <div class="block">
                <div class="label">
                    <label id="email-label" for="email">* Email: </label>
                </div>
                <input type="email" placeholder="Email" id="email"  required>
            </div>
            <div class="block">
                <div class="label">
                  <label id="number-label" for="number">* Level of Ispum</label>
                </div>  
                <input type="number" placeholder="5" min="1" max="5" id="number">
            </div>
            <div class="block">
                <div class="label">
                  <label id="gender" for="dropdown">* Gender</label>
                </div>  
                <select id="dropdown" name="male-or-female" required>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>  
            </div>
            <div class="block">
               <label><input 
               type="radio" name="Ispum" value="ispum" checked>
               Ispum</label>
               <label><input 
               type="radio" name="Ispum" value="lorum">
               Lorum</label>
               <label><input 
               type="radio" name="Ispum" value="dolor">
               Dolor</label>
            </div>
            <div class="block">
                 <input type="checkbox" id="sit" name="chck-bx"
               value="sit" checked />
                 <label for="sit">Sit</label>
                 <input type="checkbox" id="amet" name="chck-bx"
               value="amet" />
                 <label for="amet">Amet</label>
                 <input type="checkbox" id="tritani" name="chck-bx"
               value="tritani" />
                 <label for="tritani">Tritani</label>
            </div>  
            <div class="block">
                <textarea id="consectetur" rows"5" cols"10" placeholder="Consectetur?"></textarea>
            </div>
            <div class="block">
                <button id="submit" class="btn btn-primary" type="submit">
                    <i class="fa fa-paper-plane">
                </i>Submit</button>
            </div>  
          </div>  
      </div> 
  </form>
   
</div>
<footer class="linear-gradient text-center"> &copy Made By Barron V Brock </footer>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.header-box{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom:50px;
    padding:15px;
    box-shadow:0px 12px 15px grey; 
    background:linear-gradient(#e66465, #9198e5);  
}

.block{
  display: block;
}

.linear-gradient{
  background:linear-gradient(#e66465, #9198e5);
}

.contact-margin{
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;;
}

.label{
   display: inline-block;
   text-align: right; 
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />