Assessment on Background and Borders 2 skill test

https://jsfiddle.net/9n7rtkaf/

star

Star image is applied for contextual correct for task layout

Is there any better solution than I already have?

1 Like

Hi @Nihilistic_Reformer and welcome to the community :wave:

Congratulations! Good job :tada:
Your code works as intended.

As an improvement you could use repeat-y for the three stars on the right and use the background shorthand property. This would make the code simpler. The CSS would then look like this:

.box {
  width: 300px;
  padding: 0.5em;
  border: 5px solid lightblue;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 40px;
}

h2 {
  padding: 0 40px;
  text-align: center;
  background: url(star.png) no-repeat left center,
    url(star.png) repeat-y right center;
}

As a general hint: When working with images in these tasks you could copy the “star.png”-URL from the previous lesson and use it in the background property: url(https://mdn.github.io/css-examples/learn/backgrounds-borders/star.png). This way you can also see it on JSFiddle. Another option would be to use Glitch where you can also upload images.

I hope this feedback helps! Good luck on your developer journey and feel free to come back with more questions or tasks. :slightly_smiling_face:

Michael

2 Likes

از شما بابت کمکتون خیلی تشکر میکنم:pray::raised_hand_with_fingers_splayed: