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

Überarbeitung mit Vibe-Coding

Browse Source
This commit is contained in:
Yara Wagner 2026-03-12 11:31:03 +01:00
parent 3bb091e651
commit d45c4f5e11
2 changed files with 468 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
index.html
View File

@ -4,15 +4,194 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Yaras Website</title>
<title>Russisch Blau – Die elegante Katze</title>
</head>
<body>
<h1>Herzlich willkommen!</h1>
<p>Warum du meine Seite besuchen solltest:</p>
<ul>
<li>Sie ist cool.</li>
<li>Du bist cool.</li>
<li>Warum nicht.</li>
</ul>
<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 &mdash; die Russisch Blau.</p>
<p class="footer-credit">Bilder: Wikimedia Commons, gemeinfrei</p>
</footer>
</body>
</html>

279
style.css
View File

@ -1,3 +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;
}