I found an image that I want to use for my background. I know how to write the code for the image but how do I actually use the image? it’s currently on my desktop.
Or does the project want me to get fancy with css gradients and colors for my background?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form></title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help is improve the platform</p>
<div>
<form id="survey-form" method="post">
<label class="upper" for="name-label">Name</label>
<input id="name-label" name="name-label" type="text" placeholder="Enter your name"/>
<label class="upper" for="email-label">Email</label>
<input id="email-label" name="email-label" type="email" placeholder="Enter your email"/>
<label class="upper" for="number-label">Age (optional)</label>
<input id="number-label" name="number-label" type="number" min="5" max="120"/>
<label for="dropdown">Which option best describes your current role?
<select id="dropdown" name="dropdown"/>
<option value="">Select current role</option>
<option value="1">Full time Job</option>
<option value="2">Full Time Learner</option>
<option value="3">Prefer not to say</option>
<option value="4">Other</option>
</select></label>
<label>Would you recommend freeCodeCamp to a friend?</label>
<label for="def"><input id="def" name="recommend" type="radio" value="Definitely"/> Definitely</label>
<label for="maybe"><input id="maybe" name="recommend" type="radio" value="Maybe"/> Maybe</label>
<label for="not_sure"><input id="not_sure" name="recommend" type="radio" value="Not Sure"/> Not Sure</label>
<label>What is your favorite feature of free code camp?<select id="feature" name="feature">
<option value="">Select an Option</option>
<option value="1">Challenges</option>
<option value="2">Projects</option>
<option value="3">Community</option>
<option value="4">Open Sources</option>
</select></label>
<label>What would you like to see improved? (Check all that apply)</label>
<label for="front"><input id="front" name="front" type="checkbox" value="Front-end Projects"/> Front-end Projects</label>
<label for="back"><input id="back" name="back" type="checkbox" value="Back-end Projects"/> Back-end Projects</label>
<label for="data"><input id="data" name="data" type="checkbox" value="Data Visualization"/> Data Visualization</label>
<label for="challenge"><input id="challenge" name="challenge" type="checkbox" value="Challenges"/> Challenges</label>
<label for="open"><input id="open" name="open" type="checkbox" value="Open Source Communities"/> Open Source Communities</label>
<label for="gitter"><input id="gitter" name="gitter" type="checkbox" value="Gitter Help Rooms"/> Gitter Help Rooms</label>
<label for="video"><input id="video" name="video" type="checkbox" value="Videos"/> Videos</label>
<label for="city"><input id="city" name="city" type="checkbox" value="City Meetups"/> City Meetups</label>
<label for="wiki"><input id="wiki" name="wiki" type="checkbox" value="Wiki"/> Wiki</label>
<label for="forum"><input id="forum" name="forum" type="checkbox" value="Forum"/> Forum</label>
<label for="course"><input id="course" name="course" type="checkbox" value="Additional Courses"/> Additional Courses</label>
<label for="comments">Any comments or suggestions?<textarea id="comments" name="comments" rows="10" columns="30" placeholder="Enter Your Comments Here"></textarea></label>
<input type="submit" id="submit" value="Submit"/>
</form>
</div>
</body>
</html>
/* file: styles.css */
label {
display: block;
}
div {
background-color: navy;
}
body {
color: white;
font-family: sans-serif;
background-image: url("fcc.jpeg");
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
