Skip to content
Submitted over 2 years ago

Clipboard landing page

Manuel•70
@manny-GM
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

i do need some help with some wierd behaviour from my code when viewed from half screen; any suggestion on what the problem is or better still, the solution would be greatly appreciated. Any other suggestions on improvements are greatly welcome..

Community feedback

  • lr6kidy•280
    @lr6kidyPosted over 2 years ago

    Hi Manuel!

    You could try to apply display: flex;, flex-direction: column; and align-items; to your <body>/<html>. That's how I got everthing to be centered. You would have to get rid of the margin-left you applied to your sections for it to truly work though.

    You can fix 6 of your accessibility issues by wrapping your sections in a <main>tag. (Everything between your <header> and your <footer>). You can fix another one by adding a lang="en" attribute to your <html>.

    As for suggestions: the titles are supposed to be "Dark Grayish Blue" and the remaining text "Light Grayish Blue", both colors are in the style guide. Now, if it's a design choice, please just ignore that. But your titles could use a bit of margin-bottom though.

    Also, when there's a lot of text on a page, I like to use the "index.htlm" file of the starter files, the one you renamed "text-file" (You don't need to put it in your repository btw.) to copy and paste everything, it prevents typos. I didn't read everything but for example you're missing a c in "Access Clipboard".

    You can also use position: absolute; and top: 0; on your header to make sure it starts at the very beginning of the webpage.

    Last thing, for the 3d effect of the buttons: get the blur size of the box-shadow to a bare minimum (like 1px), and the color of the shadow a bit darker than the colors used for the buttons.

    I hope this helps, good luck!

    Marked as helpful
    0
    Manuel•70
    @manny-GMPosted over 2 years ago

    @lr6kidy Thanks alot, this was really helpful

    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