Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Hello guys, I am doing the Survey Form, I have all the requirements to pass the project but I am having a tough time making things more aesthetic in CSS. I am trying to put a background image that looks like the example given by FCC, I tried using a background-image to import an image but it is not showing. Also, any feedback on the code will be taken

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en"></html>
<header><title>Legionnare MMA Survey Form</title>
  <meta charset="UTF 8">
  <link rel="stylesheet" href="styles.css"/>
</header>
<body>
  <h1 id="title">Legionnare MMA Survey Form</h1>
<h2>Thank you for being a valued member</h2>
<p id="description">Your feedback is important to us, as it helps us improve our services and provide you with the best possible experience. Please take a few minutes to complete this survey.</p>
<form action="" method="post" id="survey-form">
  <div>
  <label id="name-label">Name :</label>
   <input id="name" type="text" placeholder="Enter your name" required/>
<label id="email-label">Email :</label>
  <input id="email" type="email" placeholder="Enter your email" required/>
<label id="number-label">Age:</label>
  <input id="number" type="number" min="5" max="90" id="number-label"/ placeholder="Age">
  </div>
  <div>
  <label id="feedback">How satisfied are you with the overall experience?</label>
  <select id="dropdown" name="feedback" required>
    <option value="">(select one)</option>
    <option value="1">Very Dissatisfied</option>
    <option value="2"> Dissatisfied</option>
    <option value="3">Neutral</option>
    <option value="4">Satisfied</option>
    <option value="5">Very Satisfied</option>
  </select>
  </div>
  <div>
    <label>Do you feel that the class schedule meets your needs?</label>
    <label id="yes-label"><input value="yes" type="radio" name="need-type" class="inline" checked/>Yes</label>
    <label id="no-label"><input value="no" type="radio" class="inline" name="need-type"/>No</label>
    <label id="somewhat-label"><input value="somewhat" type="radio" class="inline" name="need-type"/>Somewhat</label>
  </div>
   <div>
      <legend>Which type of classes do you attend regularly?</legend>
      <label id="mma-label">
        <input value="mma" type="checkbox" name="class-type" class="inline" />MMA Classes</label>
      <label id="muay-thai-label">
        <input value="muay-thai" type="checkbox" name="class-type" class="inline"/>Muay-Thai</label>
      <label id="bjj-label">
        <input value="bjj" type="checkbox" name="class-type" class="inline"/>Brazilian Jiu-Jitsu</label>
      <label id="boxing-label">
        <input value="boxing" type="checkbox" name="class-type" class="inline"/>Boxing</label>
      </div>
      <div>
        <label for="box"> Is there anything else you would like to share about your experience at Legionnare MMA Gym?</label>
        <textarea id="box" rows="3" cols="30"></textarea>
      </div>
      <input id="submit" type="submit" value="Submit">
</form>
</body>

/* file: styles.css */
body {
  width:100%;
  height: 100vh;
  margin: 0 auto;
  font-family: sans-serif;
  background-color: rgb(180,0,0);
  text-align: center;
  font-size: 16px;
  color: #f5f6f7;
  display: block;
}

body {
  background-image: url:('C:\Users\leona\Downloads\bjj.jpg');
  background-image: linear-gradient;
}

form {
  width:80vw;
  max-width: 500px;
  min-width:300px;
  margin: 0 auto;
  padding-bottom: 20px;
  background: rgba(0,0,0, 30%);
}

h1,h2,p {
  text-align: center;
  margin: 1em auto;
}

label {
  display: flex;
  margin: 0.5rem 0;
  padding-bottom:0.5em auto;
  padding-top: 2em;
  padding-left: 4.3em;
}

input, textarea, select {
  margin:10px 0 0 0;
  width: 70%;
  min-height: 2em;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

.inline{
  display: inline;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

the image needs to be on the internet, it can’t be on your computer as that is not accessible by the site or anyone else

3

I ran you css body code it has no effect at all, your going to need a background - image linear gradient similar do this:
background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);

4

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