diff --git a/Nutella-Crepes-500x500.jpg b/Nutella-Crepes-500x500.jpg
new file mode 100644
index 0000000..3486ca9
Binary files /dev/null and b/Nutella-Crepes-500x500.jpg differ
diff --git a/yssa-item.html b/yssa-item.html
new file mode 100644
index 0000000..683ba07
--- /dev/null
+++ b/yssa-item.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crepes sind Liebi</title>
+    <link rel="stylesheet" href="yssa-style.css">
+</head>
+<body>
+    <header>
+        <h1>Das ist die Testseite von Yssa</h1>
+        <h2>Ich liebe Crepes</h2>
+        <img src="Nutella-Crepes-500x500.jpg" alt="Ein Bild einer leckeren Crepe mit Nutella" width="500px" height="500px">
+    </header>
+    
+    <h3>Warum?</h3>
+    <ul>
+        <li>Der Geschmack</li>
+        <li>Der Duft</li>
+        <li>Warum nicht?</li>
+        <li>Einfach mega</li>
+    </ul>
+
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur numquam, cupiditate eligendi ipsum dolorum facere? Earum, voluptate corporis neque natus aliquid, dolor, repellendus doloribus maxime nostrum repudiandae laboriosam deserunt illo.</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/yssa-style.css b/yssa-style.css
new file mode 100644
index 0000000..5170e7e
--- /dev/null
+++ b/yssa-style.css
@@ -0,0 +1,150 @@
+/* Grundlayout */
+
+body {
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+    background-color: #fff7f9;
+    color: #4a3f3f;
+    line-height: 1.6;
+}
+
+/* Header */
+
+header {
+    background: linear-gradient(135deg, #ffd6e0, #ffeef3);
+    text-align: center;
+    padding: 60px 20px;
+}
+
+header h1 {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.8rem;
+    margin-bottom: 10px;
+    color: #c94f7c;
+}
+
+header p {
+    font-size: 1.2rem;
+    color: #7a5a65;
+}
+
+/* Sections */
+
+section {
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 30px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
+}
+
+/* Section Titel */
+
+section h2 {
+    font-family: 'Playfair Display', serif;
+    color: #d45c8c;
+    margin-bottom: 15px;
+}
+
+section h3 {
+    margin-top: 25px;
+    color: #b94b76;
+}
+
+/* Listen */
+
+ul, ol {
+    padding-left: 20px;
+}
+
+li {
+    margin-bottom: 8px;
+}
+
+/* Rezeptbereich */
+
+#rezept {
+    background: #fff0f5;
+    border-left: 6px solid #f6a5c0;
+}
+
+/* Footer */
+
+footer {
+    text-align: center;
+    padding: 20px;
+    margin-top: 40px;
+    background-color: #ffd6e0;
+    color: #6b4a53;
+    font-size: 0.9rem;
+}
+
+/* Hover Effekt für moderne Note */
+
+section:hover {
+    transform: translateY(-3px);
+    transition: 0.3s ease;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
+}
+
+/* Responsive Design */
+
+@media (max-width: 768px) {
+    header h1 {
+        font-size: 2rem;
+    }
+
+    section {
+        margin: 20px;
+        padding: 20px;
+    }
+}
+
+.hero-image {
+    display: flex;
+    justify-content: center;
+    margin: 60px auto;
+}
+
+.hero-image img {
+    width: 100%;
+    max-width: 650px;
+    height: auto;
+    border-radius: 18px;
+    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
+}
+
+.hero-image img:hover {
+    transform: scale(1.02);
+    transition: 0.3s ease;
+}
+
+/* Navigation */
+
+.main-nav {
+    background: white;
+    padding: 15px 0;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.main-nav ul {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    margin: 0;
+    padding: 0;
+}
+
+.main-nav a {
+    text-decoration: none;
+    font-family: 'Playfair Display', serif;
+    color: #c94f7c;
+    font-size: 1.1rem;
+    transition: 0.3s;
+}
+
+.main-nav a:hover {
+    color: #ff7aa8;
+}
\ No newline at end of file
