From 43d2c61505c5c4bfde1f642b17bada7571e45870 Mon Sep 17 00:00:00 2001 From: bansh_dml Date: Mon, 30 Dec 2024 14:42:21 +0530 Subject: [PATCH] Changes made and implement swiper library --- index.html | 89 ++++++++++------- scripts.js | 81 +++++++-------- styles.css | 287 ++++++++++++++++++++++++----------------------------- 3 files changed, 220 insertions(+), 237 deletions(-) diff --git a/index.html b/index.html index 1c47443..4107bde 100644 --- a/index.html +++ b/index.html @@ -3,45 +3,64 @@ - Creating image Slider - - + Featured Projects + + + - -

Featured Projects

-

Learn how we are delivering cutting-edge solutions and transforming businesses.

-
-
-

EarthLink Fiber Internet

-

- 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. -

-
- - - -
+
+ +
+ +
+

EarthLink Fiber Internet

+

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.

-
- EarthLink Project - Involvvely Project - Evil Genius Project +
+

Evil Genius Games

+

Evil Genius Games redefines immersive gaming experiences with their innovative tabletop RPGs. Our collaboration focused on creating a seamless digital platform to support their creative storytelling and gaming mechanics.

+
+
+

Involvvely

+

Involvvely simplifies team collaboration with innovative tools designed to enhance productivity and communication. We developed a platform that empowers teams to work smarter and achieve their goals efficiently.

