Wahrnehmungspsychologie & CSS-Vertiefung

Slides

📊 Theorie

Wahrnehmungspsychologie, präattentive Merkmale, Gestaltgesetze

💻 Web-Lab

CSS-Vertiefung

Übung: CSS Layout nachbauen

📦 Layout

Vorlage Layout

📦 Ergebnis

04_weblab.zip

Bauen Sie die gezeigte Seite anhand der folgenden Spezifikationen nach.
Verwenden Sie CSS Custom Properties, Flexbox und Grid.

---

Vorgaben & Maße

Seite allgemein

• Hintergrund: #eaecee
• Außenabstand (body padding): 48px
• Schrift: serif
• Abstand zwischen Sections: 24px

Section (Standard)

• Hintergrund: #ffffff
• Border-radius: 16px
• Innenabstand: 48px
• Max-Breite: 1100px, zentriert

Section (Wide)

• Wie Standard, aber max-Breite: 1400px

---

Vorlage: SVG Platzhalter

Kopieren Sie diesen Code für jedes Bild:

<svg class="placeholder" xmlns="http://www.w3.org/2000/svg">
  <text x="50%" y="50%" dominant-baseline="middle"
        text-anchor="middle">Bild</text>
</svg>

.placeholder {
  background: #cdd1d6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-family: sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
}