diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..2f83612 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5503 +} diff --git a/images/coder.jpg b/images/coder.jpg new file mode 100644 index 0000000..c34f435 Binary files /dev/null and b/images/coder.jpg differ diff --git a/images/elink.webp b/images/elink.webp new file mode 100644 index 0000000..2c1812c Binary files /dev/null and b/images/elink.webp differ diff --git a/images/evil.webp b/images/evil.webp new file mode 100644 index 0000000..ddd0739 Binary files /dev/null and b/images/evil.webp differ diff --git a/images/involv copy.webp b/images/involv copy.webp new file mode 100644 index 0000000..d4d526c Binary files /dev/null and b/images/involv copy.webp differ diff --git a/images/involv.webp b/images/involv.webp new file mode 100644 index 0000000..d4d526c Binary files /dev/null and b/images/involv.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e51a31c --- /dev/null +++ b/index.html @@ -0,0 +1,95 @@ + + + + + + Featured Projects + + + + + +
+ +
+
+
+
+ EarthLink +
+
+ Evil Genius +
+
+ Involvvely +
+
+ Coder Page +
+
+
+
+
+
+
+ + +
+
+
+
+
+

EarthLink Fiber Internet

+

EarthLink epitomizes leadership in digital innovation, blending advanced technology with unbeatable connectivity.

+
+
+
+
+

Evil Genius Games

+

Evil Genius Games redefines immersive gaming experiences with innovative tabletop RPGs.

+
+
+
+
+

Involvvely

+

Involvvely simplifies team collaboration with innovative tools designed to enhance productivity and communication.

+
+
+
+
+

Coder Page

+

Coder paragraph for the user-defined data, for the proper functionaling.

+
+
+
+
+
+
+ + + + + + + + diff --git a/logos/3m.svg b/logos/3m.svg new file mode 100644 index 0000000..2a309ce --- /dev/null +++ b/logos/3m.svg @@ -0,0 +1,3 @@ + + + diff --git a/logos/barstool-store.svg b/logos/barstool-store.svg new file mode 100644 index 0000000..c257b2f --- /dev/null +++ b/logos/barstool-store.svg @@ -0,0 +1,3 @@ + + + diff --git a/logos/budweiser.svg b/logos/budweiser.svg new file mode 100644 index 0000000..97263a3 --- /dev/null +++ b/logos/budweiser.svg @@ -0,0 +1,3 @@ + + + diff --git a/logos/buzzfeed.svg b/logos/buzzfeed.svg new file mode 100644 index 0000000..9e77e44 --- /dev/null +++ b/logos/buzzfeed.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/logos/forbes.svg b/logos/forbes.svg new file mode 100644 index 0000000..4ccfbde --- /dev/null +++ b/logos/forbes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/logos/macys.svg b/logos/macys.svg new file mode 100644 index 0000000..fe3bafb --- /dev/null +++ b/logos/macys.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/logos/menshealth.svg b/logos/menshealth.svg new file mode 100644 index 0000000..580e65a --- /dev/null +++ b/logos/menshealth.svg @@ -0,0 +1 @@ +> \ No newline at end of file diff --git a/logos/mrbeast.svg b/logos/mrbeast.svg new file mode 100644 index 0000000..db7601a --- /dev/null +++ b/logos/mrbeast.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..aceccf5 --- /dev/null +++ b/scripts.js @@ -0,0 +1,49 @@ +document.addEventListener('DOMContentLoaded', function () { + // Select the logos container + const logosSlide = document.querySelector('.logos-slide'); + + // Initialize Swipers + const textSwiper = new Swiper('.text-swiper', { + slidesPerView: 1, + effect: 'fade', + fadeEffect: { crossFade: true }, + allowTouchMove: true, // Allow text swiper to be swiped manually + }); + + 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 + }, + }); + + // Synchronize both swipers by controlling each other + textSwiper.controller.control = imageSwiper; + + // Stop animation on mouseover + logosSlide.addEventListener('mouseover', () => { + logosSlide.style.animationPlayState = 'paused'; + }); + + // 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'; + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c634664 --- /dev/null +++ b/styles.css @@ -0,0 +1,101 @@ +/* General Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Roboto', sans-serif; + background: #f2f2f2; +} + +/* 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; + } + .image-swiper-container, + .text-swiper-container { + width: 100%; + } +} + +/* Logos Section */ +.logos { + width: 100%; + overflow: hidden; + padding: 40px 0; + background: white; + position: relative; +} + +.logos-slide { + display: flex; + gap: 40px; + animation: scroll 30s linear infinite; + animation-play-state: running; /* Default state: running */ +} + +.logos-slide img { + height: 50px; + object-fit: contain; + transition: transform 0.3s ease; +} + +.logos-slide img:hover { + transform: scale(1.1); +} + +@keyframes scroll { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +}