From f3ae01e78ef9de02e05a193598723cf9d957bc0e Mon Sep 17 00:00:00 2001 From: empfi Date: Tue, 19 Nov 2024 18:56:08 +0100 Subject: [PATCH] Add files via upload --- hero-background.gif | Bin 0 -> 9770 bytes index.html | 71 +++++++++++ script.js | 29 +++++ styles.css | 278 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 378 insertions(+) create mode 100644 hero-background.gif create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/hero-background.gif b/hero-background.gif new file mode 100644 index 0000000000000000000000000000000000000000..edb956d5d79cfb83de87b3818159716a916deb81 GIT binary patch literal 9770 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 Xz$XHq2z(;&iNGfU|F;O3ZIApXMB1H4 literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..bf143ae --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + + Modern Animated Website + + + + + + + + + +
+
+
+
+

Willkommen auf meinem Portfolio

+

Keiner Liebt mich πŸ’”

+ Lerne, warum mich keiner Liebt 😊 +
+
+ + +
+

About Us

+

Mich liebt keiner, weil ich einen kleinen Penis in der Hose habe, und meine Eltern geschwister sind! (:

+
+ + +
+

Was Kann ich?

+
+
+

Nix

+

Nix.

+
+
+

Nix

+

Nix.

+
+
+

Nix (keiner liebt mich)

+

Und wieder Nix.

+
+
+
+ + +
+

© #Rektal-Gang. Alle Rechte vorbehalten.

+
+ + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a41942d --- /dev/null +++ b/script.js @@ -0,0 +1,29 @@ +// Scroll Animation for Navbar Links and Discover More button +document.querySelectorAll('.nav-link, #discoverMore').forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); // Prevent default anchor click behavior + + // Get the target section ID from the href attribute + const targetId = this.getAttribute('href').substring(1); + + // Scroll to the target section with smooth behavior + document.getElementById(targetId).scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + }); +}); + +// Initialize Swiper +var swiper = new Swiper('.swiper-container', { + slidesPerView: 3, + spaceBetween: 30, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..df7b56f --- /dev/null +++ b/styles.css @@ -0,0 +1,278 @@ +/* General Styles */ +body { + font-family: 'Poppins', sans-serif; + color: #fff; + background: #121212; + margin: 0; + padding: 0; + overflow-x: hidden; +} + +/* Smooth scrolling for all anchor links */ +html { + scroll-behavior: smooth; +} + +/* Animation for Background */ +@keyframes movingBackground { + 0% { + background-position: 0% 50%; + } + 100% { + background-position: 100% 50%; + } +} + +/* Animated Background Lines */ +.animated-background { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.05); + overflow: hidden; + animation: movingBackground 10s linear infinite; +} + +/* Navbar enhancements for a modern look */ +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 30px; + background: rgba(0, 0, 0, 0.85); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); + z-index: 10; +} + +.nav-links { + list-style: none; + padding: 0; + margin: 0; +} + +.nav-links li { + display: inline-block; + margin: 0 20px; +} + +.nav-links a { + text-decoration: none; + color: #fff; + font-size: 1rem; + letter-spacing: 0.05em; + font-weight: bold; + transition: color 0.3s ease, transform 0.3s ease; + padding-bottom: 2px; + border-bottom: 2px solid transparent; +} + +.nav-links a:hover { + color: #6c63ff; + border-bottom: 2px solid #6c63ff; + transform: scale(1.1); +} + +/* Titles */ +.title, .section-title { + font-size: 3rem; + background: linear-gradient(90deg, #6c63ff, #ff6584); + -webkit-background-clip: text; + color: transparent; + text-align: center; + margin-bottom: 20px; + position: relative; + animation: fadeInDown 1.5s ease; +} + +.subtitle { + font-size: 1.5rem; + margin-top: 10px; + text-align: center; + opacity: 0.8; + animation: fadeIn 2s ease; +} + +/* CTA Button - Modern look */ +.cta-btn { + display: inline-block; + padding: 15px 35px; + margin-top: 30px; + background: linear-gradient(90deg, #6c63ff, #ff6584); + border: none; + color: #fff; + font-size: 1.1rem; + letter-spacing: 0.05em; + border-radius: 50px; + cursor: pointer; + text-align: center; /* Center the button text */ + transition: background 0.4s ease-in-out, transform 0.4s ease-in-out; + box-shadow: 0 4px 15px rgba(108, 99, 255, 0.4); + animation: fadeInUp 2s ease; +} + +.cta-btn:hover { + background: linear-gradient(90deg, #ff6584, #6c63ff); + transform: translateY(-5px) scale(1.05); + box-shadow: 0 6px 20px rgba(255, 101, 132, 0.6); +} + +/* Animations */ +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(50px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-50px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* Hero Section */ +.hero { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + position: relative; + background: url('hero-background.gif') no-repeat center center/cover; + filter: blur(0px); + overflow: hidden; +} + +.hero-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); +} + +.hero-content { + position: relative; + z-index: 1; + text-align: center; +} + +/* About Section */ +.about { + padding: 80px 20px; + text-align: center; +} + +/* Services Section */ +.services { + padding: 80px 20px; + text-align: center; +} + +.services-wrapper { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 20px; /* Space between cards */ +} + +.service-card { + background: rgba(255, 255, 255, 0.1); + border-radius: 15px; + padding: 20px; + width: 250px; + transition: transform 0.3s ease; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); +} + +.service-card:hover { + transform: translateY(-10px); +} + +.service-card h3 { + margin-bottom: 10px; + font-size: 1.5rem; + color: #ff6584; +} + +/* Gallery Section */ +.gallery { + padding: 80px 20px; + text-align: center; /* Centering all gallery content */ +} + +.gallery p { + text-align: center; /* Center the paragraph text */ + max-width: 800px; /* Optional: set a max width for better readability */ + margin: 10px auto; /* Center the paragraph horizontally with margin auto */ + font-size: 1.2rem; /* Optional: adjust the font size for better appearance */ +} + +.swiper-wrapper { + display: flex; +} + +.swiper-slide { + display: flex; + justify-content: center; +} + +.swiper-slide img { + width: 150px; /* Smaller width for the images */ + height: 150px; + object-fit: cover; + border-radius: 15%; /* Rounded images */ + transition: transform 0.3s ease, filter 0.3s ease; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); +} + +.swiper-slide img:hover { + transform: scale(1.1); +} + +.swiper-pagination { + bottom: -20px; +} + +.swiper-button-next, .swiper-button-prev { + color: #fff; +} + +/* Footer */ +.footer { + background: #121212; + padding: 30px 0; + text-align: center; +} + +/* Fixes and Resets */ +* { + box-sizing: border-box; +} + +img { + display: block; + max-width: 100%; +}