first commit

shibi22 · Apr 21, 2024 · 77b3e82 · 77b3e82
commit 77b3e82
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 0 deletions.
diff --git a/SAVE_20240418_200641.jpg b/SAVE_20240418_200641.jpg
diff --git a/SAVE_20240418_205506.jpg b/SAVE_20240418_205506.jpg
diff --git a/SAVE_20240418_205518.jpg b/SAVE_20240418_205518.jpg
diff --git a/SAVE_20240418_205533.jpg b/SAVE_20240418_205533.jpg
diff --git a/SAVE_20240418_211031.jpg b/SAVE_20240418_211031.jpg
diff --git a/SAVE_20240418_211047.jpg b/SAVE_20240418_211047.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Happy Birthday Madam!</title>
+
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color: #fde4e1;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            text-align: center;
+        }
+        .container {
+            max-width: 900px;
+            padding: 20px;
+            background-color: #fff3f0;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+        }
+        h1 {
+            color: #ff4081;
+        }
+        p {
+            color: #333;
+        }
+        .footer {
+            margin-top: 20px;
+            font-size: 0.8em;
+            color: #666;
+        }
+        /* Add animation */
+        .animate {
+            animation: fadeIn 4s ease-in-out;
+        }
+        @keyframes fadeIn {
+            0% { opacity: 0; transform: translateY(-20px); }
+            100% { opacity: 1; transform: translateY(0); }
+        }
+        .button {
+            display: inline-block;
+            padding: 10px 20px;
+            margin-top: 20px;
+            font-size: 16px;
+            color: white;
+            background-color: #ff4081;
+            text-align: center;
+            text-decoration: none;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+        }
+        .button:hover {
+            background-color: #e03565;
+
+
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <img src="" alt="Birthday wish" class="animate">
+        <h1>Happy Birthday, Madam!</h1>
+        <p>May your day be filled with joy and wonderful surprises!</p>
+        <p>Here's to celebrating the amazing person you are.</p>
+        <div class="footer">
+            With all our love and best wishes,<br>
+            [FROM DT -GUYS]
+
+                <!-- Existing content -->
+                <!-- ... -->
+
+                <!-- Button to navigate to the photo page -->
+                <a href="photo.html" class="button">View Photos</a>
+
+        </div>
+    </div>
+</body>
+</html>
diff --git a/photo.html b/photo.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photos</title>
+    <style>
+       div{
+
+            width:min-content;
+
+        display: flex;
+            flex-direction: row;
+             }
+             .img{
+                display: flex;
+
+             }
+
+    </style>
+</head>
+<body>
+    <h1> birthday photos</h1>
+    <marquee scrollamount="40" direction="right">
+    <div class="img">
+
+
+        <div >
+            <a href="index.html"><img src="./SAVE_20240418_200641.jpg" alt="Image 1"></a> </div>
+          <div><a href="index.html"><img src="./SAVE_20240418_205506.jpg" alt="Image 2"></a></div>  
+           <div><a href="index.html"><img src="./SAVE_20240418_205518.jpg" alt="Image 1"></a></div> 
+          <div><a href="index.html"><img src="./SAVE_20240418_205533.jpg" alt="Image 2"></a></div>  
+            <div><a href="index.html"><img src="./SAVE_20240418_211031.jpg" alt="Image 1"></a></div>
+            <div><a href="index.html"><img src="./SAVE_20240418_211047.jpg" alt="Image 2"></a></div>
+            <!-- Add more images as needed -->
+        </div>
+
+</div>
+</marquee>
+</body>
+</html>
diff --git a/style.css b/style.css