Merge pull request #12 from Aaravshukla15/main

Updated Speakers part
OpInCo-Community · Aug 15, 2023 · 5d1b7b6 · 5d1b7b6
2 parents 0999726 + 094c6b7
commit 5d1b7b6
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 59 deletions.
diff --git a/asset/Aritra Image.png b/asset/Aritra Image.png
diff --git a/asset/Ritwik Img.png b/asset/Ritwik Img.png
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
       href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
     <link rel="stylesheet" href="styles.css" />
     <title>Keras Community Day</title>
   </head>
@@ -57,57 +58,8 @@ <h1 class="section__subtitle">
       </div>
     </header>
 
-    <!--  <section class="section__container Speaker__container">
-      <div class="section__header">
-        <div>
-          <h2 class="section__title">Speakers & Talks</h2>
-          <p class="section__subtitle">
-          There are many brilliant speakers who wil join us at this event to share their experience and knowledge over Keras.         
-          </p>
-          <br/>
-          <br />
-          <p class="section__subtitle">Folks wait for a while... Speakers Woukd be announced very Soon.</p>
-        </div>
-        <div class="Speaker__nav">
-          <span><i class="ri-group-2-fill"></i></span>
-          <span><i class="ri-user-voice-fill"></i></span>
-        </div>
-      </div>
-      <div class="Speaker__grid">
-        <div class="Speaker__card">
-          <img src="asset/Speaker-M(1).png" alt="Speaker" />
-          <div class="Speaker__details">
-            <p class="Speaker__title">Anounced Soon</p>
-            <p class="Speaker__subtitle">Going to give a talk on</p>
-            <p class="Speaker__subtitle">Available Soon</p>
-          </div>
-        </div>
-        <div class="Speaker__card">
-          <img src="asset/Speaker-F (2).png" alt="Speaker" />
-          <div class="Speaker__details">
-            <p class="Speaker__title">Anounced Soon</p>
-            <p class="Speaker__subtitle">Going to give a talk on</p>
-            <p class="Speaker__subtitle">Available Soon</p>
-          </div>
-        </div>
-        <div class="Speaker__card">
-          <img src="asset/Speaker-M(1).png" alt="Speaker" />
-          <div class="Speaker__details">
-            <p class="Speaker__title">Anounced Soon</p>
-            <p class="Speaker__subtitle">Going to give a talk on</p>
-            <p class="Speaker__subtitle">Available Soon</p>
-      </div>
-        </div>
-        <div class="Speaker__card">
-          <img src="asset/Speaker-F (2).png" alt="Speaker" />
-          <div class="Speaker__details">
-            <p class="Speaker__title">Anounced Soon</p>
-            <p class="Speaker__subtitle">Going to give a talk on</p>
-            <p class="Speaker__subtitle">Available Soon</p>
-          </div>
-        </div>
-      </div>
-    </section> -->
+
+    <!-- cfp -->
 
     <section class="cfp">
       <h2 class="section__titles">Call for Speakers</h2>
@@ -134,6 +86,26 @@ <h2>CFP <br />CALL FOR PAPER</h2>
       </div>
     </section>
 
+    <!-- Our Speakers -->
+
+    <section class="speakers">
+      <h2 class="speakers_titles">Our Speakers</h2>
+      <div class="swiper-container">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" >
+            <img src="asset/Aritra Image.png" />
+          </div>
+          <div class="swiper-slide" ><img src="asset/Ritwik Img.png" /></div>
+          <!-- <div class="swiper-slide" ><img src="asset\Speaker-M(1).png" /></div> -->
+        </div>
+        <div class="swiper-pagination"></div>
+      </div>
+    </section>
+
+
+
+    <!-- Explore Keras -->
+
     <section class="explore" id="expk">
       <div class="section__container explore__container">
         <h2 class="section__title">Explore Keras</h2>
@@ -349,5 +321,31 @@ <h4>Venue Details</h4>
           .catch(error => console.error('Error!', error.message))
       })
     </script>
+
+    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
+
+    <script>
+      var swiper = new Swiper('.swiper-container', {
+          pagination: '.swiper-pagination',
+          effect: 'coverflow',
+          grabCursor: true,
+          centeredSlides: true,
+          slidesPerView: 'auto',
+          coverflow: {
+            rotate: 20,
+            stretch: 0,
+            depth: 200,
+            modifier: 1,
+            slideShadows: true
+          },
+          loop: true,
+          autoplay: {
+            delay:1000,
+            disableOnInteraction:false,
+          }
+        });
+    </script>
+
+
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -334,6 +334,9 @@ header {
   font-weight: 600;
 }
 
+
+
+
 /* cfp start */
 
 .cfp{
@@ -424,6 +427,42 @@ header {
   transform: translate(-45%, -55%);
 }
 
+/* speakers */
+
+
+
+.speakers_titles{
+  font-size: 3rem;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin-bottom: 0%;
+  /* margin-top: 2rem; */
+  text-align: center;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.swiper-container {
+  width: 100%;
+  height: 500px;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  margin-bottom: 50px;
+}
+
+.swiper-wrapper{
+  width: 800px;
+}
+.swiper-slide {
+  background-position: center;
+  background-size: cover;
+  width: 300px;
+  height: 419px;
+  background-color: #2E2E2E;
+  /* min-height: 100vh; */
+}
+
+
 /* explore start */
 
 .explore {
@@ -569,8 +608,11 @@ header {
 }
 
 .gallary__col1 img {
+  border: 0.5rem solid var(--extra-lighter);
   border-radius: 1rem;
-  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: 5px 5px 30px #2E2E2E;
+  /* border-radius: 1rem;
+  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); */
 }
 
 .gallary__col1 {
@@ -588,25 +630,30 @@ header {
 }
 
 .gallary__col2 img {
+  /* border-radius: 1rem;
+  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); */
+  border: 0.5rem solid var(--extra-lighter);
   border-radius: 1rem;
-  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: 5px 5px 30px #2E2E2E;
 }
 
 .image1 {
-  transition: transform 0.7s ease;
+  /* transition: transform 0.7s ease; */
+  transform: translate(-13%, 8%);
 }
 
-.image1:hover {
+/* .image1:hover {
   transform: scale(1.2);
-}
+} */
 
 .image2 {
-  transition: transform 0.7s ease;
+  /* transition: transform 0.7s ease; */
+  transform: translate(-13%, -4%);
 }
 
-.image2:hover {
+/* .image2:hover {
   transform: scale(1.2);
-}
+} */
 
 .gallary__content {
   display: flex;
@@ -838,6 +885,14 @@ height: 60px;
   }
 }
 
+@media (width < 600px) {
+  .swiper-wrapper{
+    align-items: center;
+    max-width: 300px;
+  }
+
+}
+
 @media (width < 600px) {
   .Speaker__grid {
     grid-template-columns: repeat(2, 1fr);