Herausforderung: Eine Moderne Kartenkomponente Erstellen

Übung zur Verbesserung der visuellen Gestaltung der Webseite. Die Aufgabe umfasst:

• Einen Schatten zum div-Element mit dem Klassennamen card hinzufügen. Die angegebenen Schattenwerte sind

rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px

• Ein Hintergrundbild zum div-Element mit dem Klassennamen card hinzufügen. Der Bildlink ist angegeben:

   https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png

• Das Hintergrundbild innerhalb der Karte zentrieren.

• Um einem Element einen Schatten hinzuzufügen, die Eigenschaft box-shadow mit dem angegebenen Wert verwenden. In diesem Fall lautet der Wert rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
• Um ein Bild als Hintergrund mit der Eigenschaft background-image festzulegen, die Syntax url("correct path") verwenden. In die Klammern Anführungszeichen setzen und den Pfad zum Bild angeben. In dieser Aufgabe ist der korrekte Pfad: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
• Um die Position des Hintergrundbildes zu bestimmen, die Eigenschaft background-position verwenden. In diesem Fall den Wert center für die Eigenschaft setzen.

Was Sie erstellt haben

Sie haben Webseiten mit CSS gestaltet und dabei Farben, Abstände, Layout und visuelle Komponenten hinzugefügt.

Was fehlt

Ihre Seiten sehen gut aus, sind jedoch noch statisch. Benutzer können nicht mit ihnen interagieren.

Wie es weitergeht

Um Verhalten und Interaktivität hinzuzufügen, benötigen Sie JavaScript. Als Nächstes beginnen Sie mit JavaScript zu arbeiten und machen Ihre Seiten dynamisch.