From 4ca5c80ddafb4aabd8ccd6bb701d8aa18ccd890b Mon Sep 17 00:00:00 2001
From: Tanishq Sharma <123730739+TanishqSharma2022@users.noreply.github.com>
Date: Mon, 4 Dec 2023 02:59:55 +0530
Subject: [PATCH] added carousel dots

---
 css/style.css | 30 ++++++++++++++++--------------
 index.html    | 46 ++++++++++++++++++++++++++--------------------
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/css/style.css b/css/style.css
index 99eec01..b39fb45 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,6 +4,10 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
+html, body{
+  overflow-x: hidden;
+}
+
 
 :root {
   --navlist-color: #cb7139;
@@ -1472,22 +1476,15 @@ a {
 
 }
 
-@keyframes appear{
-  0%{
-    transform: scale(2);
-  }
-  100%{
-    transform: scale(1);
-
-  }
-}
-
 .image_modal.appear{
   display: block;
+  transition: all 0.5s ease-in-out;
 }
 .image_modal{
 width: 100%;
 height: 100%;
+transition: all 0.5s ease-in-out;
+
 }
 .modal_image{
   width: 100%;
@@ -1500,6 +1497,7 @@ height: 100%;
   place-items: center;
   width: 100%;
   height: 100%;
+  transition: all 0.5s ease-in-out;
 }
 
 
@@ -1512,15 +1510,15 @@ height: 100%;
   height: 80vh;
   /* background: white; */
   background-size: cover;
-  animation: appear 200ms linear 1;
   display: flex;
   align-items: top;
   justify-content: space-around;
-
+  transition: all 1s ease-in-out;
 }
 .modal_image{
   height: 40%;
   object-fit: cover;
+  
 }
 
 .modal_content{
@@ -1602,12 +1600,16 @@ height: 100%;
   object-fit: cover;
   aspect-ratio: 1/1; 
   width:100%;
+}
+.glide__bullet{
+  background: var(--primary);
+}
 
+.glide__bullet--active{
+  background: var(--accent);
 }
 
 .glide__arrow{
-  /* background: black; */
-  /* opacity: 0.5; */
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/index.html b/index.html
index 1fc888c..2d6ee05 100644
--- a/index.html
+++ b/index.html
@@ -160,27 +160,21 @@ <h4>IISER BHOPAL</h4>
     <div class="main2" id="about_us">
 <div class="svg_blob">
       <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg">
-        <defs>
-          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" style="stop-color: rgb(226, 184, 78);"></stop>
-            <stop offset="100%" style="stop-color: rgb(242, 203, 95);"></stop>
-          </linearGradient>
-        </defs>
+        
         
         <path  fill="url(#gradient)">
-          <animate attributeName="d" repeatCount="indefinite" dur="10000ms" values="
+          <animate attributeName="d" repeatCount="indefinite" dur="5000ms" values="
           M409,315.5Q326,381,249,383Q172,385,114,317.5Q56,250,100.5,158.5Q145,67,252.5,63.5Q360,60,426,155Q492,250,409,315.5Z;
-
-          M407.5,329.5Q342,409,246.5,415.5Q151,422,100,336Q49,250,105,172.5Q161,95,256,85.5Q351,76,412,163Q473,250,407.5,329.5Z;
-          M411.5,352Q368,454,255.5,445Q143,436,93,343Q43,250,90.5,153Q138,56,245.5,64Q353,72,404,161Q455,250,411.5,352Z;
-
-
-
-
-
+          M418.50079,335.00029Q348.00032,420.00057,245.50008,427.50043Q142.99983,435.00029,117.00029,342.50014Q91.00076,250,117.00013,157.49958Q142.99951,64.99916,249.49997,65.4992Q356.00044,65.99924,422.50085,157.99962Q489.00126,250,418.50079,335.00029Z
           M409,315.5Q326,381,249,383Q172,385,114,317.5Q56,250,100.5,158.5Q145,67,252.5,63.5Q360,60,426,155Q492,250,409,315.5Z;
           "></animate>
         </path>
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" style="stop-color: rgb(226, 184, 78);"></stop>
+            <stop offset="100%" style="stop-color: rgb(242, 203, 95);"></stop>
+          </linearGradient>
+        </defs>
       </svg>
 
     </div>
@@ -328,8 +322,8 @@ <h1>SAC CONSTITUTION</h1>
         <!-- </div> -->
         <img alt="" class="modal_image" />
         <div class="modal_content">
-          <h1>HEADING</h1>
-          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
+          <h1>SINGULARITY 2023</h1>
+          <p>This is the main Science Fest of IISER Bhopal.</p>
         </div>
       </div>
     </div>
@@ -344,13 +338,16 @@ <h1>Latest Activities</h1>
       <div
         class="glide"
         style="
-          width: 70%;
-          max-width: 1000px;
-          height: 300px;
+          width: 90%;
+          max-width: 1100px;
+          height: 400px;
           overflow-y: hidden;
           margin-top: 50px;
           transition: all 1s ease-in-out;
           cursor:pointer;
+          display: flex; 
+          flex-direction: column;
+          gap: 50px;
 
         "
       >
@@ -387,6 +384,12 @@ <h1>Latest Activities</h1>
             <i class="fa-solid fa-angle-right"></i>
           </button>
         </div>
+        <div class="glide__bullets"  style="margin-top: 100px;" data-glide-el="controls[nav]">
+          <button class="glide__bullet" data-glide-dir="=0"></button>
+          <button class="glide__bullet" data-glide-dir="=1"></button>
+          <button class="glide__bullet" data-glide-dir="=2"></button>
+
+      </div>
       </div>
 
       <!-- <div class="wrapper">
@@ -1181,6 +1184,9 @@ <h3 class="footer-heading">Links</h3>
       const configuration = {
         type: "carousel",
         perView: 3,
+        autoplay: 3000,
+        hoverpause: true,
+        focusAt: "center",
         breakpoints: {
           600: {
             perView: 1,