Merge pull request #30 from Tamanna225/Feature/Navbar-ContactPage-Tim…

…eLine Created Chaotic Navbar, Contact Us page and Chaotic Timeline of Chaotic Events
vansh-codes · Oct 7, 2024 · 3cc4ad6 · 3cc4ad6
2 parents b920af1 + ab6643b
commit 3cc4ad6
Show file tree

Hide file tree

Showing 7 changed files with 693 additions and 29 deletions.
diff --git a/ContactUs.html b/ContactUs.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us - Chaos</title>
+    <link rel="stylesheet" href="css/contactus.css">
+</head>
+<body>
+    <div class="contact-form-container">
+        <h1>Contact Us</h1>
+        <form id="contactForm">
+            <div class="form-group">
+                <input type="text" id="description" placeholder="Name" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="phone" placeholder="Email" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="name" placeholder="Phone Number" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="email" placeholder="Description" required>
+            </div>
+
+
+            <button type="submit">Submit</button>
+        </form>
+        <div id="popup" class="popup"></div>
+    </div>
+    <script src="js/script.js"></script>
+</body>
+</html>
diff --git a/Timeline.html b/Timeline.html
diff --git a/css/contactus.css b/css/contactus.css
@@ -0,0 +1,101 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap');
+body {
+    font-family: 'Oswald', sans-serif; 
+    background: linear-gradient(135deg, #000000, #222121);    animation: noise 0.2s steps(10) infinite;
+    background-size: 150% 150%;
+    background-attachment: fixed; 
+
+    color: #ffffff; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+@keyframes noise {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 100% 100%;
+    }
+}
+
+
+.contact-form-container {
+    background-color: rgba(161, 161, 161, 0.2); 
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 0 15px rgba(162, 152, 152, 0.515); 
+    width: 320px;
+    border: 2px solid rgba(255, 251, 251, 0.779); 
+}
+
+h1 {
+    text-align: center;
+    color: #850dcb; 
+    margin-bottom: 20px;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+input {
+    width: 100%;
+    padding: 10px 10px 10px 10px;
+    margin-left: -10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #5b6a73aa; 
+    color: #ECEFF1; 
+    outline: none;
+    transition: background-color 0.3s;
+}
+
+input:focus {
+    background-color: #455A64; 
+}
+input::placeholder{
+    padding: 10px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #099d1d; 
+    color: #ffffff;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #0ac419; 
+}
+
+.popup {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #FFC107;
+    color: #212121;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    animation: slideIn 0.5s forwards;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(-50%) translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+    }
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: 'Oswald', sans-serif; 
+    height: 100vh;
+    background: linear-gradient(135deg, #000000, #333333);
+    animation: noise 0.2s steps(10) infinite;
+    background-size: 150% 150%;
+    background-attachment: fixed; /* Keep the image fixed during scrolling */
+  }
+  @keyframes noise {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 100% 100%;
+    }
+}
+  @keyframes wave {
+        0%, 100% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(-10px);
+        }
+    }
+
+    #chaos-header {
+        font-size: 3rem;
+        font-weight: 700; 
+        letter-spacing: 1.5px; 
+        color: #b21af3; 
+        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
+        text-align: center; 
+        margin: 30px 0;
+    }
+    #chaos-header span {
+        display: inline-block;
+        animation: wave 1s infinite;
+    }
+
+    #chaos-header span:nth-child(odd) {
+        animation-delay: 0.1s;
+    }
+
+    #chaos-header span:nth-child(even) {
+        animation-delay: 0.2s;
+    }
+
+  .navbar {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+  }
+
+
+  .icon {
+    width: 40px;
+    height: 40px;
+  }
+.nav-item.collided {
+    background-color: #f88; /* Change color when colliding */
+    transition: background-color 0.3s ease; 
+}
+.nav-item {
+    position: absolute;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.1); 
+    border: 2px solid rgba(221, 221, 221, 0.8); 
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 1s ease; /* Smooth gliding effect */
+    will-change: transform; /* Optimize for performance */
+}
diff --git a/index.html b/index.html