+
+ +
+
+
+
- -
-
- 3M Logo - Barstool Store Logo - Budweiser Logo - Buzzfeed Logo - Forbes Logo - Macy's Logo - Men's Health Logo - MrBeast Logo + + +
+
+ EarthLink Project
-
- +
+ Evil Genius Project +
+
+ Involvvely Project +
+
+
+ +
+
+ 3M Logo + Barstool Store Logo + Budweiser Logo + Buzzfeed Logo + Forbes Logo + Macy's Logo + Men's Health Logo + MrBeast Logo +
+
+ + + - \ No newline at end of file + diff --git a/scripts.js b/scripts.js index f80b559..27619bb 100644 --- a/scripts.js +++ b/scripts.js @@ -1,53 +1,48 @@ var copy = document.querySelector(".logos-slide").cloneNode(true); document.querySelector(".logos").appendChild(copy); - const projects = [ - { - title: "EarthLink Fiber Internet", - text: "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.", - imageId: "image-1" - }, - { - title: "Evil Genius Games", - text: "Evil Genius Games redefines immersive gaming experiences with their innovative tabletop RPGs. Our collaboration focused on creating a seamless digital platform to support their creative storytelling and gaming mechanics.", - imageId: "image-2" - }, - { - title: "Involvvely", - text: "Involvvely simplifies team collaboration with innovative tools designed to enhance productivity and communication. We developed a platform that empowers teams to work smarter and achieve their goals efficiently.", - imageId: "image-3" - } - ]; - let currentProjectIndex = 0; +// Get all images, descriptions, pagination buttons +const images = document.querySelectorAll(".swiper-slide"); +const descriptions = document.querySelectorAll(".project-description"); +const paginationButtons = document.querySelectorAll(".pagination-button"); - function updateProjectDisplay() { - const titleElement = document.getElementById("project-title"); - const textElement = document.getElementById("project-text"); +let currentIndex = 0; // Start with the first slide - // Update title and text - titleElement.textContent = projects[currentProjectIndex].title; - textElement.textContent = projects[currentProjectIndex].text; +// Function to update the displayed content based on the current index +function updateContent(index) { + // Hide all descriptions + descriptions.forEach((desc) => { + desc.classList.remove("active"); + }); - // Update active image - document.querySelectorAll(".project-cards img").forEach((img, index) => { - img.classList.toggle("active", index === currentProjectIndex); - }); + // Show the current description + const selectedDescription = document.getElementById(`description-${index}`); + if (selectedDescription) { + selectedDescription.classList.add("active"); + } - // Update indicators - document.querySelectorAll(".indicators span").forEach((indicator, index) => { - indicator.classList.toggle("active", index === currentProjectIndex); - }); - } + // Update pagination active class + paginationButtons.forEach((button) => { + button.classList.remove("active"); + }); + paginationButtons[index].classList.add("active"); +} - function nextProject() { - currentProjectIndex = (currentProjectIndex + 1) % projects.length; - updateProjectDisplay(); - } +// Event listeners for image clicks +images.forEach((image, index) => { + image.addEventListener("click", () => { + currentIndex = index; + updateContent(currentIndex); + }); +}); - function goToProject(index) { - currentProjectIndex = index; - updateProjectDisplay(); - } +// Event listeners for pagination buttons +paginationButtons.forEach((button, index) => { + button.addEventListener("click", () => { + currentIndex = index; + updateContent(currentIndex); + }); +}); - // Initialize display - updateProjectDisplay(); \ No newline at end of file +// Initialize the content (first image and description are visible) +updateContent(currentIndex); diff --git a/styles.css b/styles.css index 63098be..572047d 100644 --- a/styles.css +++ b/styles.css @@ -1,204 +1,173 @@ -body { - font-family: Arial, sans-serif; +* { margin: 0; padding: 0; + box-sizing: border-box; +} + +body { + background: #f2f2f2; +} + +@keyframes slide { + from { + transform: translateX(0); + } + to { + transform: translateX(-100%); + } +} + +.logos { + overflow: hidden; + padding: 60px 0; + background: white; + white-space: nowrap; + position: relative; +} + +.logos:before, +.logos:after { + position: absolute; + top: 0; + width: 250px; + height: 100%; + content: ""; + z-index: 2; +} + +.logos:before { + left: 0; + background: linear-gradient(to left, rgba(255, 255, 255, 0), white); +} + +.logos:after { + right: 0; + background: linear-gradient(to right, rgba(255, 255, 255, 0), white); +} + +.logos:hover .logos-slide { + animation-play-state: paused; +} + +.logos-slide { + display: inline-block; + animation: 35s slide infinite linear; +} + +.logos-slide img { + height: 50px; + margin: 0 40px; +} + +body { + background: #f2f2f2; display: flex; - flex-direction: column; /* Stack elements vertically */ - justify-content: flex-start; /* Align items at the top */ - align-items: center; - min-height: 100vh; /* Use min-height for scrolling */ - background-color: #f4f4f4; + flex-direction: column; + min-height: 100vh; } .featured-projects { display: flex; - flex-direction: row; - align-items: center; + justify-content: space-between; + padding: 20px; + background-color: white; + margin-bottom: 20px; + border-radius: 10px; width: 80%; max-width: 1200px; - background: white; - padding: 20px; + margin: 20px auto; + flex-grow: 1; +} + +.swiper { + display: flex; + justify-content: space-between; + width: 100%; + gap: 20px; +} + +.swiper-slide { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + transition: transform 0.5s ease-in-out; +} + +.swiper-slide img { + width: 100%; + height: auto; + max-width: 250px; + height: 300px; + object-fit: cover; border-radius: 10px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + transition: transform 0.5s, box-shadow 0.5s; +} + +.swiper-slide img:hover { + transform: scale(1.05); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); +} + +.description-container { + width: 35%; + padding-left: 20px; + display: flex; + flex-direction: column; + justify-content: center; } .project-description { - flex: 1; text-align: left; - margin-right: 20px; + display: none; } -.project-description h1 { - font-size: 24px; - margin-bottom: 10px; +.project-description.active { + display: block; } -.project-description p { - font-size: 16px; - color: #555; -} - -.indicators { +.pagination-container { display: flex; justify-content: center; margin-top: 20px; } -.indicators span { +.pagination-button { width: 12px; height: 12px; margin: 0 5px; - background-color: #ccc; border-radius: 50%; + background-color: #888; cursor: pointer; transition: background-color 0.3s; } -.indicators span.active { - background-color: #007bff; +.pagination-button.active { + background-color: #333; } -.project-cards { - display: flex; - flex: 1; - justify-content: center; - align-items: center; - gap: 20px; /* Adds space between images */ -} - -.project-cards img { - width: 200px; - height: 300px; - object-fit: cover; - border-radius: 10px; - transition: transform 0.5s, box-shadow 0.5s; /* Adds smooth transition effects */ - cursor: pointer; -} - -.project-cards img:hover { - transform: scale(1.05); /* Slightly enlarges the image on hover */ - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Adds shadow effect on hover */ -} - -.project-cards img.active { - transform: scale(1.1); - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Stronger shadow for active image */ -} - -* { -margin: 0; -padding: 0; -box-sizing: border-box; -} - -body { -background: #f2f2f2; -} - -@keyframes slide { -from { - transform: translateX(0); -} -to { - transform: translateX(-100%); -} -} - -.logos { -overflow: hidden; -padding: 60px 0; -background: white; -white-space: nowrap; -position: relative; -} - -.logos:before, -.logos:after { -position: absolute; -top: 0; -width: 250px; -height: 100%; -content: ""; -z-index: 2; -} - -.logos:before { -left: 0; -background: linear-gradient(to left, rgba(255, 255, 255, 0), white); -} - -.logos:after { -right: 0; -background: linear-gradient(to right, rgba(255, 255, 255, 0), white); -} - -.logos:hover .logos-slide { -animation-play-state: paused; -} - -.logos-slide { -display: inline-block; -animation: 35s slide infinite linear; -} - -.logos-slide img { -height: 50px; -margin: 0 40px; -} - - -/* Responsive Design */ @media (max-width: 768px) { .featured-projects { flex-direction: column; - padding: 10px; } - .project-description { - margin-right: 0; - text-align: center; + .swiper { + width: 100%; + margin-bottom: 20px; } - .project-description h1 { - font-size: 20px; + .description-container { + width: 100%; } - .project-description p { - font-size: 14px; - } - - .project-cards { - flex-direction: column; - gap: 10px; - } - - .project-cards img { - width: 150px; - height: 225px; - } - - .logos-slide img { - height: 40px; - margin: 0 10px; + .swiper-slide img { + width: 100%; } } -@media (max-width: 480px) { - .project-description h1 { - font-size: 18px; - } - - .project-description p { - font-size: 12px; - } - - .project-cards img { - width: 120px; - height: 180px; - } - - .logos-slide img { - height: 30px; - margin: 0 5px; - } -} \ No newline at end of file +footer { + background-color: #fff; + padding: 20px; + text-align: center; + margin-top: 20px; +}