Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blogr landing page

@matiasroj0

Desktop design screenshot for the Blogr landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


i had problems aplying the header background (gradient and background img at the same time), if anyone can help me with that i will appreciate it

Community feedback

@MaximilianoDanielGarcia

Posted

Hi Matias, great job!

If you want to add a gradient and an image at the same time you can put two values in background-image separated by comma. Here, a fragment of my code that it will be helpful for you.

header {
   background-image: url('./images/bg-pattern-intro-desktop.svg'), linear-gradient(to right, hsl(13, 100%, 72%), hsl(353, 100%, 62%) 70%);
    background-size: 200%;
    background-position: 20% 53%;
}

Marked as helpful

0

@matiasroj0

Posted

@MaximilianoDanielGarcia thanks!!!!! i didn't know you could add two values in the background-image property. very helpful!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord