Update index.html

index.html

@@ -7,6 +7,8 @@
     <title>Chess Club IITK</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
+    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
+	<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"rel="stylesheet'>
     <link rel="stylesheet" href="style.css">
 
     <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
@@ -25,7 +27,7 @@
 
                 <a href="#home">Home</a>
                 <a href="#about">About</a>
-                <a href="#initiatives">Initiatives</a>
+                <a href="#initiative">Initiatives</a>
                 <a href="#events">Events</a>
                 <a href="#CMPL2023">CMPL2023</a>
                 <a href="#gallery">Gallery</a>
@@ -212,6 +214,113 @@ <h2 class="heading1">Initiatives</h2>
 
     </section>
 
+
+
+        <section class="initiative" id="initiative">
+        <h2 class="heading2">Initiatives</h2>
+        <div class="cardList">
+            <button class="cardList__btn btn btn--left">
+                <div class="icon">
+                    <svg>
+                        <use xlink:href="#arrow-left"></use>
+                    </svg>
+                </div>
+            </button>
+
+            <div class="cards__wrapper">
+                <div class="card current--card">
+                    <div class="card__image">
+                        <img src="Untitled design (30).svg" alt="" />
+                    </div>
+                </div>
+
+                <div class="card next--card">
+                    <div class="card__image">
+                        <img src="Untitled design (31).svg" alt="" />
+                    </div>
+                </div>
+
+                <div class="card previous--card">
+                    <div class="card__image">
+                        <img src="Untitled design (32).svg" alt="" />
+                    </div>
+                </div>
+            </div>
+
+            <button class="cardList__btn btn btn--right">
+                <div class="icon">
+                    <svg>
+                        <use xlink:href="#arrow-right"></use>
+                    </svg>
+                </div>
+            </button>
+        </div>
+
+        <div class="infoList">
+            <div class="info__wrapper">
+                <div class="info current--info">
+                    <h1 class="text name">CHESS IN SLUMS</h1>
+                    <h4 class="text location">Expanding chess community</h4>
+                    <p class="text description">#ChessforChange</p>
+                </div>
+
+                <div class="info next--info">
+                    <h1 class="text name">CHAMPIONSHIP CYCLE</h1>
+                    <h4 class="text location">Cycle specific for IITK</h4>
+                    <p class="text description">IITK Grand Swiss(incoming)</p>
+                </div>
+
+                <div class="info previous--info">
+                    <h1 class="text name">QUEEN'S GAMBIT</h1>
+                    <h4 class="text location">ONLY FOR GIRLS</h4>
+                    <p class="text description">Let your dreams come true</p>
+                </div>
+            </div>
+        </div>
+        <div class="app__bg">
+            <div class="app__bg__image current--image">
+                <img src="Untitled design (30).svg" alt="" />
+            </div>
+            <div class="app__bg__image next--image">
+                <img src="Untitled design (31).svg" alt="" />
+            </div>
+            <div class="app__bg__image previous--image">
+                <img src="Untitled design (32).svg" alt="" />
+            </div>
+        </div>
+    </div>
+
+    <div class="loading__wrapper">
+        <div class="loader--text">Please Wait...</div>
+        <div class="loader">
+            <span></span>
+        </div>
+    </div>
+
+
+    <svg class="icons" style="display: none;">
+        <symbol id="arrow-left" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+            <polyline points='328 112 184 256 328 400'
+                         style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
+        </symbol>
+        <symbol id="arrow-right" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+            <polyline points='184 112 328 256 184 400'
+                         style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
+        </symbol>
+    </svg>
+      <script src='https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js'></script><script  src="./ghi.js"></script>
+
+
+    </section>
+
+
+
+
+
+
+
+
     <section class="events" id="events">
         <h2 class="heading1">Events</h2>
         <div class="container">