diff --git a/index.html b/index.html new file mode 100644 index 0000000..9e07024 --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ + + + + + + Interactive Sliders + + + + +
+ +
+
+
+
+ Partner 1 +
+
+ Partner 2 +
+
+ Partner 3 +
+
+ Partner 4 +
+
+ Partner 5 +
+
+ Partner 6 +
+
+
+
+ + +
+ +
+
+
+ +
+ Evil Genius Games +
+ +
+ Involvvely +
+ +
+ Earthlink +
+ + +
+
+
+ + +
+
+
+ +
+
+

Evil Genius Games

+

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.

+
+
+ +
+
+

Involvvely

+

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.

+
+
+ +
+
+

Earthlink

+

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. Through meticulous planning, implementation, and ongoing support, we helped Earthlink maintain its position as a frontrunner in the digital connectivity landscape.

+
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..bea1b62 --- /dev/null +++ b/script.js @@ -0,0 +1,39 @@ +const partnersSwiper = new Swiper('.partners-swiper', { + slidesPerView: 3, + spaceBetween: 30, + loop: true, + autoplay: { + delay: 1000, + }, + speed: 1000, +}); + +document.querySelector('.partners-swiper').addEventListener('mouseenter', () => { + partnersSwiper.autoplay.stop(); +}); + +document.querySelector('.partners-swiper').addEventListener('mouseleave', () => { + partnersSwiper.autoplay.start(); +}); + + +// Services Sliders +const servicesImageSwiper = new Swiper('.services-image-swiper', { + slidesPerView: 1.5, // Show partial next/previous slides + centeredSlides: true, + spaceBetween: 30, + speed: 800, + loop: true, +}); + +const servicesInfoSwiper = new Swiper('.services-info-swiper', { + slidesPerView: 1, + spaceBetween: 30, + speed: 800, + loop: true, +}); + +// Sync both services sliders +servicesImageSwiper.controller.control = servicesInfoSwiper; +servicesInfoSwiper.controller.control = servicesImageSwiper; + diff --git a/src/partner1.jpg b/src/partner1.jpg new file mode 100644 index 0000000..0e7c539 Binary files /dev/null and b/src/partner1.jpg differ diff --git a/src/partner2.png b/src/partner2.png new file mode 100644 index 0000000..4e1def4 Binary files /dev/null and b/src/partner2.png differ diff --git a/src/partner3.jpeg b/src/partner3.jpeg new file mode 100644 index 0000000..285ed35 Binary files /dev/null and b/src/partner3.jpeg differ diff --git a/src/partner4.png b/src/partner4.png new file mode 100644 index 0000000..72cc7de Binary files /dev/null and b/src/partner4.png differ diff --git a/src/partner5.png b/src/partner5.png new file mode 100644 index 0000000..2ad09e0 Binary files /dev/null and b/src/partner5.png differ diff --git a/src/partner6.png b/src/partner6.png new file mode 100644 index 0000000..e64b988 Binary files /dev/null and b/src/partner6.png differ diff --git a/src/service1.webp b/src/service1.webp new file mode 100644 index 0000000..ddd0739 Binary files /dev/null and b/src/service1.webp differ diff --git a/src/service2.webp b/src/service2.webp new file mode 100644 index 0000000..d4d526c Binary files /dev/null and b/src/service2.webp differ diff --git a/src/service3.webp b/src/service3.webp new file mode 100644 index 0000000..2c1812c Binary files /dev/null and b/src/service3.webp differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..04c733d --- /dev/null +++ b/style.css @@ -0,0 +1,99 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + padding: 20px; +} + +.container { + max-width: 1200px; + margin: 0 auto; +} + +/* Partners Slider Styles */ +.partners-slider { + background: #f5f5f5; + padding: 40px 0; + margin-bottom: 40px; +} + +.partners-slide { + height: 100px; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.partners-slide img { + max-width: 150px; + max-height: 100px; + object-fit: contain; + margin: 30px; + cursor: pointer; + transition: filter 0.3s ease; +} + +.partners-slide img:hover { + filter: grayscale(0%); +} + +.services-container { + display: flex; + align-items: center; + gap: 30px; + margin-top: 50px; +} + +.services-image-slider, +.services-info-slider { + width: 50%; +} + +/* Image styling */ +.service-image { + width: 100%; + object-fit: cover; + height: 100%; + border-radius: 10px; /* Optional for rounded corners */ +} + +/* Align service info content */ +.service-info { + padding: 30px; + background: #f8f8f8; + border-radius: 10px; + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; +} + +.service-info h3 { + margin-bottom: 15px; + color: #333; + font-size: 1.6rem; +} + +.service-info p { + color: #666; + line-height: 1.6; +} + +/* Services Image Slider - Opacity on Inactive Slides */ +.services-image-swiper { + padding: 0 20px; +} + +.services-image-swiper .swiper-slide { + opacity: 0.4; + transition: opacity 0.3s ease; +} + +.services-image-swiper .swiper-slide-active { + opacity: 1; +}