diff --git a/Animaton_Card_1.PNG b/Animaton_Card_1.PNG
new file mode 100644
index 0000000..d1e9524
Binary files /dev/null and b/Animaton_Card_1.PNG differ
diff --git a/Animaton_Card_2.png b/Animaton_Card_2.png
new file mode 100644
index 0000000..6886acd
Binary files /dev/null and b/Animaton_Card_2.png differ
diff --git a/bild_logo.png b/bild_logo.png
new file mode 100644
index 0000000..a28dbc7
Binary files /dev/null and b/bild_logo.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..15788b0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+ Animation Card
+
+
+
+
+
+
+
+
+
+
Wuff Wuff...
+
Lauf um dein Leben!
+
Entdecke mehr
+
+
+
+
+
\ No newline at end of file
diff --git a/stop_logo.png b/stop_logo.png
new file mode 100644
index 0000000..1001f3f
Binary files /dev/null and b/stop_logo.png differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..45ada05
--- /dev/null
+++ b/style.css
@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
+*
+{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+body
+{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background: #151515;
+}
+.card
+{
+ position: relative;
+ width: 350px;
+ height: 350px;
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: 0.5s;
+ transition-delay: 0.5s;
+}
+.card:hover
+{
+ width: 600px;
+ transition-delay: 0.5s;
+}
+.card .circle
+{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.card .circle::before
+{
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 350px;
+ height: 350px;
+ border-radius: 50%;
+ background:#191919;
+ border: 8px solid var(--clr);
+ filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr));
+ transition: 0.5s, background 0.5s;
+ transition-delay: 0.75s,1s;
+}
+.card:hover .circle::before
+{
+ transition-delay: 0.5s;
+ width: 100%;
+ height: 100%;
+ border-radius: 20px;
+ background: var(--clr);
+}
+.card .circle .logo
+{
+ position: relative;
+ width: 200px; /* Logo Größe */
+ transition-delay: 0.5s;
+}
+.card:hover .circle .logo
+{
+ transform: scale(0);
+ transition-delay: 0s;
+}
+.card .product_img
+{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) scale(0)rotate(315deg);
+ height: 300px;
+ transition: 0.5s ease-in-out;
+}
+.card:hover .product_img
+{
+ transition-delay: 0.75s;
+ top: 35%;
+ left: 72%;
+ height: 400px;
+ transform: translate(-50%, -50%) scale(1)rotate(15deg);
+}
+.card .content
+{
+ position: absolute;
+ width: 50%;
+ left: 20%;
+ padding: 20px 20px 20px 40px;
+ opacity: 0;
+ transition: 0.5s;
+ visibility: hidden;
+}
+.card:hover .content
+{
+ transition-delay: 0.75s;
+ opacity: 1;
+ visibility: visible;
+ left: 0;
+}
+.card .content h2
+{
+ color: #fff;
+ text-transform: uppercase;
+ font-size: 1.5em;
+ line-height: 1em;
+}
+.card .content p
+{
+ color: #fff;
+}
+.card .content a
+{
+ position: relative;
+ color: #111;
+ background: #fff;
+ padding: 10px 20px;
+ border-radius: 10px;
+ display: inline-block;
+ text-decoration: none;
+ font-weight: 600;
+ margin-top: 10px;
+}
\ No newline at end of file