Merge pull request 'Code Review For Assignment-3' (#1) from dev into master

Reviewed-on: #1 Reviewed-by: Sumit Kumar <sumit.kumar@digimantra.com>
2025-01-03 11:56:48 +00:00 · 2025-01-03 11:56:48 +00:00 · 2c5517e463
parent 833c0dd6f0 57f0dbfc7e
commit 2c5517e463
12 changed files with 229 additions and 0 deletions
--- a/1/Assignment-3/images/adobe.png
+++ b/1/Assignment-3/images/adobe.png
--- a/1/Assignment-3/images/adobe1.png
+++ b/1/Assignment-3/images/adobe1.png
--- a/1/Assignment-3/images/aws.png
+++ b/1/Assignment-3/images/aws.png
--- a/1/Assignment-3/images/elink.jpg
+++ b/1/Assignment-3/images/elink.jpg
--- a/1/Assignment-3/images/evil.jpg
+++ b/1/Assignment-3/images/evil.jpg
--- a/1/Assignment-3/images/involv.jpg
+++ b/1/Assignment-3/images/involv.jpg
--- a/1/Assignment-3/images/magento.png
+++ b/1/Assignment-3/images/magento.png
--- a/1/Assignment-3/images/microsoft.png
+++ b/1/Assignment-3/images/microsoft.png
--- a/1/Assignment-3/images/shopify.png
+++ b/1/Assignment-3/images/shopify.png
--- a/1/Assignment-3/index.html
+++ b/1/Assignment-3/index.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
+    <link rel="stylesheet" href="style.css">
+    <title>Slider-Assignment-3</title>
+</head>
+<body>
+      <div class="container">
+        <div class="swiper">
+          <div class="swiper-wrapper">
+    <div class="swiper-slide"><img src="images/microsoft.png" alt="microsoft"> </div>
+    <div class="swiper-slide"><img src="images/aws.png" alt="aws"></div>
+    <div class="swiper-slide"><img src="images/adobe1.png" alt="adobe"> </div>
+    <div class="swiper-slide"><img src="images/magento.png" alt="magento"> </div>
+          </div>
+        </div>
+      </div>
+
+  <!--Feature Project-->
+  <div class="featured-projects-section">
+    <h2 class="project-title">Featured Projects</h2>
+
+    <div class="project-container">
+        
+        <div class="swiper info-slider">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <h3>Involvvely Parenting Resource</h3>
+                    <p>Involvvely functions as a comprehensive Parent Resource and school platform, fosteringconnections among community parents. Our team played a pivotal role in developing and designing their platform, ensuring seamless integration and user-friendly interfaces. Our technical contributions streamlined Involvvely's platform, allowing parents to get more involved in their children's education using their innovative ideas.</p>
+                </div>
+                <div class="swiper-slide">
+                    <h3 >EarthLink Fiber Internet</h3>
+                    <p>Earthlink epitomizes leadership in digital innovation, seamlessly blending advanced technology with unbeatable connectivity. Our team led the development and design efforts for their digital infrastructure, ensuring seamless integration and optimal performance. Earthlink maintain its position as a frontrunner in the digital connectivity landscape.</p>
+                </div>
+                <div class="swiper-slide">
+                    <h3 >Evil Genius Games</h3>
+                    <p >Evil Genius Games invites players to dive into captivating tabletop RPG experiences, seamlessly blending strategic depth with immersive gameplay. Our team led the development of their digital platform, ensuring intuitive interfaces and dynamic mechanics. Our collaboration has solidified Evil Genius Games as an industry leader in immersive gaming experiences.</p>
+                </div>
+               
+                
+              
+            </div> 
+            <!--Functionality available-->
+            <div class="swiper-pagination"></div>
+        </div>
+
+        <div class="swiper image-slider">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <img src="images/involv.jpg" alt="Involvvely Parenting Resource">
+                </div>
+                <div class="swiper-slide">
+                    <img src="images/elink.jpg" alt="EarthLink Fiber Internet">
+                </div>
+                <div class="swiper-slide">
+                    <img src="images/evil.jpg" alt="Evil Genius Games">
+                </div>
+               
+            </div>
+        </div>
+    </div>
+
+</div>
+
+
+      <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>
--- a/1/Assignment-3/script.js
+++ b/1/Assignment-3/script.js
@ -0,0 +1,65 @@
+const swiper = new Swiper(".container .swiper",{
+    spaceBetween: 30,
+    slidesPerView: "auto",
+    loop: true,
+    speed: 4000,
+    freeMode: true,
+    allowTouchMove: false,
+    autoplay: {
+        delay: 0, 
+        disableOnInteraction: false, 
+    }
+    
+});
+
+function stopAutoplay() {
+    const swiperTranslate = swiper.getTranslate();
+    swiper.setTranslate(swiperTranslate);
+    swiper.autoplay.stop();
+}
+
+function startAutoplay() {
+    swiper.slideTo(swiper.activeIndex, 2000, false);
+    swiper.autoplay.start();
+}
+
+const container = document.querySelector(".swiper");
+container.addEventListener("mouseenter",() => stopAutoplay());
+container.addEventListener("mouseleave",() => startAutoplay());
+
+
+//Featured Slider
+const imageSlider = new Swiper(".image-slider", {
+    loop:true,
+    slidesPerView: 3,
+    centeredSlides: true,
+    effect: "coverflow",
+    coverflowEffect: {         
+        rotate: 0,              
+        depth: 200,            
+        stretch: 30,            
+        modifier: 1,            
+        scale: 1,               
+        slideShadows: false,    
+    },                          
+   
+    grabCursor:true,
+});
+
+
+const infoSlider = new Swiper(".info-slider", {
+    loop: true,
+    autoplay:false,
+    grabCursor: true,
+    
+    allowTouchMove: true, 
+    pagination: {                     
+        el: '.swiper-pagination',
+        clickable: true,
+    },
+    
+    
+});
+
+imageSlider.controller.control = infoSlider;
+infoSlider.controller.control = imageSlider;
--- a/1/Assignment-3/style.css
+++ b/1/Assignment-3/style.css
@ -0,0 +1,91 @@
+html, body {
+    margin:0;
+    
+}
+
+.container {
+    width: 100vw;
+    height: 10vh;
+    
+}
+
+.swiper {
+    width: 100%;
+    height: 100%;
+}
+
+.swiper-slide {
+    display: flex;
+    overflow: hidden;
+    border-radius: 10px;
+    /* box-shadow: 0 4px 8px rgba(9, 9, 9, 0.4); */
+}
+
+.swiper-slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #fff;
+}
+
+.featured-projects-section {
+    width: 70%;
+    height: 70%;
+    margin: 0 auto;
+    margin-top: 10px;
+    padding: 10px 0;
+}
+
+.project-title {
+    font-size: 26px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.project-container {
+    display: flex;
+    
+}
+
+.image-slider .swiper-slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border-radius: 10px;
+}
+
+.info-slider .swiper-slide {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start; 
+    text-align: left;
+    padding: 0px;
+    background-color: #ffffff;
+    /* border-radius: 10px; */
+    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
+    width: 100%;
+}
+
+.info-slider .swiper-slide h3 {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.info-slider .swiper-slide p {
+    font-size: 16px;
+    color: #555;
+}
+
+
+.project-container .swiper {
+    margin-top: 30px;
+    width: 100%;
+    height: 500px;
+}