CSS/fertige Layouts

Hier bieten wir fertige Layouts und Design-Vorlagen an. Du kannst sie hier ansehen, herunterladen und sowohl für private als auch kommerzielle Projekte kostenfrei verwenden. Alle Layouts sind responsiv, zugänglich und bestehen natürlich aus validem HTML.

Abweichend von den Beispielen im Wiki werden die Layouts statisch gehostet, damit externe Ressourcen wie Grafiken, Unterseiten und Stylesheets einfacher referenziert werden können.

Design-Vorlagen

10/10

Aus dem Einstieg in HTML-Tutorial

Noch kein fertiges Layout, sondern der Start für die ersten Schritte in HTML und CSS.

• Webseiten-Ansicht
• Download (ZIP, 95kB)

OnePager

9.2/10

Ein eleganter OnePager mit Scroll Snap

Perfekt geeignet für eine Web-Visitenkarte oder eine Einladung für ein Event!

• Webseiten-Ansicht
• Download (ZIP, 10kB)

Ihr Anwalt

10/10

Aus dem Dark Mode-Tutorial

Eine farblich ansprechende Seite für eine kleine Firma, Kanzlei oder Privatperson mit Light und Dark Mode

• Webseiten-Ansicht
• Download (ZIP, 40kB)

Vom Entwurf zum Layout

10/10

Aus dem Einstieg in CSS-Tutorial

Aus einer einfachen „Mobile first!“-Seite wird auf großen Viewports ein attraktives Grid mit Zier-Elementen.

• Webseiten-Ansicht
• Download (ZIP, 1.61MB)

SportVerein

Diese grafisch ansprechende Seite eines Sportvereins hat 3 feste Spalten im Grid Layout, die sich bei kleinerem Bildschirm untereinander positionieren.

• Webseiten-Ansicht
• Download (278KB, Prüfsumme: )

Design 05

"Kennt man eine - kennt man alle!" – Moderne Webseiten leiden oft an ihrer Beliebigkeit: Ein mehr oder weniger komplexes Raster aus viereckigen Bereichen. Mit SVG sind auch andere geometrische Formen möglich. Natürlich ebenfalls responsiv und mit allem drin!

• Webseiten-Ansicht
• Download ( KB, Prüfsumme: )

Man with Hat

8.5/10

Man with Hat

Eine poppige Seite im 3-Spalten-Layout mit einem auffälligen Header. Mit einigen wenigen Handgriffen kann das Theme der Seite farblich angepasst werden.

• Webseiten-Ansicht
• Download (ZIP, 109kB)

Design 07

farbenfrohe Seite mit großem Header für eigenes Logo und einem (abgeschalteten) Flexslider

• Webseiten-Ansicht
• Download ( KB, Prüfsumme: )

Design 08

Eine grafisch gelungene Seite mit einem großen Teaser, dessen Bilderklärung (figcaption) beim Überfahren mit der Maus einschwebt.

Die Pfeile der Navigation sind keine Grafiken, sondern mit CSS erzeugte Pseudoelemente. Der 4-farbige Streifen unter der Überschrift ist ebenfalls nur CSS.

• Webseiten-Ansicht
• Download ( KB, Prüfsumme: )

CSS-Garten

CSS-Garten

Eine auf dem HTML-Grundgerüst und dem Seitenstrukturierungs-Tutorial aufbauende übersichtliche Webseite, die mit neun verschiedenen Layouts ausgeliefert wird.

• Webseiten-Ansicht
• Download ( KB, Prüfsumme: )

Design 10

Eine grafisch abwechslungsreiche Seite, die mit einem strukturierten Hintergrund daherkommt. Der Kopf und die Navigation sind oben fix positioniert.

Auf der Startseite findet sich ein Bilder-Karussell, dass man entweder manuell anklicken oder mit wenigen Handgriffen automatisch rotieren lassen kann. Es ist ab einer Breite von 750px responsiv, schmalere Ansichten müssten noch eingestellt werden.

• Webseiten-Ansicht
• Download ( KB, Prüfsumme: )

Visitenkarte

Visitenkarte

Ein eleganter OnePager als Landing Page oder Portfolio für eine Bewerbung. Natürlich responsiv und mit allem drin!

• Webseiten-Ansicht
• Download ( KB, Prüfsumme: )

Hinweise zu den Vorlagen

ZIP-Datei herunterladen

Wenn du ein Layout für ein eigenes Web-Projekt verwenden möchten, klicke auf den folgenden Verweis, um das Layout zu speichern:

• ZIP-Datei.

Speicher die ZIP-Datei in ein Verzeichnis deiner Wahl und entpacke diese.

• Windows: Rechtsklick und "Dateien entpacken" wählen
• Mac: Doppelklick

Urheberrecht

Hinweis:

Die Templates unterliegen abweichend von den Lizenzbedingungen ausdrücklich nicht der Lizenz CC-BY-SA 3.0 (de), sondern sie sind im Sinne der Lizenz CC0 1.0 (de) als public domain veröffentlicht.
Du darfst diese Templates kopieren, verändern, veröffentlichen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen. SELFHTML verzichtet weltweit auf alle urheberrechtlichen und verwandten Schutzrechte, soweit dies gesetzlich möglich ist.