Skip to content
OverviewSolutions
8
Comments
4
Mohamed Ayman
@RealMohamedAyman

All comments

  • Mohamed Ayman•190
    @RealMohamedAymanPosted about 2 years ago

    • You can put your image inside a div ( to make a colored layer ) Set the image opacity to 50% and the div ( layer above the image ) opacity to 100% Change to layer color to the required color

    • Use alternate text for your img tag <img src="image-header-desktop.jpg" alt="...">

    • Use lang attribute in your html tag <html lang="en"> ... </html>

    • Put a title for your page in your title tag <title> Page Title </title>

    • font is not a registered keyword for linking google fonts Here is an example for linking google font

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
    • the paragraph element <p> is not allowed to be a child of <span> element
    Marked as helpful
    0
  • Diu Gach•145
    @DiuGachSubmitted about 3 years ago

    Hey guys, this is my fourth project, built with Html, scss and Javascript for sticky navigation, I have been struggling with z-index, it was not working, I tried alot still it won't work, that's why I didn't put the cta on top of the footer, what are your suggestions on how to implement z-index with out troubles?

    Responsive landing page using scss and abit of Javascript (Sticky Nav)

    1
    Mohamed Ayman•190
    @RealMohamedAymanPosted about 3 years ago

    • The section before footer (Ready to build section) that u call it's class cta , Should have half it's size in the footer , u can use negative margin-bottom or position or whatever u like to use

    • Huddle logo in the footer should be white , try using filter: brightness(0) invert(1);

    • Titles at sections should be bold , use font-weight to fix

    • I think under 800px width U should use flex-direction: column in the footer so the links be ordered instead of having one at top right and the other at bottom left

    • at the footer on mobile screens there is space between the two lists of links , U can remove it using negative margin-top\margin-bottom

    • The last thing depends on u , but I see that you should use smaller font for header and add more padding or space-around if you are using flex

    Marked as helpful
    0
  • Yassine•35
    @yassinelk2020Submitted over 3 years ago

    Hello everyone, this was my take on this challenge. I am looking forward to your feedback

    css, Html, flex-box

    2
    Mohamed Ayman•190
    @RealMohamedAymanPosted over 3 years ago
    • it should have smaller width as on ux template
    • also u must use @media to make responsive website
    • Use border-radius for main container
    Marked as helpful
    1
  • Mohamed Ayman•190
    @RealMohamedAymanPosted over 3 years ago

    Add "border-radius" It will help making the container looks better

    Marked as helpful
    0