Merge branch 'main' into main

dakshsinghrathore · Oct 11, 2023 · 4768f52 · 4768f52
2 parents d9b5349 + baf50d6
commit 4768f52
Show file tree

Hide file tree

Showing 5 changed files with 216 additions and 17 deletions.
diff --git a/CSS/style.css b/CSS/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
 
 *,
 *::before,
@@ -15,8 +15,7 @@ html {
 body {
   background: #000;
   color: #fff;
-  font-family: 'Familjen Grotesk', sans-serif;
-  font-size: 13px;
+  font-family: "VT323", monospace;
 }
 
 a {
@@ -65,7 +64,7 @@ ul {
 .desktop-main-menu {
   margin-right: 60px;
   /* this property will give some space for the right three line menu  */
-  font-size: 17px;
+  font-size: 21px;
 }
 
 .desktop-main-menu ul {
@@ -124,14 +123,14 @@ section {
 }
 
 .section-inner h4 {
-  font-size: 38px;
+  font-size: 50px;
   margin-bottom: 5px;
   font-weight: 300;
   animation: fadeInUp 0.5s ease-in-out;
 }
 
 .section-inner h2 {
-  font-size: 23px;
+  font-size: 30px;
   margin-bottom: 20px;
   font-weight: 700;
   animation: fadeInUp 0.5s ease-in-out 0.2s;
@@ -329,7 +328,7 @@ footer ul li {
   margin-right: 30px;
   color: #aaa;
   text-transform: uppercase;
-  font-size: 16px;
+  font-size: 20px;
   line-height: 2.5;
 }
 
@@ -426,13 +425,13 @@ footer ul li a:hover {
 }
 
 .section-inner-center h3 {
-  font-size: 60px;
+  font-size: 80px;
   margin-bottom: 15px;
   animation: fadeInUp 0.5s ease-in-out;
 }
 
 .section-inner-center p {
-  font-size: 20px;
+  font-size: 25px;
   animation: fadeInUp 0.5s ease-in-out 0.2s;
   animation-fill-mode: both;
 }
@@ -457,15 +456,153 @@ footer ul li a:hover {
 }
 
 .stats div span {
-  font-size: 120px;
+  font-size: 160px;
 }
 
 .stats div h4 {
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 300;
 }
 
+.toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #333;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 5px;
+  display: none;
+  animation: slide-in 1s ease-in-out, fade-out 1s 9s ease-in-out forwards;
+}
+
+.toast-content {
+  margin-left:10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#subscribe-button {
+  background-color: #007BFF;
+  color: #fff;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+#subscribe-button:hover {
+  background-color: #0056b3;
+}
+
+@keyframes slide-in {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    display: none;
+  }
+}
+
+/* Form Section */
+.section-f {
+  background-image: url(../images/pragyan.webp);
+  background-color: #3c3c3c;
+  padding: 30px 0;
+  text-align: center;
+}
+
+#newsletter-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 250px;
+  margin: 0 auto;
+}
+
+#newsletter-form h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
 
+#newsletter-form p {
+  font-size: 18px;
+  margin-bottom: 20px;
+}
 
+#newsletter-form input[type="email"] {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #1f1f1f;
+  border-radius: 5px;
+}
+
+#newsletter-form button {
+  background-color: #2b2b2b;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+#newsletter-form button:hover {
+  background-color: #757575;
+}
 
