diff --git a/img/about.svg b/img/about.svg
new file mode 100644
index 0000000..b9b3aa1
--- /dev/null
+++ b/img/about.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="#008000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
\ No newline at end of file
diff --git a/img/play.svg b/img/play.svg
new file mode 100644
index 0000000..90e2a76
--- /dev/null
+++ b/img/play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="#008000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play"><polygon points="6 3 20 12 6 21 6 3"/></svg>
\ No newline at end of file
diff --git a/img/star.svg b/img/star.svg
new file mode 100644
index 0000000..2082069
--- /dev/null
+++ b/img/star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="#008000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..258c0d2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="stylesheet.css">
+<title>Katastrofe</title>
+</head>
+<body>
+<div class="cardContainer">
+    <div class="card">
+        <p class="cardText"><b></b></p>
+        <img class="cardIcon" src="img/about.svg" alt="">
+    </div>
+    <div class="card">
+        <p class="cardText"><b></b></p>
+        <img class="cardIcon" src="img/star.svg" alt="">
+    </div>
+    <div class="card">
+        <p class="cardText"><b></b></p>
+        <img class="cardIcon" src="img/play.svg" alt="">
+    </div>
+</div>
+<div class="TextBody">
+    <p>LEOIMFEOMW</p>
+    <p>LEOIMFEOMW</p>
+    <p>LEOIMFEOMW</p>
+    <p>LEOIMFEOMW</p>
+    <p>LEOIMFEOMW</p>
+    <p>LEOIMFEOMW</p>
+    <p>LEOIMFEOMW</p>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/stylesheet.css b/stylesheet.css
new file mode 100644
index 0000000..8b84693
--- /dev/null
+++ b/stylesheet.css
@@ -0,0 +1,102 @@
+body {
+    background-color: black;
+    color: white;
+}
+
+.card {
+    position: absolute;
+    border: 5px solid green;
+    color: green;
+    background-color: black;
+    border-radius: 20px;
+    width: 200px;
+    height: 300px;
+    flex: 1;
+    margin: 10px;
+    transition: transform 0.5s;
+}
+
+.cardIcon {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 75px;
+}
+.cardText {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 45px;
+    margin-top: 45px;
+    margin-bottom: 45px;
+    text-align: center;
+    align-items: center;
+    -webkit-user-select: none; /* Safari */        
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+/Edge */
+    user-select: none; /* Standard */
+}
+
+.cardContainer {
+    display: flex;
+    background-color: black;
+    height: 100vh;
+    position: relative;
+}
+
+.card:nth-child(2) {
+    position: absolute;
+    left: 50%;
+    margin-left: -150px;
+    top: 2.5vh;
+    z-index: 3;
+}
+
+.card:nth-child(1) {
+    left: 50%;
+    margin-left: -265px;
+    top: 10vh;
+    transform: rotate(-25deg);
+    z-index: 2;
+}
+
+.card:nth-child(3) {
+    left: 50%;
+    margin-left: -35px;
+    top: 10vh;
+    transform: rotate(25deg);
+}
+
+.card:nth-child(2):hover {
+    transform: translate(0,-25px);
+}
+
+.card:nth-child(1):hover {
+    transform: translate(-75px,-25px);
+}
+
+.card:nth-child(3):hover {
+    transform: translate(75px,-25px);
+}
+
+.card:nth-child(1) .cardText b:after {
+    content: 'KAT';
+}
+
+.card:nth-child(1):hover .cardText b:after {
+    content: 'ABOUT';
+}
+
+.card:nth-child(2) .cardText b:after {
+    content: 'ASTR';
+}
+
+.card:nth-child(2):hover .cardText b:after {
+    content: 'GO DOWN';
+}
+
+.card:nth-child(3) .cardText b:after {
+    content: 'OFE';
+}
+
+.card:nth-child(3):hover .cardText b:after {
+    content: 'PLAY';
+}
\ No newline at end of file
