Survey Form

freecodecamp Objective: Build an app that is functionally similar to https://survey-form.freecodecamp.rocks. Do not copy this demo project.

by barbrown1996

HTML

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Book Club Signup</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="break">
  </div>
  <div class="bg">
   <h1 id="title">Book Club Signup</h1>
 <p id="description"> Fill out the form below to join the book club.</p>
 </div>
 <form id="survey-form">
   <fieldset>
    <label for="name" id="name-label" class="general-info">Full name: <input type="text" id="name" placeholder="Jane Doe" required/></label>
     <label for="email" id="email-label" class="general-info">Email: <input type="email" id="email" placeholder="[email protected]" required/></label>
     <label for="phone-number" id="phone-number" class="general-info">Phone number (optional for text updates): 
     </label>
       <input type="tel" id="tel" placeholder="678-555-5555"/>
     <label for="number" id="number-label" class="general-info">Number of books read per year: <input type="number" id="number" min="1" max="1000" placeholder="50" class="space"/></label>
  </fieldset>
  <fieldset>
    <legend for="interest" class="interest">What are you interested in doing in this book club? (Select all that apply.)
    </legend>
      <div class="col space">
        <span class="span-col">
          <input class="inline"  type="checkbox" value="challenges"/>
          <label for="interest" >
            Challenges 
          </span>
          </label>
          <span class="span-col">
            <input class="inline"  type="checkbox" value="buddyreads"/>
          <label for="interest" >Buddy Reads 
          </label>
        </span>
      </div>
      <div class="col-2">
        <span class="span-col">
          <input class="inline" type="checkbox" value="groupreads"/>
          <label for="interest" >Group Reads 
          </label>
        </span>
        <span class="span-col">
          <input class="inline"  type="checkbox" value="bookexchange"/>
          <label for="interest" >Book Exchange 
          </label>
       ...

CSS

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  color: #2BAB65;
  font-family: Poppins;
  font-size: 16px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(https://images.unsplash.com/photo-1588666309990-d68f08e3d4a6?q=80&w=1885&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
};

body::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%; 
  z-index: -1;
  background-color: #084A25;
}

form {
  background: rgba(6, 53, 27, .8);
  margin: -50px auto 0;
  padding: 10px 20px;
  width: 800px;
  font-size: 18px;
  border-radius: 0 0 8px 8px;
}

.break {
  padding-bottom: 35px;
}

.bg {
  text-align: center;
  margin: 50px auto;
  width: 840px;
  padding: 5px 0 50px;
  opacity: 80%;
  background-color: #06351B;
  border-radius: 8px 8px 0 0;
}

p {
  margin-bottom:-5px;
}

h1 {
  font-family: PT Serif;
  font-size: 42px;
  letter-spacing: 3px;
  font-weight: 600px;
  margin-top: 1em;
  margin-bottom: 10px;
}

.general-info {
  margin-bottom: 5px;
  display: block;
  padding-top:15px;
}

fieldset:first-of-type {
  display: block;
  margin: 0.5rem 0;
}

fieldset {
  margin-bottom:20px;
  border-radius: 4px;
  border-color: #2C8F57;
  border-style: solid;
}

.col {
  float: left;
  display:grid;
  margin: 0 -50px 0 150px;
  width: 400px;
}

.space {
  margin-bottom: 10px;
}

#genres, #dropdown {
  margin-top: 10px;
}

.span-col, .terms-col {
  display: block;
  margin-top: 10px;
}

.terms-col {
  margin-top:40px;
}

.col-2 {
  display:grid;
}

input, textarea {
  background-color: #2C8F57;
  border: 1px solid #2C8F57;
  color: #ffffff;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  height: 2em;
  max-width: 100%;
  border-radius: 4px;
}

select {
  background-color: #2C8F57;
  color: #fff;
}

select:hover {
  background-color: #6DDD9E;
  box-shadow: 0 0 10px 100px #6DDD9E...