Submitted over 2 years ago

Sunnyside front page with HTML, SCSS, BEM

GytisV• 105

@gytukas1979

Preview site View code

This is a solution for...

Sunnyside agency landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I created this front page with HTML, SCSS ( 7.1 architecture for files, and BEM) and used some JS to show the mobile menu. I ran into a couple of issues and can someone give me any suggestions about them:

Contact button hover. I just found a similar background color for hover, but in the original design, hover is set to 0.25 opacity, just because we have background as the image then I hover over the button I am getting the right color, but my white text color is invisible. How is it possible to solve it?
Sunnyside logo in the footer. We got a white logo and it has to be dark green, so I got similar color with a filter attribute, but it is still not close to 100%. How else can we get the original color (#2C7566) in design?

Community feedback

The Burrito Doggie• 1,260

@BurritoDoggie

Posted over 2 years ago

Hey!

You did a fantastic job on this challenge! It's literally pixel perfect! I love your extra effects on all the buttons! I still can't get over the fact that it's really close to the original! I'm on a smaller device but it fit exactly the way it should! Sorry I can't help with your questions (I don't know a lot about code). But you can look at the 'report' above!

Keep Coding!

꒰⑅ᵕ༚ᵕ꒱˖♡

PS: I think you are a pro!

Marked as helpful

GytisV• 105

@gytukas1979

Posted over 2 years ago

@BurritoDoggie Thanks. I just saw that I messed up some distances in transform and stand-out divs. But it is solvable. This challenge helped me improve a lot too :-)

Please log in to post a comment

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