Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Treehouse Club - MASH MASH - CSS Changing Your Stuff in Your Stylesheet

Posted by Lee Smith
Lee Smith
5,255 Points

Can't change the opacity on the highlight selector to .5. Software is locked up. Signed off and back on, no change.

...

style.css 
/* Body Styling */
body {
  background: blue;
  color: #ccc;
  font-family: Arial;
  font-size: 27px;
  line-height: 1.65px;
  margin: 0 auto;
  padding: 40px 10px;
}

.highlight {
  font-size: 18px;
  line-height: 24px;
  margin-left: 30px;
  opacity: 0.8;
}
index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">
  <link href="normalize.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <title>MASH</title>
</head>

<body>
  <form action="" method="post" id="mash">
    <h1 class="title">MASH</h1>
    <p class="sub-title">Make sure to list five under each category.</p>

    <div class="choice-bucket">
      <h4 class="highlight">What will your profession be?</h4>
      <input name="career[]">
      <input name="career[]">
      <input name="career[]">
      <input name="career[]">
      <input name="career[]">
    </div>

    <div class="choice-bucket">
      <h4 class="highlight">What kind of animal will you have?</h4>
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
    </div>

    <div class="choice-bucket">
      <h4 class="highlight">Where will you live?</h4>
      <input name="location[]">
      <input name="location[]">
      <input name="location[]">
      <input name="location[]">
      <input name="location[]">
    </div>
    <div class="choice-bucket">
      <h4 class="highlight">What kind of car will you have?</h4>
      <input name="car[]">
      <input name="car[]">
      <input name="car[]">
      <input name="car[]">
      <input name="car[]">
    </div>

    <input type="submit" value="Tell My Future">
  </form>

  <div class="answers">
    <h3>You will live in a <span id="home"></span></h3>
    <h3>You will be a <span id="career"></span></h3>
    <h3>You will have a <span id="pet"></span></h3>
    <h3>You will live in <span id="location"></span></h3>
    <h3>You will drive a <span id="car"></span></h3>
  </div>

  </body>
</html>

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

I can't imagine what would cause such an issue, but I did notice that it doesn't look like you've performed that last step yet.

The opacity setting in the code above is still 0.8.

If I try it as is, is passes task 1 and 2 and on task 3 it says: "Bummer: the opacity property of the '.highlight' rule is not 0.5"