Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

The is CSS not working but works on other sites like code pen it does! The Test is passed already im just doing CSS and nothing at all is changing when trying to edit and I Dont want to start from scratch :disappointed_relieved:

Your code so far

<html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <div class="head" id="head">
  <h1 id="title" class="center-text">
    Nelts Survey
  </h>
   <p id="description">This survey site is a test page </p>
  </div>
  
  <body>
    
    <div class="survey-main">
      <form id="survey-form">
         <div class="name-form">
           <label id="name-label" for="name">Name:</label>
        <input 
               id="name"
               type="name"
               class="form-control"
               placeholder="Enter Your Name" required/>
           </div>
           
       <div class="email-form">   
         <label for="email" id="email-label">Email:</label>
        <input id="email"
               type="email"
               class="form-control"
               placeholder="Enter Your Email" required/>
         </div>
           
         <div class="number-form">
           <label for="number" id="number-label">Number:</label>
           <input id="number"
               type="number"
               class="form-control"
               placeholder="Enter Your Number" min="0000000000" max="9999999999" required/>
            </div>
        <div class="drop-p" id="drop-p">
          <p><b>Select Game</p>
          </div>
        <div class="drop" id="drop"
             styles="width:200px;">
          <select id="dropdown">
            <option value="0">Select</option>
            <option value="1">Minecraft</option>
            <option value="2">Call Of Duty</option>
            <option value="3">Apex</option>
            <option value="4">Fortnite</option>
            <option value="5">OTHER</option>
          </select>
        </div>
        <div class="radio-head">
          <p id="pick">Pick A Color</p>
        </div>
      <div class="radio-div" id="radio-div">
    <div class="radio-1" id="radio-1"><input id="Black" type="radio" value="Black" name="Movie">Black</input></div>
      <div class="radio-2" id="radio-2"><input id="White" type="radio" value="White" name="Movie">White</input></div>
      <div class="radio-3" id="radio-3"><input id="Green" type="radio" value="Green" name="Movie">Green</input></div>
      <div class="radio-4" id="radio-4"><input id="Blue" type="radio" value="Blue" name="Movie">Blue</input></div>
      <div class="radio-5" id="radio-5"><input id="Grey" type="radio" value="Grey" name="Movie">Grey</input></div>
      </div>
<br>
       <div class="submit-button">
         <button type="submit" id="submit">Submit</button>
       </div>

        <div class="checkbox-main">
          <label id="check-header">Pick A Animal</label>
          <input id="dog" type="checkbox" name="Animal" value="dog">Dog</input>
          <input id="cat" type="checkbox" name="Animal" value="cat">Cat</input>
          <input id="bear" type="checkbox" name="Animal" value="bear">Bear</input>
        </div>
<div class="text-div">
  <label id="text-head"> About Yourself</label>
  <br>
  <textarea id="textarea" name="about" rows="15" cols="70">
    
  </textarea>
</div>
           
      </form>
    </div>
  </body>
</html>


@import url("https://fonts.googleapis.com/css?family=Audiowide");
@import url("https://fonts.googleapis.com/css?family=Cinzel|Fauna+One");
@import url("https://fonts.googleapis.com/css?family=Black+Ops+One");
@import url("https://fonts.google.com/specimen/Boogaloo");
@import url("https://fonts.googleapis.com/css?family=Quantico");
@import url("https://fonts.google.com/specimen/Neonderthaw");
@import url(https://fonts.google.com/css2?family=Nunito");
body {
  background: url(https://sportsfacilities.com/wp-content/uploads/2018/11/gamingtournament.jpg) center fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
h1 {
  text-align: center;
  font-family: Cinzel, serif;
}
p {
  font-family: "Audiowide", sans-serif;
  position: relative;
  top: 100px;
  z-index: 10;
  color: #48C9B0;
  
}
form {
 align-items: center;
  position: ;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: blue;
    height: 750px;
    width: 790px;
  border-radius: 0.5%;
  opacity: .92;
  margin: 0 auto 1.25rem auto;
  padding: 2.5rem;
  display: 
}
.form-control {
  font-family: Cinzel, serif;
  background-color: pink;
  display: relative;
  width: 100%;
  height: 2.37rem;
  padding: 0.375rem .75rem;
  background-color: #fff;
  border: none;
  text-align: center;
  margin-top: 40px;
  border-radius: 15px 50px;
  box-shadow: 0 5px 10px #B03A2E;
}
form {
  background: #260439;
  padding: 5.5rem 3.6rem;
  border-radius: 2.25em;
  position: relative;
  padding-bottom: 40rem;
}
.drop {
  position: absolute;
  font-family: Audiowide;
  top: px;
  left: 29.3%;
  transform: translate(-1%, 50%);
}
.drop select {
  color: white;
  background-color: darkgrey;
  padding: px;
  border: none;
  width: 820px;
  box-shadow: 0 5px 10px #37C6FC;
  outline: none;
  appearance: button;
  -webkit-appearance: button;
  left: -200px;
  position: relative;
}
.drop::before {
  content: "";
  
}
select {
  color: ;
  background: lightblue;
  text-align: center;
  font-family: Black Ops One;
  font-size: 15px;
  height: 25px;
  width: 100px;
}
#dropdown {
 display: ;
}
.drop-p {
  color: #C487E5;
  text-decoration: underline #F1C40F;
  text-align: center;
  position: relative;
  top: -95px;
}
.radio-div {
  font-family: Quantico;
  background: url();
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  height: 35%;
  position: relative;
  top: 75px;
  left: ;
  text-align: left;
}
.radio-head {
  color: #C487E5;
  text-align: left;
  position: relative;
  top: -30px;
  font-size: px;
  width: px;
  background: ;
  text-decoration: underline #F9EE12;
}
.name-form {
  background: ;
  font-size: 25px;
  text-decoration: ;
  position: relative;
  left: 0px;
  top: px;
}
#name-label {
  background: ;
  font-size: 25px;
  font-family: ;
  position: relative;
  top: 45px;
  color: Grey;
}
#email-label {
  position: relative;
  font-size: 25px;
  top: 45px;
  color: Grey;
}
#number-label {
  top: 45px;
  position: relative;
  font-size: 25px; 
  color: Grey;
}
#number-control {
  font-size: 23px;
  position: relative;
  top: px;
}
#survey-form {
  background: ;
  display: relative;
  left: px;
}
.survey-main {
  font-family: Audiowide;
  background: ;
  text-align: ;
  padding-top: %;
  color: Grey;
  }
