developerrahulofficial · karthicksha1 · Sep 24, 2023 · Sep 24, 2023 · Sep 24, 2023 · Sep 24, 2023
diff --git a/IMG_3797.jpeg b/IMG_3797.jpeg
diff --git a/images/1.jpeg b/images/1.jpeg
diff --git a/images/2.jpeg b/images/2.jpeg
diff --git a/images/3.jpg b/images/3.jpg
diff --git a/images/3840x2160-iron-man-gauntlet-4k_1617446727.jpg b/images/3840x2160-iron-man-gauntlet-4k_1617446727.jpg
diff --git a/images/3840x2160-peaceful-blur-background-4k_1555207903.jpg b/images/3840x2160-peaceful-blur-background-4k_1555207903.jpg
diff --git a/images/IMG-7056.jpg b/images/IMG-7056.jpg
diff --git a/images/IMG_3797.jpeg b/images/IMG_3797.jpeg
diff --git a/images/PHOTO-2023-09-19-19-40-25.jpg b/images/PHOTO-2023-09-19-19-40-25.jpg
diff --git a/images/e187b381-5f09-4bd7-b741-fefea6f63df9.JPG b/images/e187b381-5f09-4bd7-b741-fefea6f63df9.JPG
diff --git a/images/ideogram.jpeg b/images/ideogram.jpeg
diff --git a/images/mortal-kombat-1-2023-4k-n4-3840x2400.jpg b/images/mortal-kombat-1-2023-4k-n4-3840x2400.jpg
diff --git a/images/pexels-monstera-production-5874620.jpg b/images/pexels-monstera-production-5874620.jpg
diff --git a/images/unnamed.jpg b/images/unnamed.jpg
diff --git a/index.html b/index.html
@@ -1,54 +1,18 @@
 <!DOCTYPE html>
-<html lang="en" >
+<html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>CodePen - Drag Papers ❤️</title>
-  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Short+Stack&amp;family=Homemade+Apple&amp;display=swap'><link rel="stylesheet" href="./style.css">
-
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="message.css">
+    <title>Happy Birthday</title>
 </head>
 <body>
