added carousel dots

TanishqSharma2022 · Dec 3, 2023 · 4ca5c80 · 4ca5c80
1 parent 1f9339d
commit 4ca5c80
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 34 deletions.
diff --git 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
@@ -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,