Opacity issue on the 2nd website

Tell us what’s happening:
Well i want my box content to have an opcaity of 0.5
but the box inside it to have an opacity of 1
i looked on google and then tell me to add a div element just after the one saying that you have a 0.5 opacity.
But it doesnt work

Your code so far
html :

-->
<main>
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <h2 id="description">Thank you for taking the time to help us improve the platform</h2>
  <div id="content">
    <div style="opacity:1.0;">
    <form id="survey-form">
      <div id="name">
        <label id="name-label">Name</label>
        <input type="text" placeholder="  Enter your name" class="input-head">
      </div>
      <div id="email">
        <label id="email-label">Email</label>
        <input type="text" placeholder="  Enter your Email" class="input-head">
      </div>
      <div id="number">
        <label id="number-label">Age&#40;optional&#41;</label>
        <input type="text" placeholder="  Age" class="input-head">
      </div>
      <div id="dropdown-option">
        <label id="dopdown-option-label">Which option best describes your current role?</label>
        <select id="dropdown-option-select" name="dropdown-option-name">
          <option value="Select current role" selected disabled>Select current role</option>
          <option value="Student">Student</option>
          <option value="Full Time Job">Full TIme Job</option>
          <option value="Full Time Learner">Full Time Learner</option>
          <option value="Prefer not to say">Prefer not to say</option>
          <option value="Other">Other</option>
         </select>
        </div>
      <div id="recommendation">
        <label id="recommendation-label">
          Would you recommend freeCodeCamp to a friend?</label>
        <input type='radio' id='definitely' name='radio-recommendation' checked><label for="definitely" id="definitely-label">Definitely</label>
        <input type='radio' id='maybe' name='radio-recommendation'><label for="maybe" id="maybe-label">Maybe</label>
        <input type='radio' id='not-sure' name='radio-recommendation'><label for="not-sure" id="not-sure-label">Not sure</label>
      </div>
      <div id="dropdown-feature">
        <label id="dropdown-feature-label">What is your favorite feature of freeCodeCamp?</label>
        <select id="dropdown-feature-select" name="dropdown-feature-name">
          <option value="Select an option" selected disabled>Select an option</option>
          <option value="Challenges">Challenges</option>
          <option value="Projects">Projects</option>
          <option value="Community">Community</option>
          <option value="Open Source">Open Source</option>
         </select>
       </div>
      <div id="improvement">
        <label id="improvement-label">What would you like to see improved? (Check all that apply)</label>
        <input type="checkbox" id="front-end-projects" name="improvement-box" value="front-end-projects"><label for="front-end-projects" class="improvement-box-label">Front-end Projects</label>
        <input type="checkbox" id="back-end-projects" name="improvement-box" value="back-end-projects"><label for="back-end-projects" class="improvement-box-label">Back-end Projects</label>
        <input type="checkbox" id="data-visualization" name="improvement-box" value="data-visualization"><label for="data-visualization" class="improvement-box-label">data-visualization</label>
        <input type="checkbox" id="challenges" name="improvement-box" value="challenges"><label for="challenges" class="improvement-box-label">Challenges</label>
        <input type="checkbox" id="open-source-community" name="improvement-box" value="open-source-community"><label for="open-source-community" class="improvement-box-label">Open Source Community</label>
        <input type="checkbox" id="gitter-help-rooms" name="improvement-box" value="gitter-help-rooms"><label for="gitter-help-rooms" class="improvement-box-label">Gitter help rooms</label>
        <input type="checkbox" id="videos" name="improvement-box" value="videos"><label for="videos" class="improvement-box-label">Videos</label>
        <input type="checkbox" id="city-meetups" name="improvement-box" value="city-meetups"><label for="city-meetups" class="improvement-box-label">City Meetups</label>
        <input type="checkbox" id="wiki" name="improvement-box" value="wiki"><label for="wiki" class="improvement-box-label">Wiki</label>
        <input type="checkbox" id="forum" name="improvement-box" value="forum"><label for="forum" class="improvement-box-label">Forum</label>
        <input type="checkbox" id="additional-courses" name="improvement-box" value="additional-courses"><label for="additional-courses" class="improvement-box-label">Additional Courses</label>
      </div>
      <div id="comment">
        <label id="comment-label">Any comments or suggestions?</label>
        <textaera id="textaera" name="textaera"><input type='text' placeholder="Enter your comment here">
          </textaera>
      </div>
      <div id="submit">
        <button type="submit" id="button-submit">Submit</button>
      </div>
    </form>
    </div>
  </div>
</main>```
css ```main {
  color: white;
  background-image: url(https://www.marchesaintpierre.com/2064-large_default/tulle-uni-bleu-roi.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  font-family: sans-serif;
}

#title {
  text-align: center;
  font-weight: 500;
  letter-spacing: 1px;
  padding-top: 35px;
  font-size: 31px;
}

#description {
  text-align: center;
  font-size: 18px;
  font-weight: 10;
  font-style: italic;
}

#content {
  background-color:	#000066;
  margin-right:25%;
  margin-left:25%;
  border-radius:5px;
  opacity:0.5;
}


#name,#email,#number {
  display:flex;
  flex-direction:column;
  margin-right:7%;
  margin-left: 7%;
  padding-top: 30px;
}

#name-label,#email-label,#number-label {
  font-family: verdana;
  font-size: 18px;
}

.input-head {
  margin-top: 10px;
  border-radius: 5px;
  height: 35px;
}```

**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36</code>.

**Challenge:** Build a Survey Form

**Link to the challenge:**
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form

Hello

From what I understand what you want to do is to set the opacity of the box to 0.5 and the things inside it (Name, Email, etc. with their respective input fields) to opacity 1.0.

If that is what you are trying to achieve, I could get it to work by using rgba instead of opacity for your #content, like this:

#content {
  background-color:	rgba(0, 0, 102, 0.5);
  margin-right:25%;
  margin-left:25%;
  border-radius:5px;
}

Using opacity in both wasn’t able to go over the #content’s opacity (only get to the same level), I suppose because the box was a child element for it.
I hope this helps.

1 Like