From f61de0c0d69f40454c61154ecd00302939179486 Mon Sep 17 00:00:00 2001 From: Eknoor Singh Date: Tue, 31 Dec 2024 12:13:16 +0530 Subject: [PATCH] latest changes --- index.html | 126 ++++++++++++++++---------------- js/script.js | 80 ++++++++++---------- style/index.css | 190 ++++++++++++++++++++++++------------------------ 3 files changed, 198 insertions(+), 198 deletions(-) diff --git a/index.html b/index.html index a06e57f..fe6af87 100644 --- a/index.html +++ b/index.html @@ -1,75 +1,75 @@ - - - - - Swiper Slider - - - - - -
-

Our Partners

-
- -
-
-
-
- Image 1 -
-
- Image 2 -
-
- Image 3 -
-
+ + + + + Swiper Slider + + + + + +
+

Our Partners

-
- -
-

Featured Projects

- -
-
+ +
+
-

EarthLink Fiber Internet

-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!

-
- -
-

Evil Genius Games

-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!

+ Image 1
-

Involvvely Parenting Resource

-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!

-
- - -
-
-
- -
-
-
- Involvvely + Image 2
- EarthLink -
-
- Evil + Image 3
-
- - - - \ No newline at end of file +
+

Featured Projects

+ +
+
+
+
+

EarthLink Fiber Internet

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!

+
+ +
+

Evil Genius Games

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!

+
+
+

Involvvely Parenting Resource

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!

+
+ + +
+
+
+ +
+
+
+ Involvvely +
+
+ EarthLink +
+
+ Evil +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js index 22080c3..3dbc46e 100644 --- a/js/script.js +++ b/js/script.js @@ -1,44 +1,44 @@ -const partnersSlider = new Swiper('.partners-slider .swiper', { - direction: 'horizontal', - loop: true, - autoplay: { - delay: 800, - disableOnInteraction: false, - }, -}); + const partnersSlider = new Swiper('.partners-slider .swiper', { + direction: 'horizontal', + loop: true, + autoplay: { + delay: 800, + disableOnInteraction: false, + }, + }); -const partnersSliderElement = document.querySelector('.partners-slider .swiper'); -if (partnersSliderElement) { - partnersSliderElement.addEventListener('mouseenter', () => partnersSlider.autoplay.stop()); - partnersSliderElement.addEventListener('mouseleave', () => partnersSlider.autoplay.start()); -} + const partnersSliderElement = document.querySelector('.partners-slider .swiper'); + if (partnersSliderElement) { + partnersSliderElement.addEventListener('mouseenter', () => partnersSlider.autoplay.stop()); + partnersSliderElement.addEventListener('mouseleave', () => partnersSlider.autoplay.start()); + } -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, - allowTouchMove: true, -}); + 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, + allowTouchMove: true, + }); -const infoSlider = new Swiper(".info-slider", { - loop: true, - grabCursor: true, - allowTouchMove: true, - pagination: { - el: '.swiper-pagination', - clickable: true, - }, -}); + const infoSlider = new Swiper(".info-slider", { + loop: true, + grabCursor: true, + allowTouchMove: true, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + }); -imageSlider.controller.control = infoSlider; -infoSlider.controller.control = imageSlider; \ No newline at end of file + imageSlider.controller.control = infoSlider; + infoSlider.controller.control = imageSlider; \ No newline at end of file diff --git a/style/index.css b/style/index.css index 63f782f..21100e7 100644 --- a/style/index.css +++ b/style/index.css @@ -1,112 +1,112 @@ -body { - display: flex; - flex-direction: column; - align-items: center; - background-color: #f9f9f9; - margin: 0; - font-family: Arial, sans-serif; -} + body { + display: flex; + flex-direction: column; + align-items: center; + background-color: #f9f9f9; + margin: 0; + font-family: Arial, sans-serif; + } -.slider-one-heading { - text-align: center; - margin: 20px 0; -} + .slider-one-heading { + text-align: center; + margin: 20px 0; + } -.slider-one-heading p { - font-size: 24px; - font-weight: bold; - color: #333; - margin: 0; -} + .slider-one-heading p { + font-size: 24px; + font-weight: bold; + color: #333; + margin: 0; + } -.swiper-container { - width: 50%; - height: auto; - cursor: pointer; -} + .swiper-container { + width: 50%; + height: auto; + cursor: pointer; + } -.swiper { - width: 100%; - height: 300px; - border-radius: 10px; - overflow: hidden; - background-color: #fff; -} + .swiper { + width: 100%; + height: 300px; + border-radius: 10px; + overflow: hidden; + background-color: #fff; + } -.swiper-slide { - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; - width: 50%; - height: 100%; -} + .swiper-slide { + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + width: 50%; + height: 100%; + } -.swiper-slide img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - border-radius: 10px; - padding: 50px; -} + .swiper-slide img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + border-radius: 10px; + padding: 50px; + } -.featured-projects-section { - width: 70%; - height: auto; - margin: 0 auto; - margin-top: 10px; - padding: 10px 0; -} + .featured-projects-section { + width: 70%; + height: auto; + margin: 0 auto; + margin-top: 10px; + padding: 10px 0; + } -.project-title { - font-size: 26px; - margin-bottom: 20px; - text-align: center; -} + .project-title { + font-size: 26px; + margin-bottom: 20px; + text-align: center; + } -.project-container { - display: flex; -} + .project-container { + display: flex; + } -.image-slider .swiper-slide img { - width: 100%; - height: 100%; - object-fit: contain; - border-radius: 10px; - -} + .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; - width: 100%; - /* opacity: 0.8; */ + .info-slider .swiper-slide { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + text-align: left; + padding: 0px; + background-color: #ffffff; + width: 100%; + /* opacity: 0.8; */ -} + } -.info-slider .swiper-slide h3 { - font-size: 24px; - margin-bottom: 10px; - color: #333; - margin-left: 50px; - /* opacity: 0.8; */ -} + .info-slider .swiper-slide h3 { + font-size: 24px; + margin-bottom: 10px; + color: #333; + margin-left: 50px; + /* opacity: 0.8; */ + } -.info-slider .swiper-slide p { - font-size: 16px; - color: #555; - margin-left: 50px; + .info-slider .swiper-slide p { + font-size: 16px; + color: #555; + margin-left: 50px; -} + } -.project-container .swiper { - margin-top: 30px; - width: 100%; - height: 500px; -} + .project-container .swiper { + margin-top: 30px; + width: 100%; + height: 500px; + }