-<!-- partial:index.partial.html -->
-<!-- A pen by Developer Rahul  -->
-<div class="paper heart">
-
-</div>
-
-
-<div class="paper image">
-  <p> and I fallen in</p>
-    <p>Love with You 😍 </p>
-   <img src="images/1.jpeg" />
-</div>
-
-<div class="paper image">
-  <p</p>
-  <img src="images/2.jpeg" />
-</div>
-
-<div class="paper image">
-  <p>How can be </p>
-   <p> someone so cute ❤️ </p>
-
-  <img src="images/3.jpg" />
-</div>
-
-
-
-<div class="paper red">
-<p class="p1"> and My Favorite</p>
-<p class="p2">Person 😍</p>
-</div>
-
-<div class="paper">
-<p class="p1">You are Cute </p>
-  <p class="p1">Amazing <span style="color: red !important;">❤️</span></p>
-</div>
-
-<div class="paper">
-<p class="p1">Drag the papers to move!</p>
-</div>
-<!-- partial -->
-  <script  src="./script.js"></script>
-
+    <div class="container">
+        <div class="blur-background"></div>
+        <div class="message">
+            <p>The hugs, kisses, and shared intimate moments are not enough to tell you how much I love you. I want to spend every moment of my life in your embrace. Happy birthday My Everything !!!</p>
+            <a href="message.html" class="btn">Click Here Pattu ma</a>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/message.css b/message.css
@@ -0,0 +1,56 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    overflow: hidden;
+    background-color: black; /* Set a black background color to the body to eliminate any white space */
+}
+
+.container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.blur-background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: url('images/ideogram.jpeg'); /* Replace with your blurred background image URL */
+    background-size: cover;
+    background-position: center;
+    filter: blur(10px);
+    z-index: -1; /* Place the background behind the content */
+}
+
+.message {
+    text-align: center;
+    padding: 20px;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.5); /* Add a black vignette effect */
+    border-radius: 10px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.message p {
+    font-size: 24px;
+    line-height: 1.5;
+}
+
+.btn {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #ff5733;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    margin-top: 20px;
+    font-weight: bold;
+}
+
+.btn:hover {
+    background-color: #e64d2f;
+}
diff --git a/message.html b/message.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Shahi Birthday Wish ❤️</title>
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Short+Stack&amp;family=Homemade+Apple&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<div class="paper heart">
+
+</div>
+
+
+<div class="paper image">
+  <p> I Love You Sooooooo Much and i will be there for shower you with all my Love..</p>
+    <p>Happy Birthday Shahinaaa !!!!🎂 😍 ❤️ </p>
+   <img src="images/IMG-7056.jpg" />
+</div>
+
+<div class="paper image">
+  <p</p>
+  <img src="images/PHOTO-2023-09-19-19-40-25.jpg" />
+</div>
+
+<div class="paper image">
+  <p>Un azhagai sola</p>
+   <p> vaarthaigal podhadhuu ❤️ </p>
+
+  <img src="images/IMG_3797.jpeg" />
+</div>
+
+
+
+<div class="paper red">
+<p class="p1"> Unnai Muthal Murai Paartha Pothu Enakul Oru Siru Nadukkam Piragu Than Therinthathu Antha Nadukathin Peyar Than Kathalentru Enakena Nee Unakena Naan Ena Vazhum Ivvaalvil Eththana Sugamada Un Vizhi Paarthu Un Madi Sainthu Thoonginaale Pothum Akkaname En Uyieraium Tharuvenada Namakentru Kulanthaigal Piranthal Enna Ennudan Konji Vilaiyadum Nee Thanada Enthan Muthal Kulanthai Un Kaipidithu Nadapenada Un Kathalil Thigaipenada Un Adimaiena Aavenada NeeyumOru Thaithaanada Nee Nootraandu Vazha Verum Aasai Mattumalla Antha Aasaikaga En Uyiraium Parisalipenada Uyire Unakaga(</p>
+<p class="p2">😍</p>
+</div>
+
+<div class="paper">
+<p class="p1">Enoda Life muzhukaaa Una avlo love pananumm/p>
+  <p class="p1">Elaamay enakuu neee matum dha ammuu❤️❤️<span style="color: red !important;">❤️</span></p>
+</div>
+
+<div class="paper">
+<p class="p1">Drag the papers to move..My Uyiree!</p>
+</div>
+<!-- partial -->
+  <script  src="./mobile.js"></script>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -1,53 +1,63 @@
+/* Importing a font from Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap');
 
-
-
-
+/* Styling for the body */
 body {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  background-size: 1000px;
-  background-image: url("https://www.psdgraphics.com/wp-content/uploads/2022/01/white-math-paper-texture.jpg");
+  /* Background styling */
+  background-size: 1000px; /* Consider reducing the size */
+  background-image: url("images/pexels-monstera-production-5874620.jpg");
   background-position: center center;
+  margin: 0; /* Remove default margin to fully utilize screen space */
 }
 
+/* Styling for the paper container */
 .paper {
   background-image: url("https://i0.wp.com/textures.world/wp-content/uploads/2018/10/2-Millimeter-Paper-Background-copy.jpg?ssl=1");
   background-size: 500px;
   background-position: center center;
   padding: 20px 100px;
-/*  min-width: 800px; */
-  
+  /* min-width: 800px; */ /* You can uncomment this if needed */
+
   transform: rotateZ(-5deg);
-  box-shadow: 1px 15px 20px 0px rgba(0,0,0,0.5);
+  box-shadow: 1px 15px 20px 0px rgba(0, 0, 0, 0.5);
 
+  /* Absolute positioning */
   position: absolute;
 }
 
+/* Styling for a heart shape element */
 .paper.heart {
   position: relative;
   width: 200px;
   height: 200px;
   padding: 0;
   border-radius: 50%;
+  animation: heartbeat 2s infinite; /* Add the heartbeat animation */
 }
 
+/* Styling for an image within the paper */
 .paper.image {
   padding: 10px;
 }
+
+/* Styling for paragraphs within .paper.image */
 .paper.image p {
   font-size: 30px;
 }
 
+/* Styling for all images within your content */
 img {
   max-height: 200px;
-  width: 100%;
+  width: auto;
   user-select: none;
 }
 
+/* Adding a heart shape background to .paper.heart */
 .paper.heart::after {
   content: "";
   background-image: url('https://cdn.pixabay.com/photo/2016/03/31/19/25/cartoon-1294994__340.png');
@@ -62,12 +72,24 @@ img {
   opacity: 0.6;
 }
 
+/* Styling for paragraphs */
 p {
   font-family: 'Zeyada';
   font-size: 50px;
-  color: rgb(0,0,100);
+  color: black;
   opacity: 0.75;
   user-select: none;
-
-  // filter: drop-shadow(2px 1.5px 1px rgba(0,0,105,0.9));
-}
+}
+
+/* Heartbeat animation */
+@keyframes heartbeat {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}