Updated code with all the functionality
This commit is contained in:
parent
5bc0e0b265
commit
d482f8a418
BIN
images/coder.jpg
Normal file
BIN
images/coder.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
images/involv copy.webp
Normal file
BIN
images/involv copy.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
111
index.html
111
index.html
|
|
@ -6,61 +6,90 @@
|
|||
<title>Featured Projects</title>
|
||||
<!-- Include Swiper CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
|
||||
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="featured-projects">
|
||||
|
||||
<div class="description-container">
|
||||
|
||||
<div class="project-description active" id="description-0">
|
||||
<h1>EarthLink Fiber Internet </h1>
|
||||
<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.</p>
|
||||
</div>
|
||||
<div class="project-description" id="description-1">
|
||||
<h1>Evil Genius Games</h1>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
<div class="project-description" id="description-2">
|
||||
<h1>Involvvely </h1>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-button active" data-index="0"></div>
|
||||
<div class="pagination-button" data-index="1"></div>
|
||||
<div class="pagination-button" data-index="2"></div>
|
||||
<div class="container">
|
||||
<!-- Image Swiper -->
|
||||
<div class="image-swiper-container">
|
||||
<div class="swiper image-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="images/elink.webp" alt="EarthLink">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="images/evil.webp" alt="Evil Genius">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="images/involv.webp" alt="Involvvely">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="images/coder.jpg" alt="Coder Page">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Section -->
|
||||
<div class="swiper">
|
||||
<div class="swiper-slide" data-index="0">
|
||||
<img src="images/elink.webp" alt="EarthLink Project">
|
||||
</div>
|
||||
<div class="swiper-slide" data-index="1">
|
||||
<img src="images/evil.webp" alt="Evil Genius Project">
|
||||
</div>
|
||||
<div class="swiper-slide" data-index="2">
|
||||
<img src="images/involv.webp" alt="Involvvely Project">
|
||||
<!-- Text Swiper -->
|
||||
<div class="text-swiper-container">
|
||||
<div class="swiper text-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="text-content">
|
||||
<h2>EarthLink Fiber Internet</h2>
|
||||
<p>EarthLink epitomizes leadership in digital innovation, blending advanced technology with unbeatable connectivity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="text-content">
|
||||
<h2>Evil Genius Games</h2>
|
||||
<p>Evil Genius Games redefines immersive gaming experiences with innovative tabletop RPGs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="text-content">
|
||||
<h2>Involvvely</h2>
|
||||
<p>Involvvely simplifies team collaboration with innovative tools designed to enhance productivity and communication.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="text-content">
|
||||
<h2>Coder Page</h2>
|
||||
<p>Coder paragraph for the user-defined data, for the proper functionaling.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Full-Width Logos Section -->
|
||||
<footer class="logos">
|
||||
<div class="logos-slide">
|
||||
<img src="./logos/3m.svg" alt="3M Logo" />
|
||||
<img src="./logos/barstool-store.svg" alt="Barstool Store Logo" />
|
||||
<img src="./logos/budweiser.svg" alt="Budweiser Logo" />
|
||||
<img src="./logos/buzzfeed.svg" alt="Buzzfeed Logo" />
|
||||
<img src="./logos/forbes.svg" alt="Forbes Logo" />
|
||||
<img src="./logos/macys.svg" alt="Macy's Logo" />
|
||||
<img src="./logos/menshealth.svg" alt="Men's Health Logo" />
|
||||
<img src="./logos/mrbeast.svg" alt="MrBeast Logo" />
|
||||
<img src="./logos/3m.svg" alt="3M Logo">
|
||||
<img src="./logos/barstool-store.svg" alt="Barstool Store Logo">
|
||||
<img src="./logos/budweiser.svg" alt="Budweiser Logo">
|
||||
<img src="./logos/buzzfeed.svg" alt="Buzzfeed Logo">
|
||||
<img src="./logos/forbes.svg" alt="Forbes Logo">
|
||||
<img src="./logos/macys.svg" alt="Macy's Logo">
|
||||
<img src="./logos/menshealth.svg" alt="Men's Health Logo">
|
||||
<img src="./logos/mrbeast.svg" alt="MrBeast Logo">
|
||||
<!-- Duplicate the logos to create the infinite effect -->
|
||||
<img src="./logos/3m.svg" alt="3M Logo">
|
||||
<img src="./logos/barstool-store.svg" alt="Barstool Store Logo">
|
||||
<img src="./logos/budweiser.svg" alt="Budweiser Logo">
|
||||
<img src="./logos/buzzfeed.svg" alt="Buzzfeed Logo">
|
||||
<img src="./logos/forbes.svg" alt="Forbes Logo">
|
||||
<img src="./logos/macys.svg" alt="Macy's Logo">
|
||||
<img src="./logos/menshealth.svg" alt="Men's Health Logo">
|
||||
<img src="./logos/mrbeast.svg" alt="MrBeast Logo">
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||
<script src="scripts.js"></script> <!-- Link to external JavaScript -->
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
102
scripts.js
102
scripts.js
|
|
@ -1,71 +1,49 @@
|
|||
// Clone the logos-slide and append it
|
||||
var copy = document.querySelector(".logos-slide").cloneNode(true);
|
||||
document.querySelector(".logos").appendChild(copy);
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Select the logos container
|
||||
const logosSlide = document.querySelector('.logos-slide');
|
||||
|
||||
// Initialize Swiper instance
|
||||
const swiper = new Swiper(".swiper-container", {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
|
||||
// Get all descriptions and pagination buttons
|
||||
const descriptions = document.querySelectorAll(".project-description");
|
||||
const paginationButtons = document.querySelectorAll(".pagination-button");
|
||||
const images = document.querySelectorAll(".swiper-slide img"); // Select all images within slides
|
||||
|
||||
// Function to update the displayed content based on the current slide index
|
||||
function updateContent(index) {
|
||||
// Hide all descriptions
|
||||
descriptions.forEach((desc) => {
|
||||
desc.classList.remove("active");
|
||||
// Initialize Swipers
|
||||
const textSwiper = new Swiper('.text-swiper', {
|
||||
slidesPerView: 1,
|
||||
effect: 'fade',
|
||||
fadeEffect: { crossFade: true },
|
||||
allowTouchMove: true, // Allow text swiper to be swiped manually
|
||||
});
|
||||
|
||||
// Show the current description
|
||||
const selectedDescription = document.getElementById(`description-${index}`);
|
||||
if (selectedDescription) {
|
||||
selectedDescription.classList.add("active");
|
||||
}
|
||||
|
||||
// Update pagination active class
|
||||
paginationButtons.forEach((button) => {
|
||||
button.classList.remove("active");
|
||||
const imageSwiper = new Swiper('.image-swiper', {
|
||||
slidesPerView: 1.5,
|
||||
centeredSlides: true,
|
||||
spaceBetween: 30,
|
||||
initialSlide: 1,
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
controller: {
|
||||
control: textSwiper, // Link image swiper with text swiper
|
||||
},
|
||||
});
|
||||
if (paginationButtons[index]) {
|
||||
paginationButtons[index].classList.add("active");
|
||||
}
|
||||
|
||||
// Move Swiper to the corresponding slide
|
||||
swiper.slideTo(index);
|
||||
}
|
||||
// Synchronize both swipers by controlling each other
|
||||
textSwiper.controller.control = imageSwiper;
|
||||
|
||||
// Listen for Swiper slide change event
|
||||
swiper.on("slideChange", () => {
|
||||
const currentIndex = swiper.realIndex;
|
||||
updateContent(currentIndex);
|
||||
});
|
||||
// Stop animation on mouseover
|
||||
logosSlide.addEventListener('mouseover', () => {
|
||||
logosSlide.style.animationPlayState = 'paused';
|
||||
});
|
||||
|
||||
// Event listeners for pagination buttons
|
||||
paginationButtons.forEach((button, index) => {
|
||||
button.addEventListener("click", () => {
|
||||
updateContent(index); // Update content and slide
|
||||
// Resume animation on mouseleave
|
||||
logosSlide.addEventListener('mouseleave', () => {
|
||||
logosSlide.style.animationPlayState = 'running';
|
||||
});
|
||||
|
||||
// Pause and resume on click
|
||||
logosSlide.addEventListener('click', () => {
|
||||
const currentState = logosSlide.style.animationPlayState;
|
||||
logosSlide.style.animationPlayState = (currentState === 'paused' || currentState === '') ? 'running' : 'paused';
|
||||
});
|
||||
});
|
||||
|
||||
// Event listeners for image clicks
|
||||
images.forEach((image) => {
|
||||
image.addEventListener("click", (event) => {
|
||||
const index = parseInt(event.target.closest(".swiper-slide").getAttribute("data-index"), 10);
|
||||
updateContent(index); // Update content and slide
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize the content (first image and description are visible)
|
||||
updateContent(swiper.realIndex);
|
||||
|
|
|
|||
210
styles.css
210
styles.css
|
|
@ -1,3 +1,4 @@
|
|||
/* General Reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -5,169 +6,96 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
/* Container for Swipers */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.image-swiper-container {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.text-swiper-container {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.image-swiper img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
padding: 30px;
|
||||
background: #f5f5f5;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.text-content h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-content p {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
.image-swiper-container,
|
||||
.text-swiper-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Logos Section */
|
||||
.logos {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 60px 0;
|
||||
padding: 40px 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;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
animation: scroll 30s linear infinite;
|
||||
animation-play-state: running; /* Default state: running */
|
||||
}
|
||||
|
||||
.logos-slide img {
|
||||
height: 50px;
|
||||
margin: 0 40px;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f2f2f2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
.logos-slide img:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.featured-projects {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
width: 80%;
|
||||
max-width: 1200px;
|
||||
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;
|
||||
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 {
|
||||
text-align: left;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.project-description.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 0 5px;
|
||||
border-radius: 50%;
|
||||
background-color: #888;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.pagination-button.active {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.featured-projects {
|
||||
flex-direction: column;
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.description-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
width: 100%;
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue