Launching a responsive recipe site with card border animation

Introduction:
I'm excited to share a project I've poured my heart into—a responsive recipe site with card‑border animations! This week I launched it for frontend developers.
I added a vibrant green‑and‑blue animated border for the recipe cards.

I also faced some issues with the header and logo layout — I’ll explain how I fixed them later.

This was a personal challenge combining clean interface, accessibility, and high performance.

Check the code on GitHub and live demo linked below!
in my repository https://github.com/Der12kl/Recipe_Page
demo site https://der12kl.github.io/Recipe_Page/
🛠️ Technologies used:

• HTML5 (semantic elements: header, main, section, nav)
• CSS3 (mobile‑first, border animation)
• Procedural responsiveness (media queries)
• Performance optimizations (lazy loading, Lighthouse 95+)

What I learned:

• Semantic HTML + aria-label helped me boost accessibility and improve Lighthouse scores.
• Using loading="lazy" optimized image performance.
• Adjusting h1 { margin-block: 0.67em } solved an issue with Lighthouse flagging improper markup.
• Wrapping the header content in a <div> fixed the logo overflow I had initially. Also there was a problem with the header added so wrapped with div forgot it at the beginning to add and there was a problem with the logo Example of fixed header structure:

<header class="header recipe-header">
  <div class="header__container">
    <a href="/" class="logo" aria-label="The Cool Tasty – home">
      <span class="logo__icon">…SVG inline…</span>
      <span class="logo__text">The Cool Tasty</span>
    </a>
  </div>
</header>

I also had fun experimenting with a card border animation, building on ideas from past projects.

/* ==== border animation ==== */
@keyframes borderFlow {
  0% {
border-image-source: linear-gradient(90deg, #16a34a, #38bdf8, #16a34a);
  }
  50% {
border-image-source: linear-gradient(90deg, #38bdf8, #16a34a, #38bdf8);
  }
  100% {
border-image-source: linear-gradient(90deg, #16a34a, #38bdf8, #16a34a);
  }
  }

P.S. This adds a lively gradient border animation to the recipe cards—small detail, big impression!

Mobile preview of The Cool Tasty:

If you liked this post, feel free to share or give it a ❤️

I’d love to hear your thoughts and feedback in the comments below! 👇

Comments

[Adrian Fernandes]

Hey nice project mate, I did build a similar one, mine goes by the name 'CookPrompt' lol but using React, Hugging Face
Do check it out and would love to hear your views on it: cook-prompt-one.vercel.app/
My Github: github.com/boybothere/CookPrompt