Merge pull request 'First commit' (#1) from Dev into main
Reviewed-on: #1
This commit is contained in:
commit
316dd679c7
97
index.html
Normal file
97
index.html
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Interactive Sliders</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.0.4/swiper-bundle.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Partners Slider -->
|
||||
<div class="partners-slider">
|
||||
<div class="swiper partners-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide partners-slide">
|
||||
<img src="src/partner1.jpg" alt="Partner 1">
|
||||
</div>
|
||||
<div class="swiper-slide partners-slide">
|
||||
<img src="src/partner2.png" alt="Partner 2">
|
||||
</div>
|
||||
<div class="swiper-slide partners-slide">
|
||||
<img src="src/partner3.jpeg" alt="Partner 3">
|
||||
</div>
|
||||
<div class="swiper-slide partners-slide">
|
||||
<img src="src/partner4.png" alt="Partner 4">
|
||||
</div>
|
||||
<div class="swiper-slide partners-slide">
|
||||
<img src="src/partner5.png" alt="Partner 5">
|
||||
</div>
|
||||
<div class="swiper-slide partners-slide">
|
||||
<img src="src/partner6.png" alt="Partner 6">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services Sliders -->
|
||||
<div class="services-container">
|
||||
<!-- Image Slider -->
|
||||
<div class="services-image-slider">
|
||||
<div class="swiper services-image-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
<div class="swiper-slide">
|
||||
<img src="src/service1.webp" alt="Evil Genius Games" class="service-image">
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<img src="src/service2.webp" alt="Involvvely" class="service-image">
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<img src="src/service3.webp" alt="Earthlink" class="service-image">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Slider -->
|
||||
<div class="services-info-slider">
|
||||
<div class="swiper services-info-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="service-info">
|
||||
<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>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="service-info">
|
||||
<h3>Involvvely</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>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="service-info">
|
||||
<h3>Earthlink</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. Through meticulous planning, implementation, and ongoing support, we helped Earthlink maintain its position as a frontrunner in the digital connectivity landscape.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.0.4/swiper-bundle.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
39
script.js
Normal file
39
script.js
Normal file
|
|
@ -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;
|
||||
|
||||
BIN
src/partner1.jpg
Normal file
BIN
src/partner1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/partner2.png
Normal file
BIN
src/partner2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/partner3.jpeg
Normal file
BIN
src/partner3.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
src/partner4.png
Normal file
BIN
src/partner4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/partner5.png
Normal file
BIN
src/partner5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/partner6.png
Normal file
BIN
src/partner6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
src/service1.webp
Normal file
BIN
src/service1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
src/service2.webp
Normal file
BIN
src/service2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/service3.webp
Normal file
BIN
src/service3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
99
style.css
Normal file
99
style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue