Skip to content
Submitted about 3 years ago

Clipboard Landing Page with HTML5 and SASS/SCSS

sass/scss
Ax-cd•310
@Ax-cd
A solution to the Clipboard landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! This is my solution, there are still a few things I would like help with:

  1. How can I move the first image (the one of the computer) more to the left? I tried to use position relative/absolute, but since it didn't work I just used GRID...
  2. How can I align the "Supercharge your workflow" section in the center? I used Flexbox but it still doesn't work :/ Other criticisms are welcome, thank you :)
Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi! 👋

    Regarding your questions.

    • For the computer image on the section-1 (which hopefully this is what you mean 😅), I used transform: translateX(<minus-value>) to move the image to the left. It works and luckily it doesn't cause overflowing issue. So, give it a try.
    • On my side, it's already center horizontally. I guess I don't understand your question. 😅 Could you explain what you are trying to achieve?

    Some feedback.

    • Swap the header with div. If the header lives inside the main element, it will miss the semantic meaning. However, I am afraid that it might confuse some of the screenreader users because the screenreader still think that it is a header landmark. So, I recommend using div or section tag.
    • For your information, header is used to wrap the internal navigation for the website. In this case, there's no navigation links. But, there's a logo of the company so the header should only wrap the company logo.
    • Put the footer outside the main landmark. It should be on its own landmark. Just like header, the footer will lose the semantic meaning if it lives inside the main element.
    • Remove the word "logo" from the alternative text. The semantic meaning of the img element will make the screenreaders pronounce it as image.
    • You have done a great job with the alternative text for the social media icons. 👏
    • The download buttons should be link elements with download attribute.
    • I don't recommend changing the html or the :root font size. It can cause huge accessibility implications for those users with different font size or zoom requirements. I suggest reading this article by Josh Comeau where he tells about the problem of the 62.5% trick (and more!). Also, I recommend reading what an accessibility expert (Grace Snow) has said about it.

    It's great that you have minified the CSS. However, it is really hard to give on your CSS. Currently, I have to open one by one the Sass files which makes it hard to give feedback. Also, not all people here understand Sass. So, I recommend creating the "non-minified" CSS for review.

    That's it! Hope this helps. Happy coding!

    Marked as helpful
  • Gideon Olumide Dada•240
    @Olumide2596
    1. Try a margin-left of -^px(minus). then an overflow: hidden on the parent container.

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