Skip to content
Submitted over 2 years ago

Responsive Blogr Landing Page using flexbox, grid and javascript

Ricky•470
@pyaetheiN
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blogr landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

This is my first JavaScript challenge from FrontEnd Mentor...

My questions on this challenge:

  • how do I apply linear-gradient to a svg image?
  • fontawesome webkit is having issues with HTML validations so is there any way to fix it?

Community feedback

  • Ana B.•110
    @abarisic1509Posted over 2 years ago

    Hi. I encountered the same problem with SVG and linear-gradient. The solution that worked nicely for me is to have one container with a linear-gradient set as background-image, and then another with SVG on top. You can check my solution here: https://www.frontendmentor.io/challenges/blogr-landing-page-EX2RLAApP/hub/blogr-landing-page-SJFsdHdVc As for FontAwesome, it slows down the page tremendously and maybe that's the reason for validation issues. After quite a lot of experimenting, I came to the conclusion it's just not worth it if you need only a few icons. But, maybe I'm wrong. I'm in no way an expert, so maybe there is some better practice. Still, I hope it helps :) Happy coding :)

    Marked as helpful
    1
    Ricky•470
    @pyaetheiNPosted over 2 years ago

    @abarisic1509 Thank you for your kind feedback Ana! I'll be sure to check out your solution and thanks again on your conclusion about FontAwesome I'll keep that in mind.

    0

Please log in to post a comment

Log in with GitHub

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