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

Community feedback

• 

  KapteynUniverse•2,150

  @KapteynUniversePosted 3 days 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

  0

  ---

  

  Natali 👻 Grimm•1,150

  @Grimm-NPosted 2 days ago

  @KapteynUniverse Oh, great idea! I should give it a try.
  I just noticed that my font also didn’t render correctly on the site, even though everything looked fine while I was working. Ugh, I get that Tailwind is something you need to know, but I’m not really a fan of it so far. 😅

  0

  

  KapteynUniverse•2,150

  @KapteynUniversePosted 2 days ago

  @Grimm-N I think that is a Github problem :D You need to use relative path. When you use absolute path it looks for the file starting from the base domain like (https://githubusername.github.io/fonts/).

  0

  

  Natali 👻 Grimm•1,150

  @Grimm-NPosted 2 days ago

  @KapteynUniverse, I've already fixed everything 👻

  1
• 

  Yacoub AlDweik•970

  @YacoubDweikPosted 2 days 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

  0

  ---

  

  Natali 👻 Grimm•1,150

  @Grimm-NPosted 2 days ago

  @YacoubDweik Yes, the animation slows down at the bottom. I’m thinking about a more elegant and lightweight solution to improve this.

  And a ghost because every project is like Boo-oo! — a little spooky, a little playful, but in the end, it's all about surprising results! 👻

  0