Survey Form - Build a Survey Form

Tell us what’s happening:
hello! I have passed this test, but I am trying to do the fine tuning and elevate my form, on the list of todo’s are to fine tune my input elements, add padding but right now i am trying to get some styling down. for example i have been trying to enter a background image.
when that didn’t work i attempted some linear gradient. I can get a solid color to work, but literally nothing else.
I even copy and pasted someone elses background image link and code and it wont work.
so guru’s… what am i doing wrong?
any tips would be great. thanks.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en"></html>

<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
<h1 id="title"="What Do You Want To Learn About Coding"</h1></head>
<p id="description">Learn More About Coding Survey</p></header><hr></hr>
<fieldset>
  <form id="survey-form">
  <label id="name-label">Name<input id="name" type="text" placeholder="name" required ></label id="name-label">
<label id="email-label">Email<input id="email" type="email" required placeholder="email"></label>
<label id="number-label">Age<input id="number" type="number" min="13" max="120"  placeholder="age"></label>
  <Fieldset>
    <label> Select skill level</label>
    <select id="dropdown" name="experience level">
      <option value="" >Select skill level</option>
      <option value="1"> Beginner</option>
      <option value="2"> Intermediate</option>
      <option value="3">Advanced</option></select>
      </fieldset>

    <fieldset>
<label> What kind of coding languages are you interested in learning?
<label for="Javascript">Javascript</label>
<input id="Javascipt" type="checkbox" name="Javascript" value="Javascript">
<label for="Python">Python</label>
<input id="Python" type="checkbox" name="Python" value="Python">
<label for="Ruby">Ruby</label>
  <input id="Ruby" type="checkbox" name="Ruby" value="Ruby"> 
  <label for="SQL">SQL</label>
<input id="SQL"type="checkbox" name="SQL" value="SQL">
</fieldset>
<label for="camp">Have you used freecodecamp.org</label>
  <input id="yes" type="radio" name="yes-no" value="yes" checked> yes</input>
  <input for="no" type="radio" name="yes-no" value="no"> no</input> 
  <label for="describe"> If yes, describe what your experience was like below:</label><textarea> </textarea>
  <hr></hr>
    <button type="submit" id="submit">Submit</button>
    </form></body>




 
  </body>

/* file: styles.css */
body, html {text-align: center;
font-family: cursive;
font-size: 20px;
background-color: linear-gradient(90deg,grey 50%,black);
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Hello!

You mentioned attempting to add images.
I do not see any img elements in the html code.

Linear-gradient, I believe, can only be used with background property.

Here is an article that will explain linear-gradient better.

Keep up the great progress!

for background image i attempted this:
‘’‘’
body, html {text-align: center;

font-family: cursive;

font-size: 20px;

background-image: url( https://unsplash.com/photos/ruJm3dBXCqw);
}

textarea,button,input,select {background-color:#7FB3D5;}

fieldset {padding:40px;}

textarea {width:400px;

height:100px;}

hr{

height: 10px;

background-color:#21618C;

border:0;

}

fieldset{border-color:#21618C}
‘’‘’‘’``Preformatted text`this is the link, unsure why it isn’t coming across but this is how it is in my code

Thank you for sharing your css code,

Try adding the image within the html code and they styling it within the css code.

This is how I include my images within the project.

As well, it is important to note, if the image is not hosted online to add a link to it, it will not show within our projects.

i tried that, with an <a img href="url"yes?
i tried that and it didn’t work, also, i found another post on here where someone had a background image and i didn’t seen anything unique in their html. i copied their url and it did not come up,
thank you

Here is an article that you may find helpful with the background image problem.

‘’‘’

Background Image <h1 id="title"="What Do You Want To Learn About Coding"

Learn More About Coding Survey


''''''' body{background-image:url(https://img.freepik.com/free-vector/hand-painted-watercolor-background-pink-with-sky-clouds-shape_41066-2077.jpg);

background-size: cover;

}

body, html {text-align: center;

font-family: cursive;

font-size: 20px;

}
‘’‘’‘’

isn’t working. and this is a url i am pulling from this forum from someone who was able to successfully put it as their background image , just for confirmation it wasn’t the url i was trying.Preformatted text

This points to the actual web page not an image so its not going to work

2 Likes

but why is it then when i copy a url that worked from someone elses code not work either

You must have some conflicting styles because it works for me which you can see here

1 Like

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