Compare commits
3 Commits
main
...
feature-ya
| Author | SHA1 | Date | |
|---|---|---|---|
| d45c4f5e11 | |||
| 3bb091e651 | |||
| 9fd12c228c |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
@ -1,4 +1,3 @@
|
|||||||
# msc-uxd-fs26-test
|
# msc-uxd-fs26-test
|
||||||
|
|
||||||
Test-Repository für Unterrichtszwecke
|
Test-Repository für Unterrichtszwecke
|
||||||
Test Marlo
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Das ist meine erste Website</h1>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
Das ist meine persönliche Datei.
|
|
||||||
11
anthony.html
11
anthony.html
@ -1,11 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Feature - Anthony</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
197
index.html
Normal file
197
index.html
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<title>Russisch Blau – Die elegante Katze</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/RUS_%28Russian_Blue%29_%284190272898%29.jpg/640px-RUS_%28Russian_Blue%29_%284190272898%29.jpg" alt="Russisch Blau Katze" class="hero-img">
|
||||||
|
<div class="hero-text">
|
||||||
|
<h1>Russisch Blau</h1>
|
||||||
|
<p class="tagline">Elegant. Sanft. Unvergesslich.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="#ueber">Über die Rasse</a>
|
||||||
|
<a href="#aussehen">Aussehen</a>
|
||||||
|
<a href="#charakter">Charakter</a>
|
||||||
|
<a href="#haltung">Haltung & Pflege</a>
|
||||||
|
<a href="#galerie">Galerie</a>
|
||||||
|
<a href="#fakten">Steckbrief</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<section id="ueber">
|
||||||
|
<div class="section-with-image">
|
||||||
|
<div class="section-text">
|
||||||
|
<h2>Über die Rasse</h2>
|
||||||
|
<p>
|
||||||
|
Die Russisch Blau ist eine der ältesten und begehrtesten Katzenrassen der Welt.
|
||||||
|
Ihren Ursprung hat sie in den Hafenstädten Nordwestrusslands, vermutlich in der
|
||||||
|
Stadt Archangelsk. Im 19. Jahrhundert wurden diese Katzen von Matrosen nach
|
||||||
|
Europa gebracht, wo sie rasch die Herzen von Katzenfans eroberten.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Seit ihrer ersten Ausstellung in London im Jahr 1875 ist die Russisch Blau
|
||||||
|
eine anerkannte Rasse und wird weltweit von Züchtern und Liebhabern geschätzt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-img-wrap">
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Russian_blue_kitten_%28cropped%29.jpg/640px-Russian_blue_kitten_%28cropped%29.jpg" alt="Russisch Blau – Porträt">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="aussehen">
|
||||||
|
<div class="section-with-image reverse">
|
||||||
|
<div class="section-text">
|
||||||
|
<h2>Aussehen</h2>
|
||||||
|
<p>
|
||||||
|
Das markanteste Merkmal der Russisch Blau ist ihr dichtes, plüschiges Doppelfell
|
||||||
|
in einem einzigartigen blaugrauen Farbton mit silbrigen Spitzen. Dieses Fell
|
||||||
|
fühlt sich samtweich an und steht leicht vom Körper ab.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Fell:</strong> Kurz, dicht, blaugrau mit silbernem Schimmer</li>
|
||||||
|
<li><strong>Augen:</strong> Leuchtend smaragdgrün, mandelförmig</li>
|
||||||
|
<li><strong>Körper:</strong> Schlank, muskulös, mittlegross</li>
|
||||||
|
<li><strong>Ohren:</strong> Gross, weit auseinander, spitz zulaufend</li>
|
||||||
|
<li><strong>Nase:</strong> Grau, passend zum Fell</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Ein charakteristisches Merkmal ist das sogenannte „Russisch-Blau-Lächeln" –
|
||||||
|
die Mundwinkel der Katze sind leicht nach oben gezogen, was ihr einen
|
||||||
|
freundlichen, fast lächelnden Ausdruck verleiht.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-img-wrap">
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Cat_Janna.jpg/640px-Cat_Janna.jpg" alt="Russisch Blau – Nahaufnahme Gesicht">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="charakter">
|
||||||
|
<h2>Charakter</h2>
|
||||||
|
<p>
|
||||||
|
Die Russisch Blau ist bekannt für ihr sanftes, ruhiges Wesen. Sie ist
|
||||||
|
intelligent, neugierig und sehr anhänglich gegenüber ihren Menschen –
|
||||||
|
jedoch oft zurückhaltend gegenüber Fremden.
|
||||||
|
</p>
|
||||||
|
<div class="charakter-grid">
|
||||||
|
<div class="eigenschaft">
|
||||||
|
<h3>Loyal</h3>
|
||||||
|
<p>Sie bildet starke Bindungen zu ihrer Familie und folgt ihren Lieblingspersonen gerne durch die Wohnung.</p>
|
||||||
|
</div>
|
||||||
|
<div class="eigenschaft">
|
||||||
|
<h3>Ruhig</h3>
|
||||||
|
<p>Im Vergleich zu anderen Rassen ist die Russisch Blau wenig laut und macht nur selten auf sich aufmerksam.</p>
|
||||||
|
</div>
|
||||||
|
<div class="eigenschaft">
|
||||||
|
<h3>Intelligent</h3>
|
||||||
|
<p>Sie lernt schnell Routinen und Tricks und liebt interaktive Spielzeuge sowie geistige Herausforderungen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="eigenschaft">
|
||||||
|
<h3>Sensibel</h3>
|
||||||
|
<p>Sie reagiert empfindlich auf Stress und Veränderungen – ein ruhiges Zuhause liegt ihr sehr.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="haltung">
|
||||||
|
<h2>Haltung & Pflege</h2>
|
||||||
|
<p>
|
||||||
|
Die Russisch Blau eignet sich hervorragend als Wohnungskatze. Sie ist
|
||||||
|
anpassungsfähig und kommt gut allein zurecht, freut sich aber über
|
||||||
|
Gesellschaft – sei es von Menschen oder einer zweiten Katze.
|
||||||
|
</p>
|
||||||
|
<h3>Fellpflege</h3>
|
||||||
|
<p>
|
||||||
|
Dank ihres kurzen Fells ist der Pflegeaufwand gering. Einmal wöchentliches
|
||||||
|
Bürsten genügt, um das Fell glänzend und gesund zu halten. In der
|
||||||
|
Fellwechselzeit empfiehlt sich häufigeres Bürsten.
|
||||||
|
</p>
|
||||||
|
<h3>Ernährung</h3>
|
||||||
|
<p>
|
||||||
|
Die Russisch Blau neigt zu Übergewicht, wenn sie überfüttert wird.
|
||||||
|
Hochwertige Katzenkost in kontrollierten Portionen ist empfehlenswert.
|
||||||
|
</p>
|
||||||
|
<h3>Beschäftigung</h3>
|
||||||
|
<p>
|
||||||
|
Regelmässiges Spielen, Klettertürme und interaktive Spielzeuge halten
|
||||||
|
diese intelligente Katze körperlich und geistig fit.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="galerie">
|
||||||
|
<h2>Galerie</h2>
|
||||||
|
<div class="galerie-grid">
|
||||||
|
<figure>
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Russiankitten4.jpg/640px-Russiankitten4.jpg" alt="Junges Russisch Blau">
|
||||||
|
<figcaption>Junges Russisch Blau</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/RB_kitten.JPG/640px-RB_kitten.JPG" alt="Junge Russisch Blau">
|
||||||
|
<figcaption>Junge Russisch Blau</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="fakten">
|
||||||
|
<h2>Steckbrief</h2>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Merkmal</th>
|
||||||
|
<th>Details</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ursprung</td>
|
||||||
|
<td>Russland (Archangelsk)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Grösse</td>
|
||||||
|
<td>Mittelgross (3–5 kg)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lebenserwartung</td>
|
||||||
|
<td>15–20 Jahre</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fellfarbe</td>
|
||||||
|
<td>Blaugrau mit silbernem Schimmer</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Augenfarbe</td>
|
||||||
|
<td>Smaragdgrün</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charakter</td>
|
||||||
|
<td>Ruhig, loyal, intelligent, sensibel</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haltung</td>
|
||||||
|
<td>Wohnungskatze, auch mit Freigang</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Allergiker</td>
|
||||||
|
<td>Bedingt geeignet (weniger Fel d 1)</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Eine Hommage an die schönste Katzenrasse der Welt — die Russisch Blau.</p>
|
||||||
|
<p class="footer-credit">Bilder: Wikimedia Commons, gemeinfrei</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,2 +0,0 @@
|
|||||||
Dies ist Laras persönliches File.
|
|
||||||
Ich schreibe mal eine zweite Zeile.
|
|
||||||
@ -1 +0,0 @@
|
|||||||
Das ist meine persönliche Datei.
|
|
||||||
@ -1 +0,0 @@
|
|||||||
Das ist meine persönliche Datei.
|
|
||||||
282
style.css
Normal file
282
style.css
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #f0f4f8;
|
||||||
|
color: #2c3e50;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header / Hero */
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image {
|
||||||
|
position: relative;
|
||||||
|
height: 480px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center 30%;
|
||||||
|
display: block;
|
||||||
|
filter: brightness(0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: #d0e8ff;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
nav {
|
||||||
|
background-color: #2c3e50;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
color: #a8c4e0;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 14px 24px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
transition: background-color 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
background-color: #4a6fa5;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main content */
|
||||||
|
main {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 40px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
section h2 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #4a6fa5;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 2px solid #e0eaf5;
|
||||||
|
}
|
||||||
|
|
||||||
|
section h3 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin: 20px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section p {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* List styling */
|
||||||
|
ul {
|
||||||
|
padding-left: 24px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section with image layout */
|
||||||
|
.section-with-image {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-with-image.reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-text {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-img-wrap {
|
||||||
|
flex: 0 0 280px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-img-wrap img {
|
||||||
|
width: 100%;
|
||||||
|
height: 320px;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center top;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.section-with-image,
|
||||||
|
.section-with-image.reverse {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.section-img-wrap {
|
||||||
|
flex: unset;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galerie */
|
||||||
|
.galerie-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.galerie-grid figure {
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
|
||||||
|
background: #f0f4f8;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.galerie-grid figure:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 24px rgba(74, 111, 165, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.galerie-grid img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center top;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.galerie-grid figcaption {
|
||||||
|
padding: 10px 14px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #555;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Charakter grid */
|
||||||
|
.charakter-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eigenschaft {
|
||||||
|
background: #f0f4f8;
|
||||||
|
border-left: 4px solid #4a6fa5;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eigenschaft h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #4a6fa5;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eigenschaft p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table */
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 1px solid #e0eaf5;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #4a6fa5;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) td {
|
||||||
|
background-color: #f7fafd;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover td {
|
||||||
|
background-color: #e8f0fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
background-color: #2c3e50;
|
||||||
|
color: #a8c4e0;
|
||||||
|
text-align: center;
|
||||||
|
padding: 28px 20px;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-credit {
|
||||||
|
margin-top: 6px;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: #6a8aaa;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
@ -1 +0,0 @@
|
|||||||
Hallo
|
|
||||||
@ -1 +0,0 @@
|
|||||||
Das ist Valéries Datei!!!
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Die Leidenschaft für Crêpes</title>
|
|
||||||
<link rel="stylesheet" href="yssa-style.css">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<nav class="main-nav">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#leidenschaft">Leidenschaft</a></li>
|
|
||||||
<li><a href="#handwerk">Handwerk</a></li>
|
|
||||||
<li><a href="#franzosisch">Paris</a></li>
|
|
||||||
<li><a href="#rezept">Rezept</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<header>
|
|
||||||
<h1>Crêpes: Leidenschaft, Handwerk und Tradition</h1>
|
|
||||||
<p>Eine Hommage an die französische Küche im Frühling</p>
|
|
||||||
</header>
|
|
||||||
<section class="hero-image">
|
|
||||||
<img src="Nutella-Crepes-500x500.jpg" alt="Frisch gebackene französische Crêpes">
|
|
||||||
</section>
|
|
||||||
<section id="leidenschaft">
|
|
||||||
<h2>Die Leidenschaft für Crêpes</h2>
|
|
||||||
<p>Crêpes sind mehr als nur ein Dessert – sie sind ein Ausdruck von Leidenschaft. In Paris, wo die Straßen nach frisch gebackenen Crêpes duften, wird diese Leidenschaft von Generation zu Generation weitergegeben. Der Moment, wenn der Teig in der Pfanne zischt und der Duft von Butter und Zucker die Luft erfüllt, ist pure Magie.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="handwerk">
|
|
||||||
<h2>Handwerk und Tradition</h2>
|
|
||||||
<p>Das Handwerk der Crêpes-Herstellung ist eine Kunst, die Präzision und Geduld erfordert. Traditionell werden Crêpes in Frankreich mit einfachen Zutaten zubereitet: Mehl, Eier, Milch und Butter. Die Technik des Schwungs, um den Teig dünn zu verteilen, erfordert Übung und Liebe zum Detail. Diese Tradition verbindet uns mit der französischen Kultur und dem Geist von Paris.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="franzosisch">
|
|
||||||
<h2>Paris und die französische Seele</h2>
|
|
||||||
<p>Paris im Frühling ist der perfekte Rahmen für Crêpes. Die Stadt erwacht mit blühenden Blumen und milden Temperaturen. Crêpes-Verkäufer säumen die Seine, und der Eiffelturm im Hintergrund symbolisiert die Eleganz Frankreichs. Crêpes sind ein Stück dieser modern-traditionellen Kultur – zeitlos und doch immer frisch.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="rezept">
|
|
||||||
<h2>Ein einfaches Crêpes-Rezept zum Nachkochen</h2>
|
|
||||||
<h3>Zutaten (für ca. 8 Crêpes):</h3>
|
|
||||||
<ul>
|
|
||||||
<li>200g Mehl</li>
|
|
||||||
<li>2 Eier</li>
|
|
||||||
<li>500ml Milch</li>
|
|
||||||
<li>50g Butter (geschmolzen)</li>
|
|
||||||
<li>1 Prise Salz</li>
|
|
||||||
<li>1 EL Zucker</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Zubereitung:</h3>
|
|
||||||
<ol>
|
|
||||||
<li>Mehl, Salz und Zucker in einer Schüssel vermischen.</li>
|
|
||||||
<li>Eier hinzufügen und verrühren.</li>
|
|
||||||
<li>Langsam die Milch zugießen und rühren, bis ein glatter Teig entsteht.</li>
|
|
||||||
<li>Geschmolzene Butter unterrühren.</li>
|
|
||||||
<li>Teig 30 Minuten ruhen lassen.</li>
|
|
||||||
<li>Eine Pfanne erhitzen, etwas Butter darin schmelzen.</li>
|
|
||||||
<li>Eine Schöpfkelle Teig in die Pfanne geben und schwenken, um einen dünnen Teigfilm zu bilden.</li>
|
|
||||||
<li>1-2 Minuten backen, wenden und weitere Minute backen.</li>
|
|
||||||
<li>Mit Lieblingsbelägen servieren – z.B. Nutella, Obst oder Ahornsirup.</li>
|
|
||||||
</ol>
|
|
||||||
<p>Bon appétit! Genießen Sie Ihre Crêpes im Frühlingssonnenschein.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>© 2026 Crêpes Leidenschaft. Inspiriert von Paris.</p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
150
yssa-style.css
150
yssa-style.css
@ -1,150 +0,0 @@
|
|||||||
/* 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;
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user