Need help with: the 4th objective in: enhancing-the-design-with-css/text-shadows-and-box-shadows.

Question

I have tried to write the code to: [Just like the text-shadow property the box-shadow can take multiple comma-seperated values to add additional shadows to the same element.

Let's give .main-header an inner-shadow with a second set of box-shadow values. Set the new shadow's horizontal and vertical offsets to 0, the blur radius to 60px, the spread radius to 5px, and the color to firebrick. Don't forget to include the keyword value that creates an inner box shadow.] without success. I thought using the MDO 3D Text Shadows would work: text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); but I was still incorrect.

Thank you.

style.css

/* Complete the challenge by writing CSS below */

.main-heading {
    text-shadow: 0 0 5px #be7b31; 
}

.title {
    text-shadow: 1px 3px 0 #e59740;
}

.main-header {
    box-shadow: 0 2px 15px #aaa; 
}

.main-header {
    box-shadow: inset 0 0 60px 5px firebrick,
              inset 0 1px 61px 6px red;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>

Answer 1 · 2018-08-30T16:15:34Z

August 30, 2018 4:15pm

Hi Martha Brown,

I don't think your answer is really wrong. But it would be cleaner and best practice to add the 4th objective box-shadows to the third objective css statement. See they are the same. So you will get a .main-header selector with a box-shadow that has three comma seperated values. I think the Treehouse code check isn't able to confirm the code this way.

Let me know if it isn't clear.

Kind Regards.

Answer 2 · 2018-08-30T18:40:15Z

August 30, 2018 6:40pm

Thank you so much Theo for your help. This is my first time posting so it is kind of scary for me as I am pretty new to coding. I am in a track where I only have until 8/31/18 to compete for a Treehouse scholarship so your help is so appreciated. I will try the objective later today.

Kind regards to you too.

Welcome to the Treehouse Community

Looking to learn something new?

Martha Brown

Martha Brown

Need help with: the 4th objective in: enhancing-the-design-with-css/text-shadows-and-box-shadows.

2 Answers

theodevries

theodevries

Martha Brown

Martha Brown

Martha Brown

Martha Brown