Add files via upload

empfi · Nov 19, 2024 · f3ae01e · f3ae01e
commit f3ae01e
Show file tree

Hide file tree

Showing 4 changed files with 378 additions and 0 deletions.
diff --git a/hero-background.gif b/hero-background.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/png" href="hero-background.gif">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modern Animated Website</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
+</head>
+<body>
+
+    <!-- Navbar -->
+    <nav class="navbar">
+        <h1 class="logo">einkabelju</h1>
+        <ul class="nav-links">
+            <li><a href="#hero" class="nav-link">Home</a></li>
+            <li><a href="#about" class="nav-link">Über mich</a></li>
+            <li><a href="#services" class="nav-link">Services</a></li>
+        </ul>
+    </nav>
+
+    <!-- Hero Section -->
+    <section id="hero" class="hero">
+        <div class="hero-overlay"></div>
+        <div class="animated-background"></div>
+        <div class="hero-content">
+            <h1 class="title">Willkommen auf meinem Portfolio</h1>
+            <p class="subtitle">Keiner Liebt mich 💔</p>
+            <a href="#about" class="cta-btn" id="discoverMore">Lerne, warum mich keiner Liebt 😊</a>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="about" data-aos="fade-up">
+        <h2 class="section-title">About Us</h2>
+        <p>Mich liebt keiner, weil ich einen kleinen Penis in der Hose habe, und meine Eltern geschwister sind! (:</p>
+    </section>
+
+    <!-- Services Section -->
+    <section id="services" class="services" data-aos="fade-up">
+        <h2 class="section-title">Was Kann ich?</h2>
+        <div class="services-wrapper">
+            <div class="service-card">
+                <h3>Nix</h3>
+                <p>Nix.</p>
+            </div>
+            <div class="service-card">
+                <h3>Nix</h3>
+                <p>Nix.</p>
+            </div>
+            <div class="service-card">
+                <h3>Nix (keiner liebt mich)</h3>
+                <p>Und wieder Nix.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <p>&copy; #Rektal-Gang. Alle Rechte vorbehalten.</p>
+    </footer>
+
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+    <script src="script.js"></script>
+    <script>
+        AOS.init();
+    </script>
+</body>
+</html>
diff --git a/script.js 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
@@ -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%;
+}