diff --git a/index.html b/index.html index 6c19dc1..a1b6dff 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,194 @@ - Yaras Website + Russisch Blau – Die elegante Katze -

Herzlich willkommen!

-

Warum du meine Seite besuchen solltest:

- + +
+
+ Russisch Blau Katze +
+

Russisch Blau

+

Elegant. Sanft. Unvergesslich.

+
+
+
+ + + +
+ +
+
+
+

Über die Rasse

+

+ 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. +

+

+ 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. +

+
+
+ Russisch Blau – Porträt +
+
+
+ +
+
+
+

Aussehen

+

+ 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. +

+
    +
  • Fell: Kurz, dicht, blaugrau mit silbernem Schimmer
    • +
  • Augen: Leuchtend smaragdgrün, mandelförmig
    • +
  • Körper: Schlank, muskulös, mittlegross
    • +
  • Ohren: Gross, weit auseinander, spitz zulaufend
    • +
  • Nase: Grau, passend zum Fell
    • +
+

+ 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. +

+
+
+ Russisch Blau – Nahaufnahme Gesicht +
+
+
+ +
+

Charakter

+

+ 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. +

+
+
+

Loyal

+

Sie bildet starke Bindungen zu ihrer Familie und folgt ihren Lieblingspersonen gerne durch die Wohnung.

+
+
+

Ruhig

+

Im Vergleich zu anderen Rassen ist die Russisch Blau wenig laut und macht nur selten auf sich aufmerksam.

+
+
+

Intelligent

+

Sie lernt schnell Routinen und Tricks und liebt interaktive Spielzeuge sowie geistige Herausforderungen.

+
+
+

Sensibel

+

Sie reagiert empfindlich auf Stress und Veränderungen – ein ruhiges Zuhause liegt ihr sehr.

+
+
+
+ +
+

Haltung & Pflege

+

+ 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. +

+

Fellpflege

+

+ 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. +

+

Ernährung

+

+ Die Russisch Blau neigt zu Übergewicht, wenn sie überfüttert wird. + Hochwertige Katzenkost in kontrollierten Portionen ist empfehlenswert. +

+

Beschäftigung

+

+ Regelmässiges Spielen, Klettertürme und interaktive Spielzeuge halten + diese intelligente Katze körperlich und geistig fit. +

+
+ +
+

Galerie

+
+
+ Junges Russisch Blau +
Junges Russisch Blau
+
+
+ Junge Russisch Blau +
Junge Russisch Blau
+
+
+
+ +
+

Steckbrief

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MerkmalDetails
UrsprungRussland (Archangelsk)
GrösseMittelgross (3–5 kg)
Lebenserwartung15–20 Jahre
FellfarbeBlaugrau mit silbernem Schimmer
AugenfarbeSmaragdgrün
CharakterRuhig, loyal, intelligent, sensibel
HaltungWohnungskatze, auch mit Freigang
AllergikerBedingt geeignet (weniger Fel d 1)
+
+ +
+ + + - \ No newline at end of file + diff --git a/style.css b/style.css index bef73aa..b49cc12 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,282 @@ * { + margin: 0; + padding: 0; + box-sizing: border-box; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; -} \ No newline at end of file +} + +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; +}