Rose Day Special | Card In HTML, CSS | #codingwriter2.0

-

This Rose Day, surprise your loved one with a special virtual gift – a glowing rose and a digital love letter, all made using just HTML and CSS! 💖

🔧 Project Overview

This mini project includes:

  • A beautiful animated rose on the homepage.
  • A clickable link that opens a second page containing a love letter.
  • All done using pure HTML and CSS – no JavaScript required!
Rose Preview

🌹 Animated Rose Homepage

Love Letter Page

💌 Love Letter Page

📁 File Structure

project-folder/
├── index.html
├── new.html
└── style.css

🌹 index.html (Home Page with Animated Rose)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rose Day - @CodingWriter2.0</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <div class="glass"><div class="shine"></div></div>
    <div class="thorns"><div></div><div></div><div></div><div></div></div>
    <div class="leaves"><div></div><div></div><div></div><div></div></div>
    <div class="petals">
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div class="text">
      <h2>
        Your smile is as beautiful as this Rose. <br />
        I have something for your smile: <br />
        <a href="new.html">Click Here</a>
      </h2>
    </div>
  </div>
</body>
</html>

💌 new.html (Love Letter Page)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>For You ❤️</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: linear-gradient(to right, #fbd3e9, #bb377d);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: 'Great Vibes', cursive;
      color: white;
      text-align: center;
    }
    .letter {
      max-width: 700px;
      padding: 30px;
      border: 3px dashed white;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
      animation: fadeIn 3s ease-in-out;
    }
    .letter h1 {
      font-size: 3em;
      margin-bottom: 20px;
      text-shadow: 0 0 10px #fff;
    }
    .letter p {
      font-size: 1.5em;
      line-height: 1.6em;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }
    .back {
      margin-top: 30px;
      font-size: 1.2em;
      text-decoration: none;
      color: white;
      background: #d52d58;
      padding: 10px 20px;
      border-radius: 10px;
      transition: 0.3s;
    }
    .back:hover {
      background: white;
      color: #d52d58;
    }
  </style>
  <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet" />
</head>
<body>
  <div class="letter">
    <h1>Dear Love,</h1>
    <p>
      On this special Rose Day, I wanted to give you something that never fades…<br><br>
      Just like this digital rose, my love for you is forever blooming, vibrant, and glowing with warmth. <br><br>
      Thank you for being the reason I smile. ❤️
    </p>
    <a href="index.html" class="back">← Go Back</a>
  </div>
</body>
</html>

❤️ Final Note

This is more than just HTML and CSS — it’s a heartfelt surprise made with code. Share it with someone special and watch their smile bloom like your digital rose.

Love is when your code compiles perfectly without errors...
And they smile when they open your link. – @CodingWriter2.0

#RoseDayProject #HTMLLoveLetter #ValentinesCoding #CodingWriter2_0

Comments

Post a Comment