Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge | Сolors and Background
Introduction to CSS Part II

Challenge

Note

You can write the code in the styles.css file of the following sandbox. To see the rendered page, drag it from the right edge of a sandbox window.

Task

In this task, you will work with the various formats of color available and how background properties can be set in HTML and CSS. Following are the tasks that you need to perform on the given code:

  1. Add an HSL color to the heading with 184 as hue, 50% saturation, and 100% lightness.
  2. Add the same color but with an opacity(alpha) set to 0.2 for the header as a background color.
  3. For nav, create a linear gradient as a background. It should fade from the color #ffd7b5 on the left to #ffa400 on the right.
  4. For a link in the nav, on hover, change the text color to #ff8a00 and the background color white with an opacity set to 0.4.
    Note! To change the appearance of a link on hover, use the a: hover selector.
  5. Set the background color of the footer to #ebecf0.
  6. For the div with the 'codefinity' class, set the background image to a url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/35fdd0a9-2b4b-4032-9ac4-3d848aa08650/dark-logo.svg").
    Also, set the background-repeat to space.

Here is the result you should get. If you are having problems, you can drag the code part with a solution from the left edge of a sandbox window

Everything was clear?

Section 2. Chapter 8
course content

Course Content

Introduction to CSS Part II

Challenge

Note

You can write the code in the styles.css file of the following sandbox. To see the rendered page, drag it from the right edge of a sandbox window.

Task

In this task, you will work with the various formats of color available and how background properties can be set in HTML and CSS. Following are the tasks that you need to perform on the given code:

  1. Add an HSL color to the heading with 184 as hue, 50% saturation, and 100% lightness.
  2. Add the same color but with an opacity(alpha) set to 0.2 for the header as a background color.
  3. For nav, create a linear gradient as a background. It should fade from the color #ffd7b5 on the left to #ffa400 on the right.
  4. For a link in the nav, on hover, change the text color to #ff8a00 and the background color white with an opacity set to 0.4.
    Note! To change the appearance of a link on hover, use the a: hover selector.
  5. Set the background color of the footer to #ebecf0.
  6. For the div with the 'codefinity' class, set the background image to a url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/35fdd0a9-2b4b-4032-9ac4-3d848aa08650/dark-logo.svg").
    Also, set the background-repeat to space.

Here is the result you should get. If you are having problems, you can drag the code part with a solution from the left edge of a sandbox window

Everything was clear?

Section 2. Chapter 8
some-alt