LU14.A01 - Farben und Schriften anpassen

Setzen Sie ein individuelles Farbschema für eine Webseite mit Bootstrap um.

Vorgehen

Vorbereitung

  1. Akzeptieren Sie das GitHub Classroom Assignment.
  2. Klonen Sie das Repository in Webstorm.
  3. Öffnen Sie die Webseite https://coolors.co/generate um ein zufälliges Farbschema zu generieren.
    • Sie können beliebig oft ein neues, zufälliges Farbeschema generieren lassen.
  4. Notieren Sie sich die Werte für die einzelnen Farben. Sie benötigen je einen Farbwert für
    • Primäre Farbe
    • Sekundäre Farbe
    • Primärer Hintergrund
    • Sekundärer Hintergrund

CSS anpassen

Um die Variablen aus Bootstrap zu überschreiben, bearbeiten Sie die Datei style.css. Überschreiben Sie alle Variablen, welche die primären, sekundären und tertiären Farben für Schrift, Hintergründe, Buttons, … festlegen. Sie müssen dazu teilweise die hexadezimalen in dezimale Werte umrechnen.

Prüfen Sie im Webbrowser, ob ihr individuelles Farbeschema korrekt umgesetzt ist.

Abgabe

Die Abgabe erfolgt mittels Push ins GitHub Repository.


Kevin Maurizi, Marcel Suter