Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML | CSS | Semantic Tags | Animations

Diogo 100

@diogo-kappaun

Desktop design screenshot for the Skilled e-learning landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@xtirian

Posted

Hello, my friend. Hope you are doing well.

I saw that you use the overflow: hidden in the body when i'm sure you wanted use overflow-x: hidden

Also, how you did the animations? It work jut with the delay?

I didn't find any js file in your code.

Marked as helpful

0

Diogo 100

@diogo-kappaun

Posted

@xtirian E ai mano, de boa e voce? Realmente o hidden era para ser somente no eixo x, tenho que alterar.

Então as animações são feitas da seguinte forma:

-> .courses-view .courses { --delay: 0.6s; animation: appear 1s var(--delay) backwards ease-in-out; } (Isso vai dentro de cada card) -> No HTML eu coloco um style-inline em cada card alterando o valor da variavel --delay.

Por exemplo: <div class="courses" style="--delay: 0.9s"> <div class="courses" style="--delay: 1.2s"> <div class="courses" style="--delay: 1.5s"> (cada div é um card diferente)

-> Como na animação o delay é puxado a partir da variavel, cada card tem seu proprio delay.

Espero que consiga entender, obrigado pelo comentario!

Ja fiz as alterações, vi agora que tinha tirado o scroll kkkk

1

Please log in to post a comment

Log in with GitHub
Discord logo

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