For the company logos section, I used a cool infinite sliding animation that I saw used on https://formik.org/
@keyframes slidein { from { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } .spense-logos { position: relative; white-space: nowrap; display: inline-block; -webkit-animation: slidein 100s linear infinite; animation: slidein 100s linear infinite; } .spense-logos img { max-width: 150px; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); display: inline; height: auto; margin-left: 2rem; margin-right: 2rem; }- 10
Join Our Slack Channel
Chat and discuss solutions with a growing community of developers.
I can't believe how quickly you're finishing these challenges. They're all so well done! The slider is a nice touch, too.
Thanks for sharing your solution. I learned a lot from it. There is one issue I found but could not overcome it. The section where there is "Secure your money with Escrow." heading, the hyperlink is not working in there.
These are just mockups (some with multiple pages, some not) so most of them have hrefs linking to nothing, that's why :)
Well I am aware it is just mockups but even cursor is not changing when you hover the mouse on link.
Just checked, looks like the image is taking the width and height of the container and is a higher z-index than the container so you can't really click it. Fixed it by adding this to the (max-w-2xl xl:py-8) div z-index: 99; position: relative;