Skip to content
OverviewSolutions
7
Comments
4

diversis

@diversis250 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • diversis•250
    @diversis

    Hello! Looks fine except for some overflow issues and layout shift. To remove overflow on main section change you can simply add css main {overflow-x:hidden}. Addressing layout shift : better render only content that changes (like text,images and their direct <div> | <motion.div> parents), but layout itself should remain unchanged. This may require wrapping each piece of content you want to animated in one more <div>

    Marked as helpful
  • diversis•250
    @diversis

    Hello! To change image color inside <img> you may use something like .social-icon:hover {filter: hue-rotate(330deg) saturate(10)}. But there is a better approach for svg images.If you add whole .svg contains to .html you can than apply styles to <svg> object.Also you can place all icons used on a page into <defs> and than place them with <use> inside <svg>. More info on <defs>

    Marked as helpful
  • diversis•250
    @diversis

    Hello! Page looks fine overall. Noticed issue with hero section text (you called it build section) and "Try it free" button: they have light text on light background. Also footer text is same color as selection.

  • diversis•250
    @diversis

    Hello! Took a quick glance.

    • Interative objects need pointer: button {cursor: pointer;}
    • Wrap container (<Card>) in this example is supposed to have fixed dimensions
    • Consider using flex or grid container for <form> : you can setup gap,column-gap and row-gap for whole block instead of multiple margin's and positioning children is much easier than with display:block
    Marked as helpful