+.form-control {
+  position: relative;
+  margin: 20px 0 40px;
+  width: 190px;
+}
+
+.form-control input {
+  background-color: transparent;
+  border: 0;
+  border-bottom: 2px #fff solid;
+  display: block;
+  width: 100%;
+  padding: 15px 0;
+  font-size: 18px;
+  color: #fff;
+}
+
+.form-control input:focus,
+.form-control input:valid {
+  outline: 0;
+  border-bottom-color: lightblue;
+}
+
+.form-control label {
+  position: absolute;
+  top: 15px;
+  left: 0;
+  pointer-events: none;
+}
+
+.form-control label span {
+  display: inline-block;
+  font-size: 18px;
+  min-width: 5px;
+  color: #fff;
+  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
 
+.form-control input:focus+label span,
+.form-control input:valid+label span {
+  color: lightblue;
+  transform: translateY(-30px);
+}
diff --git a/JS/script.js b/JS/script.js
@@ -83,3 +83,37 @@ function myFunction(x) {
 menuBtn.addEventListener("click", () => {
   menuContent.classList.toggle("active");
 });
+
+  // Function to show the toast notification
+  function showSubscribeToast() {
+    var toast = document.getElementById("subscribe-toast");
+    toast.style.display = "block";
+
+    setTimeout(function () {
+      toast.style.display = "none";
+    }, 5000); // Hide the toast after 5 seconds
+  }
+
+  // Function to handle the "Subscribe" button click
+  function subscribeToNewsletter() {
+    // You can add your newsletter subscription logic here
+    // For demonstration purposes, we'll simply show the toast
+    showSubscribeToast();
+  }
+
+  // Add an event listener to the "Subscribe" button
+  document.getElementById("subscribe-button").addEventListener("click", subscribeToNewsletter);
+
+  // Show the toast notification when the page loads (for demonstration)
+  window.addEventListener("load", showSubscribeToast);
+
+  // Function to handle form submission
+document.getElementById("newsletter-form").addEventListener("submit", function (event) {
+  event.preventDefault(); // Prevent the form from submitting
+  // You can add your form submission logic here
+
+  // For demonstration purposes, show a success message
+  document.getElementById("newsletter-form").innerHTML =
+    '<p>Thank you for subscribing!</p>';
+});
+
diff --git a/images/ISRO-file.webp b/images/ISRO-file.webp
diff --git a/images/pragyan.webp b/images/pragyan.webp
diff --git a/index.html b/index.html
@@ -189,18 +189,46 @@ <h2>GSAT-31 Update</h2>
               stroke-width="2px"
               d="M2.000,5.000 L15.000,18.000 L28.000,5.000 "
             ></path>
-
+            
           </svg></div>
     </div>
 </section> 
+<!-- Adding toast notification -->
+<div id="subscribe-toast" class="toast">
+  <div class="toast-content">
+    <span>Subscribe to our Newsletter</span>
+    <button id="subscribe-button" href="#newsletter">Subscribe</button>
+  </div>
+</div>
+
+<section class="section-f" id="newsletter">
+  <div class="section-inner">
+
+    <h2>Subscribe to Our Newsletter</h2>
+    <p>Stay updated with the latest news and updates from ISRO.</p>
+    <form id="newsletter-form">
+      <!-- <input type="email" id="email" name="email" placeholder="Enter your email" required> -->
+      <div class="form-control">
+        <input type="value" required="">
+        <label>
+            <span style="transition-delay:0ms">U</span><span style="transition-delay:50ms">s</span><span style="transition-delay:100ms">e</span><span style="transition-delay:150ms">r</span><span style="transition-delay:200ms">n</span><span style="transition-delay:250ms">a</span><span style="transition-delay:300ms">m</span><span style="transition-delay:350ms">e</span>
+        </label>
+    </div>
+      <button type="submit">Subscribe</button>
+    </form>
+  </div>
+</section>
+
+
 <footer>
     <ul>
-      <li><b>ISRO &copy; 2023</b></li>
-      <li><a href="https://twitter.com/isro" target="_blank"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
-      <li><a href="https://www.youtube.com/@isroofficial5866" target="_blank"><i class="fa-brands fa-youtube"></i> YouTube</a></li>
-      <li><a href="https://www.linkedin.com/company/isro/" target="_blank"><i class="fa-brands fa-linkedin"></i> LinkedIn</a></li>
+      <li>ISRO &copy; 2023</li>
+      <li><a href="https://twitter.com/isro" target="_blank">Twitter</a></li>
+      <li><a href="https://www.youtube.com/@isroofficial5866" target="_blank">YouTube</a></li>
+      <li><a href="https://www.linkedin.com/company/isro/" target="_blank">LinkedIn</a></li>
       <li><a href="./Privacy/"><i class="fa-solid fa-lock"></i> Privacy</a></li>
-      <li><a href="#"><i class="fa-solid fa-truck-field"></i> Suppliers</a></li>
+      <li><a href="#">Suppliers</a></li>
+
     </ul>
   </footer>