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

Sunnyside agency landing page

P
Jax Tellerβ€’ 670

@piushbhandari

Desktop design screenshot for the Agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


first project in the junior section after doing a bunch of newbie ones.

any critique would be much appreciated!!!!

Community feedback

Elaineβ€’ 11,400

@elaineleung

Posted

Well done Jax! I think this looks really close to the design; for me, you just need to change the font colors in the different sections to make sure they match the design, and then that's pretty much it!

You can also try adding a hover effect for the social media icons; to do that, you'll need to copy the svg code and paste it in directly into the HTML within the <a></a> so that you can change the path's fill color, something like this:

.footer__social-icon:hover svg path {
  fill: white
}

The triangle in the mobile nav is also not there, but maybe that's something you chose to leave out. In any case, well done with this on the whole!

Marked as helpful

1

P
Jax Tellerβ€’ 670

@piushbhandari

Posted

@elaineleung

oops, forgot about the arrow.

i'll fix/add them soon as i can.

thanks!

1
Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello Jax, congratulations for your solution!

I liked a lots what you did in this solution! The grid is so perfect that's almost pixel perfect!

The only thing I would change is some titles (like in the grid) that has a different color, to have that effect of the text blending the background color you can use opacity: .8; with black that the text gets blended.

You've done the code for the text animation or you've used some library? I liked the intro text effect.

Keep it up!

Marked as helpful

1

P
Jax Tellerβ€’ 670

@piushbhandari

Posted

@correlucas thanks, i'll go ahead an change it.

i wrote it from scratch : @keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-90rem); } 75% { opacity: 0.75; transform: translateX(30rem); } 100% { opacity: 1; transform: translateX(0rem); } }

0
Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

@piushbhandari Thats amazing, then I'll try to apply some animation for my next challenges, but I'm not too familiar to @keyframes I have to read the documentation.πŸ˜ƒ

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