diff --git a/Index.html b/Index.html
new file mode 100644
index 0000000..09a9ac8
--- /dev/null
+++ b/Index.html
@@ -0,0 +1,502 @@
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Doqe website yippee!</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
+            min-height: 100vh;
+            overflow-x: hidden;
+            position: relative;
+        }
+
+        .bg-particles {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 1;
+        }
+
+        .particle {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.8);
+            border-radius: 50%;
+            animation: float 6s ease-in-out infinite;
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+        }
+
+        @keyframes float {
+
+            0%,
+            100% {
+                transform: translateY(0px) rotate(0deg);
+                opacity: 0.7;
+            }
+
+            50% {
+                transform: translateY(-20px) rotate(180deg);
+                opacity: 1;
+            }
+        }
+
+        .glass-container {
+            position: relative;
+            z-index: 2;
+            backdrop-filter: blur(20px);
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 3rem;
+            margin: 2rem;
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+        }
+
+        nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 100;
+            padding: 1rem 2rem;
+            backdrop-filter: blur(20px);
+            background: rgba(0, 0, 0, 0.4);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        nav ul {
+            list-style: none;
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+        }
+
+        nav a {
+            color: rgba(255, 255, 255, 0.9);
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            position: relative;
+            padding: 0.5rem 1rem;
+            border-radius: 10px;
+        }
+
+        nav a:hover {
+            background: rgba(255, 255, 255, 0.1);
+            transform: translateY(-2px);
+        }
+
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 0 2rem;
+            position: relative;
+        }
+
+        .hero-content {
+            max-width: 800px;
+            animation: fadeInUp 1s ease-out;
+        }
+
+        .logo {
+            font-size: 4rem;
+            font-weight: 700;
+            color: rgba(255, 255, 255, 0.95);
+            margin-bottom: 1rem;
+            text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+
+        @keyframes glow {
+            from {
+                text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
+            }
+
+            to {
+                text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 50px rgba(255, 255, 255, 0.4);
+            }
+        }
+
+        .tagline {
+            font-size: 1.5rem;
+            color: rgba(255, 255, 255, 0.8);
+            margin-bottom: 2rem;
+            font-weight: 300;
+            line-height: 1.6;
+        }
+
+        .description {
+            font-size: 1.1rem;
+            color: rgba(255, 255, 255, 0.7);
+            margin-bottom: 3rem;
+            line-height: 1.8;
+        }
+
+        .cta-container {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .cta-button {
+            padding: 1rem 2rem;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 50px;
+            color: white;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .cta-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s ease;
+        }
+
+        .cta-button:hover::before {
+            left: 100%;
+        }
+
+        .cta-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
+        }
+
+        .cta-primary {
+            background: linear-gradient(135deg, #333333, #1a1a1a);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .features {
+            padding: 4rem 2rem;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .feature-card {
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 2rem;
+            text-align: center;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .feature-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+            transform: translateX(-100%);
+            transition: transform 0.8s ease;
+        }
+
+        .feature-card:hover::before {
+            transform: translateX(100%);
+        }
+
+        .feature-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        .feature-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            display: block;
+            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
+        }
+
+        .feature-icon img {
+            width: 60px;
+            height: 60px;
+            object-fit: contain;
+            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
+            transition: transform 0.3s ease;
+        }
+
+        .feature-card:hover .feature-icon img {
+            transform: scale(1.1);
+        }
+
+        .feature-title {
+            font-size: 1.5rem;
+            color: rgba(255, 255, 255, 0.9);
+            margin-bottom: 1rem;
+            font-weight: 600;
+        }
+
+        .feature-desc {
+            color: rgba(255, 255, 255, 0.7);
+            line-height: 1.6;
+        }
+
+        .music-control {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            z-index: 100;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 50px;
+            padding: 1rem;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .music-control:hover {
+            background: rgba(255, 255, 255, 0.2);
+            transform: scale(1.05);
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(50px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .scroll-indicator {
+            position: absolute;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%);
+            color: rgba(255, 255, 255, 0.6);
+            animation: bounce 2s infinite;
+        }
+
+        @keyframes bounce {
+
+            0%,
+            20%,
+            50%,
+            80%,
+            100% {
+                transform: translateX(-50%) translateY(0);
+            }
+
+            40% {
+                transform: translateX(-50%) translateY(-10px);
+            }
+
+            60% {
+                transform: translateX(-50%) translateY(-5px);
+            }
+        }
+
+        @media (max-width: 768px) {
+            .logo {
+                font-size: 2.5rem;
+            }
+
+            .tagline {
+                font-size: 1.2rem;
+            }
+
+            .glass-container {
+                margin: 1rem;
+                padding: 2rem;
+            }
+
+            .cta-container {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            nav ul {
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .music-control {
+                bottom: 1rem;
+                right: 1rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <audio id="bgMusic" loop>
+        <source src="BgMusic.mp3" type="audio/mpeg">
+        Your browser does not support the audio element.
+    </audio>
+
+    <div class="bg-particles" id="particles"></div>
+
+    <nav>
+        <ul>
+            <li><a href="#home">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#services">Idk what else to add</a></li>
+            <li><a href="#contact">Another placeholder!</a></li>
+        </ul>
+    </nav>
+
+    <section class="hero" id="home">
+        <div class="hero-content">
+            <h1 class="logo">Purgatory</h1>
+            <p class="tagline">Work in progress chack back later</p>
+            <p class="description">
+                <img src="ThumbsUp.png"/>
+            </p>
+            <div class="cta-container">
+                <a href="./index2.html" class="cta-button cta-primary">Woah a button</a>
+                <a href="#" class="cta-button">Woah another button</a>
+            </div>
+        </div>
+        <div class="scroll-indicator">
+            <span style="font-size: 1.5rem;">↓</span>
+        </div>
+    </section>
+
+    <section class="features" id="about">
+        <div class="feature-card">
+            <span class="feature-icon">
+                <img src="Stab.png"/>
+            </span>
+            <h3 class="feature-title">Something something</h3>
+            <p class="feature-desc">Something!</p>
+        </div>
+        <div class="feature-card">
+            <span class="feature-icon">
+                <img src="UhHuhUhHuh.gif"/>
+            </span>
+            <h3 class="feature-title">What is it?</h3>
+            <p class="feature-desc">Someone please explain to me what purgatory is</p>
+        </div>
+        <div class="feature-card">
+            <span class="feature-icon">
+                <img src="ThumbsUp.png"/>
+            </span>
+            <h3 class="feature-title">Put something here</h3>
+            <p class="feature-desc">Please I don't know what to do</p>
+        </div>
+    </section>
+
+    <div class="music-control" id="musicToggle">
+        <span id="musicIcon">▶</span>
+    </div>
+
+    <script>
+        function createParticles() {
+            const particlesContainer = document.getElementById('particles');
+            const particleCount = 50;
+
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.style.left = Math.random() * 100 + '%';
+                particle.style.top = Math.random() * 100 + '%';
+                particle.style.animationDelay = Math.random() * 6 + 's';
+                particle.style.animationDuration = (Math.random() * 4 + 4) + 's';
+                particlesContainer.appendChild(particle);
+            }
+        }
+
+        const bgMusic = document.getElementById('bgMusic');
+        const musicButton = document.getElementById('musicToggle');
+        const musicIconEl = document.getElementById('musicIcon');
+        let musicIsPlaying = false;
+
+        musicButton.addEventListener('click', function() {
+            if (musicIsPlaying) {
+                bgMusic.pause();
+                musicIconEl.textContent = '▶';
+                musicIsPlaying = false;
+            } else {
+                bgMusic.play().catch(e => console.log('Audio play failed:', e));
+                musicIconEl.textContent = '⏸';
+                musicIsPlaying = true;
+            }
+        });
+
+        document.addEventListener('click', function() {
+            if (!musicIsPlaying) {
+                bgMusic.play().catch(e => console.log('Audio play failed:', e));
+                musicIconEl.textContent = '⏸';
+                musicIsPlaying = true;
+            }
+        }, { once: true });
+
+        bgMusic.volume = 0.3;
+
+        document.querySelectorAll('nav a').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+
+        window.addEventListener('scroll', () => {
+            const scrolled = window.pageYOffset;
+            const hero = document.querySelector('.hero-content');
+            hero.style.transform = `translateY(${scrolled * 0.5}px)`;
+        });
+
+        window.addEventListener('load', createParticles);
+
+        document.querySelectorAll('.feature-card').forEach(card => {
+            card.addEventListener('mouseenter', function() {
+                this.style.transform = 'translateY(-10px) scale(1.02)';
+            });
+
+            card.addEventListener('mouseleave', function() {
+                this.style.transform = 'translateY(0) scale(1)';
+            });
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Index2.html b/Index2.html
new file mode 100644
index 0000000..d0e2463
--- /dev/null
+++ b/Index2.html
@@ -0,0 +1,305 @@
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Second page wooo!</title>
+    <style>
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #1e1e1e, #2d2d2d);
+            min-height: 100vh;
+            color: white;
+            overflow-x: hidden;
+        }
+
+        nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 100;
+            padding: 1rem 2rem;
+            backdrop-filter: blur(20px);
+            background: rgba(0, 0, 0, 0.4);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        nav ul {
+            list-style: none;
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+        }
+
+        nav a {
+            color: rgba(255, 255, 255, 0.9);
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            position: relative;
+            padding: 0.5rem 1rem;
+            border-radius: 10px;
+        }
+
+        nav a:hover {
+            background: rgba(255, 255, 255, 0.1);
+            transform: translateY(-2px);
+        }
+
+        .main-content {
+            min-height: 90vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            text-align: center;
+            padding: 2rem;
+            padding-top: 6rem;
+        }
+
+        .placeholder-content {
+            max-width: 600px;
+        }
+
+        .placeholder-content h1 {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #ffffff, #868686);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .placeholder-content p {
+            font-size: 1.2rem;
+            color: #ccc;
+            line-height: 1.6;
+            margin-bottom: 2rem;
+        }
+
+        .cta-button {
+            padding: 1rem 2rem;
+            background: linear-gradient(135deg, #868686, #ffffff);
+            border: none;
+            border-radius: 50px;
+            color: Black;
+            font-weight: 600;
+            text-decoration: none;
+            display: inline-block;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+
+        .cta-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(255, 107, 107, 0.3);
+        }
+
+        .bouncing-gif-container {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 1000;
+        }
+
+        .bouncing-gif {
+            width: 80px;
+            height: 80px;
+            object-fit: cover;
+            animation: bounceSquish 2s infinite;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .bouncing-gif:hover {
+            transform: scale(1.1);
+            filter: brightness(1.1);
+        }
+
+        @keyframes bounceSquish {
+
+            0%,
+            20%,
+            50%,
+            80%,
+            100% {
+                transform: translateY(0) scaleY(1) scaleX(1);
+            }
+
+            40% {
+                transform: translateY(-15px) scaleY(1.2) scaleX(0.8);
+            }
+
+            60% {
+                transform: translateY(-8px) scaleY(1.1) scaleX(0.9);
+            }
+        }
+
+        @keyframes bounceRotate {
+
+            0%,
+            20%,
+            50%,
+            80%,
+            100% {
+                transform: translateY(0) rotate(0deg) scaleY(1) scaleX(1);
+            }
+
+            40% {
+                transform: translateY(-15px) rotate(10deg) scaleY(1.2) scaleX(0.8);
+            }
+
+            60% {
+                transform: translateY(-8px) rotate(-5deg) scaleY(1.1) scaleX(0.9);
+            }
+        }
+
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+            }
+
+            50% {
+                transform: scale(1.05) scaleY(0.95) scaleX(1.05);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
+
+        @keyframes float {
+
+            0%,
+            100% {
+                transform: translateY(0px) scaleY(1) scaleX(1);
+            }
+
+            50% {
+                transform: translateY(-10px) scaleY(1.1) scaleX(0.9);
+            }
+        }
+
+        .bounce-rotate {
+            animation: bounceRotate 2s infinite;
+        }
+
+        .pulse-effect {
+            animation: pulse 2s infinite;
+        }
+
+        .float-effect {
+            animation: float 3s ease-in-out infinite;
+        }
+
+        @media (max-width: 768px) {
+            .placeholder-content h1 {
+                font-size: 2rem;
+            }
+
+            .placeholder-content p {
+                font-size: 1rem;
+            }
+
+            .bouncing-gif {
+                width: 60px;
+                height: 60px;
+            }
+
+            nav ul {
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .main-content {
+                padding-top: 8rem;
+            }
+        }
+
+        .glow-effect {
+            filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5))
+                   drop-shadow(0 0 40px rgba(168, 168, 168, 0.3))
+                   drop-shadow(0 0 60px rgba(54, 54, 54, 0.1));
+        }
+    </style>
+</head>
+
+<body>
+    <nav>
+        <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#services">Idk what else to add</a></li>
+            <li><a href="#contact">Another placeholder!</a></li>
+        </ul>
+    </nav>
+
+    <div class="main-content">
+        <div class="placeholder-content">
+            <h1>uhhhhhhh</h1>
+            <p>Something can go here later</p>
+            <a href="#" class="cta-button">Another button wtf</a>
+        </div>
+    </div>
+
+    <div class="bouncing-gif-container">
+        <img src="Yippee!.png" alt="Bouncing GIF" class="bouncing-gif" id="bouncingGif">
+    </div>
+
+    <script>
+        document.getElementById('bouncingGif').addEventListener('click', function() {
+            alert('Your computer is getting ram crashed in 5 seconds');
+        });
+
+        function changeAnimationStyle() {
+            const gif = document.getElementById('bouncingGif');
+            const styles = ['', 'bounce-rotate', 'pulse-effect', 'float-effect'];
+            const currentStyle = gif.className.split(' ').find(cls => styles.includes(cls)) || '';
+            const currentIndex = styles.indexOf(currentStyle);
+            const nextIndex = (currentIndex + 1) % styles.length;
+
+            gif.className = gif.className.replace(currentStyle, '').trim();
+
+            if (styles[nextIndex]) {
+                gif.className += ' ' + styles[nextIndex];
+            }
+        }
+
+        document.getElementById('bouncingGif').addEventListener('click', changeAnimationStyle);
+
+        setInterval(() => {
+            const gif = document.getElementById('bouncingGif');
+            gif.classList.add('glow-effect');
+            setTimeout(() => {
+                gif.classList.remove('glow-effect');
+            }, 1000);
+        }, 5000);
+
+        document.querySelectorAll('nav a').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                const href = this.getAttribute('href');
+                if (href.startsWith('#')) {
+                    e.preventDefault();
+                    const target = document.querySelector(href);
+                    if (target) {
+                        target.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'start'
+                        });
+                    }
+                }
+            });
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/imgs.zip b/imgs.zip
new file mode 100644
index 0000000..d4ec90c
Binary files /dev/null and b/imgs.zip differ