#submit {
  font-family: Audiowide;
  background: white;
  font-size: 13px;
  color: Black;
  position: relative;
  top: 590px;
  left: 650px;
  width: 20%;
  box-shadow: 0 5px 10px #37C6FC;
  border: none;
  border-radius: 1%;
}
@media (max-height: 00px) {
  body {
    position: ;
    text-align: ;
    top: px;
    color: white;
  }
#pick {
  background: ;
  position: relative;
  width: ;
  text-decoration: underline #F9EE12;
}
}
.checkbox-main {
  display: grid;
  position: relative;
  top: 80px;
  }
#check-header {
  color: #48C9B0;
  text-decoration: underline #F9EE12;
  top: -15px;
  position: relative;
}
#title {
  color: #f5fcf9;
  background: ;
  text-decoration: ;
}
.text-div {
  position: relative;
  top: 150px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

Missing a matching quote here

1 Like
3

jeez how do you guys find these things in all the code its always 1 character missing for me that makes it not work lol

4

i dont think that worked my css is still a all blank page with just the html text

5

Look through your css again because you have a lot of invalid styles like the one above. You have position but then you never give a position to use. Thats an example, but there’s a lot more invalid stuff goin on

6

cleaned up most might have 1 or 2 hidden in there but still same issue, css during that entire process didn’t update change or flicker even once. even when changing valid code

@import url("https://fonts.googleapis.com/css?family=Audiowide");
@import url("https://fonts.googleapis.com/css?family=Cinzel|Fauna+One");
@import url("https://fonts.googleapis.com/css?family=Black+Ops+One");
@import url("https://fonts.google.com/specimen/Boogaloo");
@import url("https://fonts.googleapis.com/css?family=Quantico");
@import url("https://fonts.google.com/specimen/Neonderthaw");
@import url("https://fonts.google.com/css2?family=Nunito");
body {
  background: url(https://sportsfacilities.com/wp-content/uploads/2018/11/gamingtournament.jpg) center fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
h1 {
  text-align: center;
  font-family: Cinzel, serif;
}
p {
  font-family: "Audiowide", sans-serif;
  position: relative;
  top: 100px;
  z-index: 10;
  color: #48C9B0;
  
}
form {
 align-items: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: blue;
    height: 750px;
    width: 790px;
  border-radius: 0.5%;
  opacity: .92;
  margin: 0 auto 1.25rem auto;
  padding: 2.5rem;
}
.form-control {
  font-family: Cinzel, serif;
  background-color: pink;
  display: relative;
  width: 100%;
  height: 2.37rem;
  padding: 0.375rem .75rem;
  border: none;
  text-align: center;
  margin-top: 40px;
  border-radius: 15px 50px;
  box-shadow: 0 5px 10px #B03A2E;
}
form {
  background: #260439;
  padding: 5.5rem 3.6rem;
  border-radius: 2.25em;
  position: relative;
  padding-bottom: 40rem;
}
.drop {
  position: absolute;
  font-family: Audiowide;
  left: 29.3%;
  transform: translate(-1%, 50%);
}
.drop select {
  color: white;
  background-color: darkgrey;
  border: none;
  width: 820px;
  box-shadow: 0 5px 10px #37C6FC;
  outline: none;
  appearance: button;
  -webkit-appearance: button;
  left: -200px;
  position: relative;
}
.drop::before {
  content: "";
  
}
select {
  background: lightblue;
  text-align: center;
  font-family: Black Ops One;
  font-size: 15px;
  height: 25px;
  width: 100px;
}
#dropdown {
}
.drop-p {
  color: #C487E5;
  text-decoration: underline #F1C40F;
  text-align: center;
  position: relative;
  top: -95px;
}
.radio-div {
  font-family: Quantico;
  background: url();
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  height: 35%;
  position: relative;
  top: 75px;
  text-align: left;
}
.radio-head {
  color: #C487E5;
  text-align: left;
  position: relative;
  top: -30px;
  text-decoration: underline #F9EE12;
}
.name-form {
  font-size: 25px;
  position: relative;
  left: 0px;
}
#name-label {
  font-size: 25px;
  font-family: ;
  position: relative;
  top: 45px;
  color: Grey;
}
#email-label {
  position: relative;
  font-size: 25px;
  top: 45px;
  color: Grey;
}
#number-label {
  top: 45px;
  position: relative;
  font-size: 25px; 
  color: Grey;
}
#number-control {
  font-size: 23px;
  position: relative;
}
#survey-form {
  display: relative;
}
.survey-main {
  font-family: Audiowide;
  color: Grey;
  }
#submit {
  font-family: Audiowide;
  background: white;
  font-size: 13px;
  color: Black;
  position: relative;
  top: 590px;
  left: 650px;
  width: 20%;
  box-shadow: 0 5px 10px #37C6FC;
  border: none;
  border-radius: 1%;
}
@media (max-height: 00px) {
  body {
  
    color: white;
  }
#pick {
  position: relative;
  text-decoration: underline #F9EE12;
}
}
.checkbox-main {
  display: grid;
  position: relative;
  top: 80px;
  }
#check-header {
  color: #48C9B0;
  text-decoration: underline #F9EE12;
  top: -15px;
  position: relative;
}
#title {
  color: #f5fcf9;
}
.text-div {
  position: relative;
  top: 150px;
}
7

What its supposed to look like

8

Where is your link in the html to connect to the css file? And theres still a text-decoration style with no value

You also have a #dropdown selector with no styles in just as an fyi

9 
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <div class="head" id="head">
  <h1 id="title" class="center-text">
    Nelts Survey
  </h>
   <p id="description">This survey site is a test page </p>
  </div>
  
  <body>
    
    <div class="survey-main">
      <form id="survey-form">
         <div class="name-form">
           <label id="name-label" for="name">Name:</label>
        <input 
               id="name"
               type="name"
               class="form-control"
               placeholder="Enter Your Name" required/>
           </div>
           
       <div class="email-form">   
         <label for="email" id="email-label">Email:</label>
        <input id="email"
               type="email"
               class="form-control"
               placeholder="Enter Your Email" required/>
         </div>
           
         <div class="number-form">
           <label for="number" id="number-label">Number:</label>
           <input id="number"
               type="number"
               class="form-control"
               placeholder="Enter Your Number" min="0000000000" max="9999999999" required/>
            </div>
        <div class="drop-p" id="drop-p">
          <p><b>Select Game</p>
          </div>
        <div class="drop" id="drop"
             styles="width:200px;">
          <select id="dropdown">
            <option value="0">Select</option>
            <option value="1">Minecraft</option>
            <option value="2">Call Of Duty</option>
            <option value="3">Apex</option>
            <option value="4">Fortnite</option>
            <option value="5">OTHER</option>
          </select>
        </div>
        <div class="radio-head">
          <p id="pick">Pick A Color</p>
        </div>
      <div class="radio-div" id="radio-div">
    <div class="radio-1" id="radio-1"><input id="Black" type="radio" value="Black" name="Movie">Black</input></div>
      <div class="radio-2" id="radio-2"><input id="White" type="radio" value="White" name="Movie">White</input></div>
      <div class="radio-3" id="radio-3"><input id="Green" type="radio" value="Green" name="Movie">Green</input></div>
      <div class="radio-4" id="radio-4"><input id="Blue" type="radio" value="Blue" name="Movie">Blue</input></div>
      <div class="radio-5" id="radio-5"><input id="Grey" type="radio" value="Grey" name="Movie">Grey</input></div>
      </div>
<br>
       <div class="submit-button">
         <button type="submit" id="submit">Submit</button>
       </div>

        <div class="checkbox-main">
          <label id="check-header">Pick A Animal</label>
          <input id="dog" type="checkbox" name="Animal" value="dog">Dog</input>
          <input id="cat" type="checkbox" name="Animal" value="cat">Cat</input>
          <input id="bear" type="checkbox" name="Animal" value="bear">Bear</input>
        </div>
<div class="text-div">
  <label id="text-head"> About Yourself</label>
  <br>
  <textarea id="textarea" name="about" rows="15" cols="70">
    
  </textarea>
</div>
           
      </form>
    </div>
  </body>
</html>
10

Still dont see your link to the css file. Do you know how to do that?

11

:skull::skull::pensive: I can do all of that css but cant remember to link the file :skull::skull: Thanks :palms_up_together: lots of practice left to go for me

1 Like
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.