Skip to content
Submitted almost 3 years ago

Responsive Landing Page with CSS, HTML and a little JavaScript.

haneul•20
@haneulffer98
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello, everyone! This is my first solution for this challenge after I stopped learning web development for a year. So, here are what I'm confused at:

  1. Why doesn't the contact button :focus state stay that way after clicked?
  2. Why didn't the content in the fourth-content (the one with cherry and orange background) stick to the position? I've tried to add position: absolute but the content still all over the place when I resize the screen.

Thank you!

Community feedback

  • Ben•770
    @BenConfigPosted almost 3 years ago

    Hey, well done on this challenge, it looks quite tricky.

    1. The contact button doesn't stay focused because of href="#contact". I think this is linking to something which doesn't exist on the page which is removing focus from the link itself. If you change the attribute to href="#" it will fix the problem. I did notice that you have duplicated every property for the :hover and :focus styles. I think you can remove them all except color and background-color, since these are the only properties that actually change?

    2. I think the problem you're having is getting the text to stay at the bottom of the container? You could use grid to fix this. On .content-with-cherry change display: block; to display: grid;. Remove align-items: center; and add align-content: end;. Add some padding-bottom so the text isn't sticking to the bottom. Then do the same with .content-with-orange.

    1
    haneul•20
    @haneulffer98Posted almost 3 years ago

    @BenConfig I did what you suggested and it worked! Your analysis was on point. I will pay more attention to contradictive or duplicated properties in the future. Thank you so much for your feedback and answers.

    1

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