Skip to content
Submitted over 3 years ago

Clipboard landing page | CSS HTML

Luis Colina•1,043
@Comet466
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clipboard landing page
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

really fun layout to code, the original desing got the computer image overflowing a little to the left, could came out with a proper way of doing it, my first though was to set his container with the max-width and the move it with position or transform, but didnt quite worked, if someone got a better way of doin it im all eyes, happy coding

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Luis! 👋 Congrats on finishing another challenge! 🎉 Good effort. Your solution looks very good and also responds well. Here's my few tips:

    • You should wrap your logos (google etc.) images into some anchor <a> element. Additionally since this images are not decorative you should add alternative text to it.
    • Add aria-labels for .social-media-icons anchors.
    • Because you use width: 60% on .grid1 .card img your images are huge on mobile screen size.

    Good luck with that, have fun coding! 💪

    1
    Luis Colina•1,043
    @Comet466Posted over 3 years ago

    thanks @tediko you're becoming my mentor lately, i notice the problem with the images on mobile screen size i used width: 60% to fixed it but it barely improved it a bit, what can i do?

    0
    Luis Colina•1,043
    @Comet466Posted over 3 years ago

    hello again @tediko, already fix the problem, i just set the max-width to the max allow for the parent container it looks fine now, i also fix the accesibility issues thanks again

    0
    tediko•6,680
    @tedikoPosted over 3 years ago

    @Comet466 You can even hard code width on your icon images like width: 50px since they don't need to stretch like this mockups/ilustration images.

    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