Use a CSS Linear Gradient to Create a Striped Element

HTML-CSS
1

Tell us what’s happening:
I can’t solve it…

Your code so far


<style>

  div{ 
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(45deg,
      yellow 0px[yellow--blend--yellow],
       yellow 40px[yellow--blend--black],
       black 40px[black--blend--black],
       black 80px[black--blend--black],90deg);
  }

</style>

<div></div>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element

2

You are close to being right. You do not need the square brackets:

[yellow etc]

You also do not need the 90 deg at the end. Other than this you code is fine- I think the instructions are a little misleading on this lesson. It is literally asking you to change the angle and the 4 colors.

:slight_smile:

3

Hi @Rupali123,

This is the solution of example:

<style>

  div{ 
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );
  }

</style>

Good luck and keep going up :muscle:t2:

Regards,
Ali Mosaad

7 Likes
5

thank you Ali ,solved it.

1 Like
6

What you have above is a mixed up version of code and text.
Remove the stuff in the square brackets entirely : such as this [black—blend—black]. Then after cleanup, look back at t he code example and instructions to confirm your code is as requested.