Sulagna-Dutta-Roy · Sulagna-Dutta-Roy · Aug 4, 2024 · Aug 3, 2024 · Aug 3, 2024 · Aug 3, 2024
diff --git a/Matching Pairs/Contact-us.html b/Matching Pairs/Contact-us.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact-Me</title>
+    <link rel="stylesheet" href="Contact.css">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="navbar-container">
+            <a href="#" class="navbar-brand">Contact-me</a>
+            <ul class="navbar-menu">
+                <li><a href="#">LinkdeIn</a></li>
+                <li><a href="#">Github</a></li>
+                <li><a href="#">Devfolio</a></li>
+            </ul>
+        </div>
+    </nav>
+    <div class="contact-container">
+    <h1>Contact-Us</h1>
+
+    <hr size="5px" noshade="none">
+    <form class="contactForm" action="#" method="post" enctype="text/plain">
+        <label  for="name">Name:</label>
+        <input type="text" id="name " name="name" placeholder="Enter Your Name " required>
+
+         <label for="email">Email:</label>
+            <input type="email" id="email"name="email" placeholder="Enter Your Email" required>
+
+            <label for="message" >Message:</label>
+            <textarea type="message" name="message" value=""placeholder="Enter Your Message" required></textarea>
+        <div class="form-group">
+        <button class="submit" type="submit">Submit</button>
+</div>
+
+    </form>
+    <p id="formMessage"></p>
+    </div>  
+    <script src="contact.js"></script>
+</body>
+</html>
diff --git a/Matching Pairs/Contact.css b/Matching Pairs/Contact.css
@@ -0,0 +1,163 @@
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(45deg, #0d0812, #0a1a37,rgb(43, 5, 94),rgb(79, 3, 79),rgb(4, 4, 134),rgb(86, 86, 248)
+    );
+    background-size: 400% 400%;
+    animation: gradientAnimation 5s ease infinite;
+    color: #fff;
+    cursor: pointer;
+  }
+  #custom-cursor{
+
+    width: 20px;
+    height: 20px;
+    border: 2px solid #e8dce4;
+    border-radius: 50%;
+    position: absolute;
+    pointer-events: none;
+    transition: transform 0.1s ease-out, background-color 0.2s ease;
+    z-index: 10000;
+    animation: cursorAnimation 0.3s infinite alternate;
+}
+@keyframes cursorAnimation {
+  0% { transform: scale(1); background-color: black,; }
+  100% { transform: scale(1.5); background-color: white; }
+}
+
+@keyframes gradientAnimation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+@keyframes backgroundAnimation {
+    0% { background-color: #f44336; }
+    20% { background-color: #e91e63; }
+    40% { background-color: #9c27b0; }
+    60% { background-color: #673ab7; }
+    80% { background-color: #3f51b5; }
+    100% { background-color: #2196f3; }
+}
+@keyframes cursorAnimation {
+    0% { transform: scale(1); background-color: black,; }
+    100% { transform: scale(1.5); background-color: white; }
+  }
+  h1 {
+    margin-top: 20px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    animation: titleAnimation 1s ease-out infinite alternate;
+  }
+.submit{
+    text-align: center;
+    margin-left:100px;
+    margin-top: 14px;
+}  
+/* Navbar styles */
+.navbar {
+    width: 100%;
+    background-color: #09000d;
+    padding: 1px ;
+    position: fixed;
+    top: 0;
+    z-index: 1000;
+  }
+
+  .navbar-container {
+    width: 90%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .navbar-brand {
+    color: #fff;
+    text-decoration: none;
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .navbar-menu {
+    list-style: none;
+    display: flex;
+    gap: 15px;
+  }
+
+  .navbar-menu li {
+    display: inline;
+  }
+
+  .navbar-menu a {
+    color: #fff;
+    text-decoration: none;
+    font-size: 18px;
+  }
+
+  .navbar-menu a:hover {
+    text-decoration: underline;
+  }
+
+
+.contact-container {
+    background: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 500px;
+    width: 100%;
+}
+
+h1 {
+    margin-bottom: 20px;
+    color: #673ab7;
+}
+
+label {
+    display: block;
+    margin-top: 10px;
+}
+
+input, textarea {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+.form-group{
+    display:flex;
+
+ margin-left: 90px;
+}
+
+button {
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-top: 20px;
+
+
+
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#formMessage {
+    margin-top: 20px;
+    color: red;
+    text-align: center;
+}
diff --git a/Matching Pairs/README.md b/Matching Pairs/README.md
@@ -0,0 +1,89 @@
+# Matching Pairs Game
+## Description
+
+The Matching Pairs Game is a fun and engaging memory game developed using HTML, CSS, and JavaScript. The game challenges players to match pairs of cards with identical images within a limited time. It offers a simple yet addictive gameplay experience, a countdown timer, and a helpful chatbot for hints.
+
+## Features
+
+- **Interactive Gameplay:** Flip cards to reveal their images and try to find matching pairs.
+- **Scoring System:** Earn points for each successful match.
+- **Countdown Timer:** Complete the game within the allotted time to win.(FutureScope)
+- **Responsive Design:** The game is optimized for both desktop and mobile devices.
+- **Dark Theme:** The game features a modern dark theme for a comfortable playing experience.
+
+### Objective
+
+Match all pairs of cards .
+
+### How to Play
+
+1. **Starting the Game:** 
+   - All cards are placed face down on the game board.
+   - The score and timer are displayed at the top of the game area.
+
+2. **Flipping Cards:**
+   - Click on any card to flip it over and reveal the image on the front.
+   - Click on a second card to flip it over as well.
+
+3. **Matching Pairs:**
+   - If the images on the two flipped cards match, they will remain face up.
+   - If the images do not match, both cards will flip back face down after a short delay.
+
+
+5. **Timer:**
+   - The timer is displayed at the top of the game area.
+ .
+
+
+
+7. **Winning and Losing:**
+   - The game is won when all pairs of cards have been matched before the timer runs out.
+
+
+8. **Restarting the Game:**
+   - Refresh the page to start a new game.
+
+### Tips
+
+- Remember the positions of the cards you have already flipped.
+- Use hints strategically to maximize your chances of finding pairs quickly.
+
+## ScreeShots
+![Matching_Pair_Game](https://github.com/user-attachments/assets/0fc1bf7f-81b4-4124-97a2-9fa135479b66)
+## workingVideo:
+
+
+https://github.com/user-attachments/assets/cc6e7ac3-4057-47ad-b859-2aae2d4e31b9
+
+
+
+## Technologies Used
+
+- **HTML:** Structure of the game.
+- **CSS:** Styling and layout.
+- **JavaScript:** Game logic and interactivity.
+
+## Getting Started
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/yourusername/matching-pairs-game.git
+   ```
+2. Navigate to the project directory:
+   ```bash
+   cd matching-pairs-game
+   ```
+3. Open `index.html` in your web browser to play the game.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- Icons by [Favicon](https://favicon.io/)
+
+
+---
+
+Replace `"https://github.com/yourusername/matching-pairs-game.git"` with the actual URL of your GitHub repository. This README file provides a detailed description of the game, instructions for playing, and information about the technologies used, making it easy for others to understand and contribute to your project.
diff --git a/Matching Pairs/about.css b/Matching Pairs/about.css
@@ -0,0 +1,97 @@
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(45deg, #0d0812, #0a1a37,rgb(43, 5, 94),rgb(79, 3, 79),rgb(4, 4, 134),rgb(86, 86, 248)
+    );
+    background-size: 400% 400%;
+    animation: gradientAnimation 5s ease infinite;
+    color: #fff;
+    cursor: pointer;
+  }
+  #custom-cursor{
+
+    width: 20px;
+    height: 20px;
+    border: 2px solid #e8dce4;
+    border-radius: 50%;
+    position: absolute;
+    pointer-events: none;
+    transition: transform 0.1s ease-out, background-color 0.2s ease;
+    z-index: 10000;
+    animation: cursorAnimation 0.3s infinite alternate;
+}
+@keyframes cursorAnimation {
+  0% { transform: scale(1); background-color: black,; }
+  100% { transform: scale(1.5); background-color: white; }
+}
+
+@keyframes gradientAnimation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+@keyframes backgroundAnimation {
+    0% { background-color: #f44336; }
+    20% { background-color: #e91e63; }
+    40% { background-color: #9c27b0; }
+    60% { background-color: #673ab7; }
+    80% { background-color: #3f51b5; }
+    100% { background-color: #2196f3; }
+}
+@keyframes cursorAnimation {
+    0% { transform: scale(1); background-color: black,; }
+    100% { transform: scale(1.5); background-color: white; }
+  }
+  h1 {
+    margin-top: 20px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    animation: titleAnimation 1s ease-out infinite alternate;
+  }
+
+.content-container {
+    margin-top: 300px; /* Adjust based on the height of the navbar */
+    padding: 20px;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #1e1e1e;
+    color: #ffffff;
+    border-radius: 10px;
+}
+
+header h1 {
+    font-size: 32px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    padding-top: 500px;
+
+}
+h1{
+  animation: gradientAnimations 0.3 ease infinite;
+}
+.instructions h2 {
+    font-size: 24px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+}
+
+.instructions p, .instructions li {
+    font-size: 18px;
+    margin-bottom: 10px;
+
+}
+p{
+  margin-top: 15px;
+}
+
+.instructions ul, .instructions ol {
+    margin-left: 20px;
+}