itenmarcalex/msc-uxd-fs26-test
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

new website crepes

Browse Source
This commit is contained in:
Ysabelle Moser 2026-03-12 11:32:09 +01:00
parent a570e50794
commit 4a1e42baf8
3 changed files with 176 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Nutella-Crepes-500x500.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

26
yssa-item.html Normal file
View File

@ -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>

150
yssa-style.css Normal file
View File

@ -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;
}