Skip to content
Submitted over 3 years ago

Clipboard Landing page using Basic CSS and some Flexbox

Gurkaranpreet Singh•105
@gurkaran321
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

Open to any type of feedback to improve my skills! For this challenge :

  1. Mostly I used Basic CSS properties.
  2. Flexbox was only used to create Footer and place image and text in section two.
  3. I could have done the section either by floats or using display:inline-block but it could have required to write some code to negate the after effects.
  4. I need to improve my hover states.

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hello, Gurkaranpreet Singh! 👋

    Well done on this challenge! 👍 Your solution is responsive! 🙌

    I'd like to suggest,

    • Turning the navigation links and the social media icons in the footer of the page into actual links by wrapping them in anchor tags.
    • Adding some hover states to the various interactive elements on the page (as you mentioned).
    • Removing the border around the buttons on the page (to match the original design a little better).
    • Making sure the logos in the section near the bottom of the page do not get squeezed or stretched when the size of the screen changes but retain their original aspect ratios.

    Keep coding (and happy coding, too)! 😁

    0
    Gurkaranpreet Singh•105
    @gurkaran321Posted over 3 years ago

    @ApplePieGiraffe Thanks for the suggestion! I have updated my code :

    1. Removed borders and buttons look same as in design [I didn't know about this]
    2. Made images near to footer to keep their aspect ratio by adding CSS properties: width:100%; height: auto; but had to add margin-right to separate them :P. 3.In the next challenge, I will keep in mind your first suggestion.
    3. Finally I understand I need to practise some hover state examples. I am terrible at it.
    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @gurkaran321

    Glad you found those tips helpful! 😀

    0
    Gurkaranpreet Singh•105
    @gurkaran321Posted over 3 years ago

    @ApplePieGiraffe Thanks for Help

    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