Skip to content
Submitted almost 5 years ago

Clipboard Landing Page - HTML/CSS - Flexbox/Grid

Josh Prentice•235
@jfprentice
A solution to the Clipboard landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Work is definitely slowing my progress with these challenges..

I'm not sure why, but the image-computer.png isn't showing up off the left of the page like it did in the 1440p view in chrome dev tools.

I'm not sure I did the footer correctly - I used space-around but I think there is too much space between the logo and the links. I think I had the most trouble with the footer. I originally used the supplied social media icons in my anchor tags but couldn't figure out how to get the color to change on click - I tried using icon:active{ color: } and icon:active{fill: } - I ended up just going to fontawesome and using their icons instead.

I also see that I have an html issue because <section class="companies"> doesn't have a heading. How would I go about creating a heading for that section, but only for a screen reader? - I added an h2 with an sr-only class with visibilty:hidden, hopefully that fixes it.

Any feedback or tips would be greatly appreciated!

Code

Please log in to post a comment

Log in

Community feedback

  • Emmilie Estabillo•5,600
    @emestabillo

    Hey Josh, it's me. Once again 😄 Congrats on your first landing page! Awesome to see your progress. Here are a few notes:

    • there's a horizontal scroll from small to medium widths due to the margins on .main-images. I would probably play with the widths of the images per breakpoint. Or it might be helpful to look into responsive images to control the stretch and sizing.

    • For the footer: I agree working the svg icons can be tricky, I had a similar question in my last project. What I've gathered is that if I was placing them inside an img tag, as you've done prior to FA, the only thing that worked for me was using filter. Another option would be embedding the svgs inline and changing the fill attribute in CSS.

    For the spacing, you can wrap the logo and link-container into one div and adjust the spacing between them as you wish, separate from the icons. If you don't want to touch html, you can add margin-left: auto to the icons to push them to the right of the page. You would also be adjusting the space between the logo and links.

    • Lastly, I saw a few repeating snippets that can be cleaned up. In the footer for example, display: flex and align-items: center were written for both mobile and desktop. Same with the color for footer-link - it appears 3x on the stylesheet starting with the a tag. Nothing major, I know, but if this was a big site, it would all add up. Best to keep it DRY :-)

    Hope this all helps! See you on your next one lol

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