diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..40626a9 Binary files /dev/null and b/.DS_Store differ diff --git a/image/.DS_Store b/image/.DS_Store new file mode 100644 index 0000000..c86103e Binary files /dev/null and b/image/.DS_Store differ diff --git a/image/elink.webp b/image/elink.webp new file mode 100644 index 0000000..a19adbc Binary files /dev/null and b/image/elink.webp differ diff --git a/image/evil.webp b/image/evil.webp new file mode 100644 index 0000000..ddd0739 Binary files /dev/null and b/image/evil.webp differ diff --git a/image/img1.png b/image/img1.png new file mode 100644 index 0000000..91b605c Binary files /dev/null and b/image/img1.png differ diff --git a/image/img2.png b/image/img2.png new file mode 100644 index 0000000..70289a0 Binary files /dev/null and b/image/img2.png differ diff --git a/image/img3.png b/image/img3.png new file mode 100644 index 0000000..504113f Binary files /dev/null and b/image/img3.png differ diff --git a/image/img4.png b/image/img4.png new file mode 100644 index 0000000..89911e2 Binary files /dev/null and b/image/img4.png differ diff --git a/image/img5.png b/image/img5.png new file mode 100644 index 0000000..a3704f1 Binary files /dev/null and b/image/img5.png differ diff --git a/image/involv.webp b/image/involv.webp new file mode 100644 index 0000000..3012611 Binary files /dev/null and b/image/involv.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..062c478 --- /dev/null +++ b/index.html @@ -0,0 +1,81 @@ + + + + + + Service Sliders + + + + + + +
+
+
+
+ Brand 1 +
+
+ Brand 2 +
+
+ Brand 3 +
+
+ Brand 4 +
+
+ Brand 5 +
+
+
+
+ +
+ +
+
+
+
+

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

+
+
+

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.

+
+
+

Involved parenting emphasizes active participation in a child's life, fostering emotional support and guidance. Resources include books, workshops.

+
+
+
+
+ + +
+
+
+
+ Service 1 +
+
+ Service 2 +
+
+ Service 3 +
+
+ + +
+
+
+ + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..b0561b9 --- /dev/null +++ b/script.js @@ -0,0 +1,36 @@ + +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; + diff --git a/style.css b/style.css new file mode 100644 index 0000000..1d2c242 --- /dev/null +++ b/style.css @@ -0,0 +1,77 @@ +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%; + } + } + \ No newline at end of file