Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.
Challenge: Kontaktseite gestalten – Tutorial zu CSS
Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen
Challenge: Kontaktseite gestalten
Willkommen bei der Challenge zu diesem Kapitel und dieses Mal geht es um die Gestaltung der Seite »Kontakt«. Sie sollen mit den bisher erlernten Eigenschaften und Werten die Abschnitte mit den Kontaktdaten und dem Kontaktformular gestalten. Sie können natürlich auch gerne Eigenschaften und Werte benutzen, die Sie noch nicht gelernt haben, aber die Aufgabe besteht erst mal darin, das aufzuwenden. Dann erheben Sie damit den Abschnitt mit den Kontaktdaten optisch etwas hervor. Und im Formular soll der eingegebene Text dieselbe Schriftart und Schriftgröße haben wie der Fließtext auf der umgebenden Seite. Zu guter Letzt sollen die Eingabefelder und der »Absenden«-Button optisch hervorgehoben werden beim Ausfüllen, wenn sie den Fokus bekommen. Das alles ist so die minimale Anforderung, aber lassen Sie Ihrer Kreativität freien Lauf, toben Sie sich aus anders ausgedrückt, ich wünsche Ihnen viel Spaß beim Gestalten der Kontaktseite.
Inhalt
-
-
-
-
-
-
-
-
-
(Gesperrt)
Grafiken im Hintergrund: background4 Min. 41 Sek.
-
(Gesperrt)
Farbverläufe mit linear-gradient()3 Min. 45 Sek.
-
(Gesperrt)
Schattenboxen mit box-shadow2 Min. 46 Sek.
-
(Gesperrt)
Abgerundete Ecken mit border-radius2 Min. 40 Sek.
-
(Gesperrt)
Call To Action: Hyperlinks als Button gestalten4 Min. 2 Sek.
-
(Gesperrt)
Boxen am Bildschirm ausblenden: die Klasse visually-hidden4 Min. 22 Sek.
-
(Gesperrt)
Challenge: Kontaktseite gestalten1 Min. 13 Sek.
-
(Gesperrt)
Solution: Kontaktseite2 Min. 29 Sek.
-
(Gesperrt)
-
-