My css styling is not effective on the preview of my project

Tell us what’s happening: My css styling is not working on the preview of my code

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="survey.css" />
    <title>Survey Form</title>
  </head>
  <body>
    <section class="container">
      <h1 id="title">freeCodeCamp Survey Form</h1>
      <p id="description">
        Thank you for taking the time to help us improve the platform
      </p>
      <form action="" id="survey-form">
        <div class="form-group">
          <label for="name" id="name-label">Name</label>
          <input
            type="text"
            name="name"
            id="name"
            class="form-control"
            placeholder="Enter your name"
            required
          />
        </div>

        <div class="form-group">
          <label for="email" id="email-label">Email</label>
          <input
            type="email"
            name="email"
            id="email"
            class="form-control"
            placeholder="Enter your Email"
            required
          />
        </div>

        <div class="form-group">
          <label for="number" id="number-label"
            >Age <span>(optional)</span></label
          >
          <input
            type="number"
            name="age"
            id="number"
            class="form-control"
            min="10"
            max="100"
            placeholder="Age"
          />
        </div>

        <div class="form-group">
          <p>Which option best describes your current role?</p>
          <select name="dropdown" id="dropdown" class="form-control">
            <option value="Select current role" disabled selected value>
              Select current role
            </option>
            <option value="Student">Student</option>
            <option value="job">Full Time Job</option>
            <option value="Learner">Full Time Learner</option>
            <option value="preference">Prefer not to say</option>
            <option value="Other">Other</option>
          </select>
        </div>
        <div class="form-group">
          <p>Would you recommend freeCodeCamp to a friend?</p>

          <input
            type="radio"
            name="recommendation"
            id="definitely"
            value="definitely"
            class="input-radio"
          />
          <label for="definitely">Definitely</label><br />

          <input
            type="radio"
            name="recommendation"
            id="maybe"
            value="maybe"
            class="input-radio"
          />
          <label for="maybe">Maybe</label><br />

          <input
            type="radio"
            name="recommendation"
            id="not-sure"
            value="not-sure"
            class="input-radio"
          />
          <label for="not-sure">Not sure</label>
        </div>

        <div class="form-group">
          <p>What is your favorite feature of freeCodeCamp?</p>
          <select name="favorite" id="favorite" class="form-control">
            <option value="select" disabled selected value>
              Select an option
            </option>
            <option value="Challenges">Challenges</option>
            <option value="Community">Community</option>
            <option value="Projects">Projects</option>
          </select>
        </div>

        <div class="form-group">
          <p>
            What would you like to see improved?
            <span>(Check all that apply)</span>
          </p>
          <input
            type="checkbox"
            name="project"
            id="front-end"
            value="front-end"
            class="input-checkbox"
          />
          <label for="front-end">Front-end Projects</label><br />

          <input
            type="checkbox"
            name="project"
            id="back-end"
            value="back-end"
            class="input-checkbox"
          />
          <label for="back-end" class="back">Back-end Projects</label><br />

          <input
            type="checkbox"
            name="projects"
            id="data"
            value="data-visualization"
            class="input-checkbox"
          />
          <label for="data">Data Visualization</label>
        </div>

        <div class="form-group">
          <label for="comment">Any comments or suggestions? </label>
          <textarea
            name="comment"
            id="comment"
            cols="30"
            rows="10"
            value=""
            placeholder="Enter your comment here"
            class="text-control"
          ></textarea>
        </div>

        <div class="form-group">
          <button>Submit</button>
        </div>
      </form>
    </section>
  </body>
</html>


@import url("https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap");

body {
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  line-height: 1.4;
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.6)
    ),
    url(https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80);
  background-size: contain;

  background-position: center;
  font-size: 1rem;
  background-attachment: fixed;
  font-weight: 400;
  margin: 0;
  color: white;

  width: 100%;
}

#title,
#description {
  text-align: center;
}

#title {
  font-size: 2rem;
  font-weight: 400;
  margin-top: 50px;
  margin-bottom: 0;
}

#description {
  margin-bottom: 1.5rem;
  margin-top: 0;
  font-size: 1.2rem;
  font-style: italic;
}

#survey-form {
  background-color: rgba(7, 7, 80, 0.7);
  width: 50%;
  margin-left: auto;
  margin-right: auto;

  border-radius: 0.35rem;
}

.form-group {
  width: 80%;
  margin: auto;
  padding-top: 2rem;
  line-height: 2.5rem;
  font-size: inherit;
}

.form-control {
  display: block;
}

.form-group p {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 2px;
}

label {
  font-size: 1.2rem;
  letter-spacing: 2px;
}

.form-control {
  font-size: 17px;
  width: 100%;
  height: 40px;
  border-radius: 0.3rem;
  box-shadow: 2px 3px 0.7em 0.1em rgb(0, 0, 163);
  outline: none;
  transition: border 0.15s ease-in-out, box-;
  color: #495057;
  border: 1px solid #ced4da;
  box-sizing: border-box;
  padding-left: 12px;
}
.form-control:focus {
  border: solid 4px #265ba5;
}

.text-control {
  width: 100%;
  font-size: 17px;
  color: #495057;
  padding-left: 12px;
}

.input-checkbox,
.input-radio {
  transform: scale(1.5, 1.5);
}

input[type="radio"] + label {
  padding-left: 10px;
}

input[type="checkbox"] + label {
  padding-left: 10px;
}

button {
  width: 100%;
  height: 50px;
  margin-bottom: 50px;
  background-color: #33b3a2;
  font-size: 1.4rem;
  color: #fff;
  outline: none;
  border: none;
}

button:hover {
  cursor: pointer;
}


Your browser information:

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

Challenge: Build a Survey Form

Link to the challenge:

Hi, href needs styles.css

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