Compare commits
No commits in common. "cd7a811b882120cdd3edee1761b6149552a27a3e" and "61995aa06c1aa1956f8600f0cb95e109499ae420" have entirely different histories.
cd7a811b88
...
61995aa06c
BIN
image/.DS_Store
vendored
BIN
image/.DS_Store
vendored
Binary file not shown.
BIN
image/elink.webp
BIN
image/elink.webp
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
BIN
image/evil.webp
BIN
image/evil.webp
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
BIN
image/img1.png
BIN
image/img1.png
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
BIN
image/img2.png
BIN
image/img2.png
Binary file not shown.
|
Before Width: | Height: | Size: 5 KiB |
BIN
image/img3.png
BIN
image/img3.png
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
BIN
image/img4.png
BIN
image/img4.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
BIN
image/img5.png
BIN
image/img5.png
Binary file not shown.
|
Before Width: | Height: | Size: 20 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
81
index.html
81
index.html
|
|
@ -1,81 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Service Sliders</title>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
|
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="style.css"/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="slider">
|
|
||||||
<div class="swiper" id="partners">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="image/img1.png" alt="Brand 1" />
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="image/img2.png" alt="Brand 2" />
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="image/img3.png" alt="Brand 3" />
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="image/img4.png" alt="Brand 4" />
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="image/img5.png" alt="Brand 5" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="services-container">
|
|
||||||
|
|
||||||
<div class="description">
|
|
||||||
<div class="swiper" id="services-info">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<p>EarthLink Fiber Internet offers high-speed, reliable connections with speeds up to 5 Gbps. It provides a stable, secure service with no data caps or throttling</p>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<p>Evil Genius Games specializes in creating strategy and simulation games where players take on the role of a villain, building secret lairs and executing diabolical plans.</p>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<p>Involved parenting emphasizes active participation in a child's life, fostering emotional support and guidance. Resources include books, workshops.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="image-slider">
|
|
||||||
<div class="swiper" id="services-images">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="image/elink.webp" alt="Service 1" />
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="image/evil.webp" alt="Service 2" />
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="image/involv.webp" alt="Service 3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
||||||
<script src="script.js" defer></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
36
script.js
36
script.js
|
|
@ -1,36 +0,0 @@
|
||||||
|
|
||||||
const partnersSwiper = new Swiper('#partners', {
|
|
||||||
slidesPerView: 4,
|
|
||||||
loop: true,
|
|
||||||
autoplay: {
|
|
||||||
delay: 0,
|
|
||||||
disableOnInteraction: false,
|
|
||||||
},
|
|
||||||
speed: 2000,
|
|
||||||
});
|
|
||||||
|
|
||||||
const partnersSliderElement = document.querySelector('#partners');
|
|
||||||
partnersSliderElement.addEventListener('mouseenter', () => {
|
|
||||||
partnersSwiper.autoplay.stop();
|
|
||||||
});
|
|
||||||
partnersSliderElement.addEventListener('mouseleave', () => {
|
|
||||||
partnersSwiper.autoplay.start();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const servicesImagesSwiper = new Swiper('#services-images', {
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.swiper-button-next',
|
|
||||||
prevEl: '.swiper-button-prev',
|
|
||||||
},
|
|
||||||
loop: true,
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
const servicesInfoSwiper = new Swiper('#services-info', {
|
|
||||||
loop: true
|
|
||||||
});
|
|
||||||
|
|
||||||
servicesImagesSwiper.controller.control = servicesInfoSwiper;
|
|
||||||
servicesInfoSwiper.controller.control = servicesImagesSwiper;
|
|
||||||
|
|
||||||
77
style.css
77
style.css
|
|
@ -1,77 +0,0 @@
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba(255, 255, 255, 0.599);
|
|
||||||
padding: 20px 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-slide img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 240px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
.swiper-slide1 {
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
background: white;
|
|
||||||
margin-left: -30px;
|
|
||||||
transition: transform 0.3s, opacity 0.3s;
|
|
||||||
opacity: 0.5;
|
|
||||||
transform: scale(0.9);
|
|
||||||
|
|
||||||
}
|
|
||||||
.swiper-slide {
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
background: white;
|
|
||||||
margin-left: -30px;
|
|
||||||
}
|
|
||||||
.services-container{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.description{
|
|
||||||
width: 40%;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
.image-slider{
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
@media(max-width: 768px){
|
|
||||||
.services-container{
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.description,.image-slider{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue