Survey Form - Build a Survey Form

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

Missing a matching quote here

1 Like

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

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

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

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;
}

What its supposed to look like

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

<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>

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

: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