Built with
You can also swipe left and right on touch devices ^^
Had so much fun taking up this challenge would it be nice if I had made the items from each page as a nested routes to each page? A feedback is much appreciated. Meow ^^,
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>
Is there any solution to give color cyan when hovering the social media icon on footer? Thank You!
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>
Well this challenge helped me to practice more in mobile design, well for me that was what I had more complications, but I think I improved a little more in terms of accessibility, and I have more notion of how to position and align the html elements in a more effective way and without so many complications when moving to mobile design. If you have any corrections or suggestions to improve my code please let me know in the comments, happy coding.
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.
Hello! Took a quick glance.
button {cursor: pointer;}<Card>) in this example is supposed to have fixed dimensions<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