Skip to content

Conversation

@UserAkku
Copy link
Contributor

@UserAkku UserAkku commented Oct 31, 2025

Description

Added an interactive Coffee Cup Animation project that creates a cozy and engaging visual experience using pure HTML and CSS animations.

Features

  • Smooth coffee cup lift animation on hover
  • Realistic rising steam effect with staggered animation
  • Floating heart animation for warmth and love
  • "HOT & FRESH!" text reveal effect
  • Responsive design that works on all screen sizes
  • Pure CSS animations - no JavaScript required
  • Modern dark-themed UI with warm color palette

Technical Implementation

  • HTML5 for semantic structure
  • CSS3 for animations using:
  • @keyframes for steam rising and heart floating effects
  • Transform properties for smooth cup lift
  • Filter blur for realistic steam appearance
  • RGBA colors for semi-transparent steam
  • Sequential animation delays for natural steam flow

Animation Details

  • Coffee cup lifts 20px upward when hovered
  • Three steam trails rise with staggered timing (0s, 0.3s, 0.6s delays)
  • Steam gradually fades and expands while rising
  • Heart floats upward with scale and fade effect
  • Text appears smoothly on hover
  • All animations use ease-in-out timing for natural motion

How to Use

  1. Open index.html in any modern browser
  2. Hover over the coffee cup emoji
  3. Enjoy the warm, animated coffee experience!

Files Added

  • index.html - Main HTML structure
  • style.css - Animation styles and effects
  • meta.json - Project metadata

Hacktoberfest 2025

This contribution is made for Hacktoberfest 2025

@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • HTML feedback for Art/UserAkku-Music-On/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • HTML feedback for Art/UserAkku-pentagon/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element
  • CSS feedback for Art/UserAkku-Music-On/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element
  • CSS feedback for Art/UserAkku-pentagon/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary

Happy Coding! 🚀

@LaurelineP LaurelineP added the duplicate This issue or pull request already exists label Oct 31, 2025
@LaurelineP
Copy link
Contributor

Aloha @UserAkku !
It looks like you have duplicate labels because you likely created your new PR on top of a previous one, instead of checking out the master branch and starting fresh for each PR. This causes your previously submitted animation(s) to get included again in the new PR.

To fix this, make sure that for each PR, you remove any animation folders that do not belong to that specific PR.

@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • Overall feedback
    Reminder: the contribution should have 3 files in a folder in Art

    • Missing in 1 of the 3 contributions folders
      - please add the missing css file in the folder Art/UserAkku-pentagon
  • HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • HTML feedback for Art/UserAkku-Music-On/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • HTML feedback for Art/UserAkku-pentagon/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element
  • CSS feedback for Art/UserAkku-Music-On/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • Overall feedback
    Reminder: the contribution should have 3 files in a folder in Art

    • Missing in 1 of the 3 contributions folders
      - please add the missing html, css files in the folder Art/UserAkku-pentagon
  • HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • HTML feedback for Art/UserAkku-Music-On/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element
  • CSS feedback for Art/UserAkku-Music-On/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • HTML feedback for Art/UserAkku-Music-On/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element
  • CSS feedback for Art/UserAkku-Music-On/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • Overall feedback
    Reminder: the contribution should have 3 files in a folder in Art

    • Missing in 1 of the 2 contributions folders
      - please add the missing json file in the folder Art/UserAkku-Music-On
  • HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • HTML feedback for Art/UserAkku-Music-On/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element
  • CSS feedback for Art/UserAkku-Music-On/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

1 similar comment
@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

    • Incorrect filename: please rename as recommended or remove if unnecessary
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

    • Incorrect stylesheet link: update the href so it points to the correct CSS file
  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/styles.css

    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

  • CSS feedback for Art/UserAkku-Coffee-Cup-Animation/styles.css
    • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

Added animations for coffee cup and steam effects.
@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!

🎉 Your submission meets all pre-review requirements!
It’s now awaiting final validation from a maintainer.

Happy Coding! 🚀

@LaurelineP LaurelineP removed the duplicate This issue or pull request already exists label Oct 31, 2025
@github-actions
Copy link

Aloha @UserAkku 🙌 - Thanks for your contribution!

🎉 Your submission meets all pre-review requirements!
It’s now awaiting final validation from a maintainer.

Happy Coding! 🚀

@LaurelineP LaurelineP merged commit 6f8988c into zero-to-mastery:master Oct 31, 2025
2 checks passed
@github-actions github-actions bot removed the Awaiting Maintainer Validation PR awaits maintainer approval label Oct 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants