Valentine’s Day Greeting Card - Source Code

By HACKER PRAVEEN

Valentine’s Day Greeting Card - Source Code

Description:

Celebrate love with this customizable Valentine’s Day Greeting Card! This project is perfect for beginners and experienced developers alike. Whether you’re crafting a heartfelt message for someone special or just want to learn a new coding technique, this code provides a fun way to spread love.

✨ Features:

  • Customizable Message: Add any text or name.
  • Interactive Animation: Floating hearts & smile effect.
  • Responsive Design: Works on desktop & mobile.
  • HTML, CSS & JavaScript: Easy-to-learn tech stack.
  • Open Source: Modify and share.

📖 Instructions:

  1. Copy the source code below.
  2. Save it as index.html.
  3. Open it in any browser.
  4. Enjoy & share the love ❤️

💻 Full Source Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Valentine Day Card</title>
  <style>
    #container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: rgb(238, 144, 255);
    }
    .book {
      position: relative;
      border-radius: 10px;
      width: 210px;
      height: 300px;
      background-image:url('add-your-photo.jpg');
      background-size: cover;
      background-position: center;
      -webkit-box-shadow: 1px 1px 12px black;
      box-shadow: 1px 1px 12px black;
      -webkit-transform: preserve-3d;
      transform: preserve-3d;
      perspective: 2000px;
    }
    .cover {
      position: absolute;
      background-image: linear-gradient(40deg, rgb(218, 1, 203), black);
      width: 100%;
      height: 100%;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.5s;
      transform-origin: 0;
      box-shadow: 1px 1px 12px black;
    }
    .book:hover .cover {
      transform: rotatey(-95deg);
    }
    .heart {
      position: relative;
      background-color: #e60303;
      height: 60px;
      width: 60px;
      top: 180px;
      left: 75px;
      transform: rotate(-45deg);
      animation: .8s beat infinite;
    }
    .heart:before,
    .heart:after {
      content: "";
      background-color: #e60303;
      border-radius: 50%;
      height: 60px;
      width: 60px;
      position: absolute;
    }
    .heart:before { top: -30px; left: 0; }
    .heart:after { left: 30px; top: 0; }
    .smile {
      position: absolute;
      width: 30px;
      height: 15px;
      background-color: #333;
      border-radius: 0 0 100px 100px;
      top: 200px;
      left: 90px;
      overflow: hidden;
    }
    .smile:before {
      content: "";
      position: absolute;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      background-color: #030202;
      top: 5px;
      left: 5px;
    }
    .eyes {
      position: absolute;
      border-radius: 50%;
      background-color: #333;
      width: 10px;
      height: 10px;
      top: 185px;
      left: 120px;
      box-shadow: -40px 0 #333;
      transform-origin: 50%;
      animation: close 2s infinite;
    }
    @keyframes close {
      0%, 100% { transform: scale(1, .05); }
      5%, 95% { transform: scale(1, 1); }
    }
    @keyframes beat {
      0%, 40%, 100% { transform: scale(1) rotate(-45deg); }
      25%, 60% { transform: scale(1.1) rotate(-45deg); }
    }
    .notes {
      position: absolute;
      color: #ff9595;
      font-size: 30px;
      top: 40px;
      width: 200px;
      text-align: center;
      font-family: 'Protest Revolution', sans-serif;
    }
    .notes:before { content: "Valentine's"; top: 30px; position: absolute; left: 5px; color: #d04e4e; }
    .notes:after { content: "day!"; top: 60px; position: absolute; left: 5px; }
  </style>
</head>

<body>
  <div id="container">
    <div class="book">
      <div class="cover">
        <div class="notes">Happy</div>
        <div class="heart"></div>
        <div class="smile"></div>
        <div class="eyes"></div>
      </div>
    </div>
  </div>
</body>
</html>

Comments

Post a Comment