Submitted 7 months ago

👻 Landing Page: Footer and header waves (HTML + Tailwind + JS)

tailwind-css, animation

Natali 👻 Grimm•1,190

@Grimm-N

A solution to the Huddle landing page with curved sections challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

Well, I'm not sure if I can brag about this 😅, but I'm definitely trying to make my work interactive and dynamic! 😎 You tell me, did I nail it? Or should I try harder?

What challenges did you encounter, and how did you overcome them?

The biggest challenge was working with Tailwind for the first time. It felt like jumping from heaven to hell 😅. So unfamiliar, but in the end, I made something work. Guess what? It’s only going to get easier from here! 💪

What specific areas of your project would you like help with?

Unfortunately, I only noticed the background under the sections with the curved edges at the very end 😅. Maybe someone can share a simple and elegant way to use the provided images for this?

Code

Please log in to post a comment

Community feedback

Asilcan Toper•2,960
@KapteynUniverse
Posted 7 months ago
Hey Natali, great job.

There is a mix-blend-mode but i never used it. I don't know if it can be useable with another background animation but it is something like this.
```
.test {
  position: relative;
}
```
```
.test:after {
content: "";
position: absolute;
background: rgb(255,255,255);
width: 100%;
height: 100%;
display: block;
mix-blend-mode: difference;
}
```
It is normally for the dynamic background change on the element, like you give it a black background and text become white, then with animation or js you change background color and the text adapts to it.

Here is an example

Ignore if you saw my other reply. It was wrong :D
Marked as helpful
Yacoub AlDweik•3,110
@YacoubDweik
Posted 7 months ago
Yooo! Good job Ma'am!

The website is a bit slow especially at the footer and this is not surprising bcuz of that animation ofc,

Keep it up Ma'aaam and congrats for changing your nickname, as always ghosts and stuff hehe keep it up

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