diff --git a/README.md b/README.md
new file mode 100644
index 0000000..36b3788
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+# carthage.software
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6641a29
--- /dev/null
+++ b/index.html
@@ -0,0 +1,275 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Carthage Software Cooperative</title>
+        <style>
+            /* Import Fonts */
+            @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Bebas+Neue&family=Cairo:wght@700&display=swap");
+
+            :root {
+                --background: #f2f1e8;
+                --foreground: #000000;
+                --primary: #c3bbb8;
+            }
+
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            body {
+                font-family: "Montserrat", sans-serif;
+                height: 100vh;
+                overflow: hidden;
+                background: var(--background);
+                display: flex;
+                flex-direction: column; /* Changed to column */
+                align-items: center;
+                justify-content: center; /* Will be adjusted with space-between */
+                position: relative;
+                color: var(--foreground);
+            }
+
+            .content {
+                z-index: 2;
+                background: var(--background);
+                margin: auto;
+                padding: 1rem;
+                position: relative;
+                border-radius: 12px;
+                text-align: center;
+            }
+
+            .title {
+                font-family: "Cairo", sans-serif;
+                font-size: 3.5rem;
+                text-transform: uppercase;
+                letter-spacing: 4px;
+                color: var(--foreground);
+                line-height: 1.2;
+                font-weight: 700;
+                letter-spacing: 1px;
+                text-align: center;
+                text-decoration: underline;
+                text-decoration-thickness: 2px;
+                text-decoration-color: var(--primary);
+            }
+
+            .title.english,
+            .title.amazigh {
+                direction: ltr;
+            }
+
+            .title.arabic {
+                direction: rtl;
+            }
+
+            .emojis {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                left: 0;
+                pointer-events: none;
+                overflow: hidden;
+                z-index: 1;
+            }
+
+            .emoji {
+                position: absolute;
+                font-size: 2rem;
+                opacity: 0.8;
+                animation: float 5s ease-in-out infinite;
+                --translateX: -50%;
+                --translateY: -50%;
+                --rotate: 0deg;
+                --scale: 1;
+                transform: translate(var(--translateX), var(--translateY))
+                    rotate(var(--rotate)) scale(var(--scale));
+                transition: transform 0.3s ease-in-out;
+                cursor: pointer;
+                pointer-events: auto;
+            }
+
+            .emoji:hover {
+                --scale: 2.5;
+                z-index: -2;
+                opacity: 1;
+            }
+
+            @keyframes float {
+                0% {
+                    --translateX: -50%;
+                    --translateY: -50%;
+                    --rotate: 0deg;
+                }
+                25% {
+                    --translateX: calc(-50% + 20px);
+                    --translateY: calc(-50% - 10px);
+                    --rotate: 3deg;
+                }
+                50% {
+                    --translateX: -50%;
+                    --translateY: -50%;
+                    --rotate: 0deg;
+                }
+                75% {
+                    --translateX: calc(-50% - 20px);
+                    --translateY: calc(-50% + 10px);
+                    --rotate: -3deg;
+                }
+                100% {
+                    --translateX: -50%;
+                    --translateY: -50%;
+                    --rotate: 0deg;
+                }
+            }
+
+            @media (max-width: 600px) {
+                .letter {
+                    padding: 20px;
+                }
+
+                .title {
+                    font-size: 2rem;
+                }
+
+                .emoji {
+                    font-size: 1.5rem;
+                }
+
+                footer {
+                    font-size: 0.8rem;
+                }
+            }
+
+            /* New Footer Styles */
+            footer {
+                width: 100%;
+                text-align: center;
+                padding: 10px 0;
+                background: var(--background);
+                color: var(--foreground);
+                font-size: 1rem;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                border-top: 1px solid var(--primary);
+            }
+        </style>
+    </head>
+    <body>
+        <div class="emojis"></div>
+
+        <div class="content">
+            <div class="title english">Carthage Software Cooperative</div>
+            <div class="title arabic">تعاونية قرطاج للبرمجيات</div>
+            <div class="title amazigh">ⵜⴰⴷⵓⴽⵍⵉ ⵏ ⵓⵙⴻⵖⵣⴰⵏ ⵏ ⴽⴰⵔⵟⴰⵊ</div>
+        </div>
+
+        <script>
+            function getRandom(min, max) {
+                return Math.random() * (max - min) + min;
+            }
+
+            function getPositionType() {
+                return Math.random() < 0.5 ? "h" : "v";
+            }
+
+            function getRandomRange(ranges) {
+                const selectedRange =
+                    ranges[Math.floor(Math.random() * ranges.length)];
+                return getRandom(selectedRange[0], selectedRange[1]);
+            }
+
+            function isTooClose(newPos, existingPositions, buffer = 8) {
+                for (let pos of existingPositions) {
+                    if (
+                        Math.abs(newPos.top - pos.top) < buffer &&
+                        Math.abs(newPos.left - pos.left) < buffer
+                    ) {
+                        return true;
+                    }
+                }
+                return false;
+            }
+
+            document.addEventListener("DOMContentLoaded", () => {
+                const emojisContainer = document.querySelector(".emojis");
+                const emojiTypes = ["crab", "fox", "elephant"];
+                const emojiCharacters = {
+                    crab: "🦀",
+                    fox: "🦊",
+                    elephant: "🐘",
+                };
+                const existingPositions = [];
+
+                function createEmojis(type, count) {
+                    for (let i = 0; i < count; i++) {
+                        const emoji = document.createElement("div");
+                        emoji.classList.add("emoji", type);
+                        emoji.textContent = emojiCharacters[type];
+                        emojisContainer.appendChild(emoji);
+
+                        // Positioning
+                        let topPos, leftPos;
+                        let attempts = 0;
+                        const maxAttempts = 100;
+
+                        do {
+                            const positionType = getPositionType();
+
+                            if (positionType === "h") {
+                                // Horizontal positioning
+                                leftPos = getRandomRange([
+                                    [5, 20],
+                                    [80, 95],
+                                ]);
+                                topPos = getRandom(5, 95);
+                            } else {
+                                // Vertical positioning
+                                topPos = getRandomRange([
+                                    [5, 25],
+                                    [75, 95],
+                                ]);
+                                leftPos = getRandom(5, 95);
+                            }
+
+                            attempts++;
+
+                            if (attempts > maxAttempts) {
+                                break; // Prevent infinite loops
+                            }
+                        } while (
+                            isTooClose(
+                                { top: topPos, left: leftPos },
+                                existingPositions,
+                            )
+                        );
+
+                        // Save the position
+                        existingPositions.push({ top: topPos, left: leftPos });
+
+                        // Assign the positions
+                        emoji.style.top = `${topPos}%`;
+                        emoji.style.left = `${leftPos}%`;
+
+                        // Random animation delay between 0s and 3s
+                        const delay = getRandom(0, 3).toFixed(2);
+                        emoji.style.animationDelay = `${delay}s`;
+
+                        // Random animation duration between 2s and 10s
+                        const duration = getRandom(2, 10).toFixed(2);
+                        emoji.style.animationDuration = `${duration}s`;
+                    }
+                }
+
+                emojiTypes.forEach((type) => {
+                    createEmojis(type, Math.floor(getRandom(1, 5)));
+                });
+            });
+        </script>
+    </body>
+</html>
