Allgemein

HTML und CSS Beispiele für Webseiten

von Monti
Verfasst von Monti

Es ist heutzutage einfacher denn je, eine eigene Webseite zu erstellen, ohne auf teure oder komplexe Webseitenbaukästen zurückgreifen zu müssen. Mit grundlegenden HTML-, CSS- und gegebenenfalls JavaScript-Kenntnissen kannst du eine ansprechende und funktionale Webseite selbst programmieren. In der folgenden Anleitung zeige ich dir einige Beispiele für die verschiedenen Abschnitte einer Webseite, die du leicht an deine Bedürfnisse anpassen kannst. Im Vergleich zu Webseitenbaukästen hast du bei dieser Methode mehr Kontrolle über das Design und die Funktionalität deiner Webseite und kannst sie so gestalten, wie du es möchtest. Lass uns gemeinsam die verschiedenen Abschnitte durchgehen und deine Webseite Schritt für Schritt zum Leben erwecken!

Falls du Grundlegendes zur Programmierung wissen möchtest, dann beginne hier:

Programmiere deine erste Webseite: HTML & CSS für Anfänger

Header

Ein Header ist der obere Bereich einer Webseite, der typischerweise das Logo und die Hauptnavigation enthält. Er bietet den Besuchern Orientierung und hilft ihnen, auf die wichtigsten Inhalte zuzugreifen.

1.1 Minimalistischer Header (Logo und einfache Navigation)

Ein minimalistischer Header ist ideal für Webseiten, die Wert auf Schlichtheit und klare Strukturen legen. Er besteht aus einem Logo und einer einfachen Navigation, die übersichtlich und benutzerfreundlich ist.

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalistischer Header</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">
            <h1>Meine Webseite</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Über</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

.logo {
    font-size: 24px;
    padding: 10px;
}

nav {
    display: flex;
}

ul {
    display: flex;
    list-style-type: none;
}

li {
    padding: 10px;
}

a {
    text-decoration: none;
    color: black;
}

Resultat:

1.2. Zentrierter Header (Logo in der Mitte, Navigation links und rechts)

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zentrierter Header</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul class="left-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Über</a></li>
            </ul>
        </nav>
        <div class="logo">
            <h1>Meine Webseite</h1>
        </div>
        <nav>
            <ul class="right-nav">
                <li><a href="#">Blog</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

.logo {
    font-size: 24px;
    padding: 10px;
}

nav {
    display: flex;
}

ul {
    display: flex;
    list-style-type: none;
}

li {
    padding: 10px;
}

a {
    text-decoration: none;
    color: black;
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-nav, .right-nav {
    flex: 1;
}

.logo {
    flex: 1;
    text-align: center;
}

Resultat:

1.3. Header mit Hintergrundbild

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalistischer Header</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="bg-image">
        <div class="logo">
            <h1>Meine Webseite</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Über</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

.logo {
    font-size: 24px;
    padding: 10px;
}

nav {
    display: flex;
}

ul {
    display: flex;
    list-style-type: none;
}

li {
    padding: 10px;
}

a {
    text-decoration: none;
    color: black;
}
.bg-image {
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpmfTYzR9KEaHXuuCzwi4pho8l3qATrUWwUA&usqp=CAU');
    background-size: cover;
    background-position: center;
}

Resultat:

1.4. Sticky Header (bleibt beim Scrollen sichtbar)

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalistischer Header</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="sticky">
        <div class="logo">
            <h1>Meine Webseite</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Über</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

.logo {
    font-size: 24px;
    padding: 10px;
}

nav {
    display: flex;
}

ul {
    display: flex;
    list-style-type: none;
}

li {
    padding: 10px;
}

a {
    text-decoration: none;
    color: black;
}


.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    z-index: 100;
}

Resultat:

Wird gleich aussehen wie bei 1.1, jedoch bleibt der Header an Ort und Stelle auch wenn man runter scrollt.

1.5. Header mit Suchleiste und Dropdown-Menü

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header mit Suchleiste und Dropdown-Menü</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">
            <h1>Meine Webseite</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Über</a></li>
                <li class="dropdown">
                    <a href="#">Services</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service 1</a></li>
                                            <li><a href="#">Service 2</a></li>
                        <li><a href="#">Service 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
        <form class="search-form">
            <input type="text" placeholder="Suche">
            <button type="submit">Suchen</button>
        </form>
    </header>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

.logo {
    font-size: 24px;
    padding: 10px;
}

nav {
    display: flex;
}

ul {
    display: flex;
    list-style-type: none;
}

li {
    padding: 10px;
}

a {
    text-decoration: none;
    color: black;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-form {
    display: flex;
    align-items: center;
}

.search-form input {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
}

.search-form button {
    background-color: #ccc;
    border: none;
    border-radius: 3px;
    padding: 5px;
    cursor: pointer;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    list-style-type: none;
    padding: 10px;
}

.dropdown-menu li {
    padding: 5px;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

Resultat:

Sobald man sich mit der Maus über „Services“ befindet öffnet sich ein Dropdown.

Hero Section

Die Hero Section ist der Hauptbereich einer Webseite, der sofort ins Auge fällt und die Aufmerksamkeit der Besucher auf sich zieht. Sie kann verschiedene Elemente wie Text, Bilder, Videos oder interaktive Inhalte enthalten, um den Besuchern einen Einblick in das Angebot der Seite zu geben. Im Folgenden finden Sie verschiedene Hero-Section-Varianten, die Sie auf Ihrer Webseite implementieren können:

2.1. Fullscreen-Hero (Hintergrundbild, Text und Call-to-Action)

HTML:

<section class="fullscreen-hero">
    <h3>Fullscreen-Hero</h3>
    <div class="hero-content">
        <h2>Willkommen auf unserer Webseite</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="cta">Mehr erfahren</a>
    </div>
</section>

CSS:

.fullscreen-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('hero-background.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content {
    text-align: center;
    color: white;
}

.cta {
    display: inline-block;
    background-color: #f00;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
}

Resultat:

2.2. Halbbild-Hero (Text und Bild nebeneinander)

HTML:

<section class="split-hero">
    <h3>Halbbild-Hero</h3>
    <div class="hero-text">
        <h2>Willkommen auf unserer Webseite</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="cta">Mehr erfahren</a>
    </div>
    <div class="hero-image">
        <img src="hero-image.jpg" alt="Hero Bild">
    </div>
</section>

CSS:

.split-hero {
    display: flex;
    align-items: center;
}

.hero-text {
    flex: 1;
}

.hero-image {
    flex: 1;
}

Resultat:

2.3. Karussell-Hero (automatisch wechselnde Inhalte)

Hinweis: Für diesen Abschnitt benötigen Sie zusätzlich JavaScript, um das automatische Wechseln der Inhalte zu ermöglichen. Wir konzentrieren uns hier auf das HTML- und CSS-Design.

HTML:

<section class="carousel-hero">
    <h3>Karussell-Hero</h3>
    <div class="carousel-slides">
        <div class="slide">
            <h2>Slide 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="slide">
            <h2>Slide 2</h2>
            <p>Curabitur eget mauris ipsum. Vestibulum ante ipsum primis in faucibus.</p>
        </div>
        <div class="slide">
            <h2>Slide 3</h2>
            <p>Phasellus tincidunt odio a dolor mollis, ut vulputate nulla bibendum.</p>
        </div>
    </div>
</section>


<script>
    const carouselSlides = document.querySelector('.carousel-slides');
    let slideIndex = 0;

    function nextSlide() {
        slideIndex++;

        if (slideIndex >= carouselSlides.children.length) {
            slideIndex = 0;
        }

        carouselSlides.style.transform = `translateX(-${slideIndex * 100 / carouselSlides.children.length}%)`;
    }

    setInterval(nextSlide, 5000); // Wechselt die Slides alle 5000 Millisekunden (5 Sekunden)
</script>

CSS:

.carousel-hero {
    position: relative;
    overflow: hidden;
}

.carousel-slides {
    display: flex;
    width: 300%;
    transition: transform 1s ease;
}

.slide {
    flex: 1;
    padding: 30px;
    text-align: center;
}

/* Sie können die folgende CSS-Regel anpassen, um den sichtbaren Slide zu ändern */
.carousel-slides {
    transform: translateX(-33.333%);
}

Resultat:

Im Bild zeigt es dies zwar nicht an, aber live wechseln die Slides alle paar Sekunden. Diese Könnte leicht mit Bildern ergänzt werden.

2.4. Video-Hero (Hintergrundvideo mit Text und Call-to-Action)

HTML:

<section class="video-hero">
    <h3>Video-Hero</h3>
    <video autoplay loop muted poster="video-poster.jpg">
        <source src="hero-video.mp4" type="video/mp4">
        Ihr Browser unterstützt das Video-Element nicht.
    </video>
    <div class="hero-overlay">
        <h2>Willkommen auf unserer Webseite</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="cta">Mehr erfahren</a>
    </div>
</section>

CSS:

.video-hero {
    position: relative;
    overflow: hidden;
}

video {
    width: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.cta {
 display: inline-block;
    background-color: #f00;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
}

Resultat:

Sofern sich ein Video im selben Ordner befindet wie das index.html, wird das Video im Hintergrund abspielen.

2.5. Parallax-Hero (Hintergrundbild mit Parallax-Effekt)

HTML:

<section class="parallax-hero">
    <h3>Parallax-Hero</h3>
    <div class="hero-content">
        <h2>Willkommen auf unserer Webseite</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="cta">Mehr erfahren</a>
    </div>
</section>

CSS:

.parallax-hero {
    position: relative;
    height: 500px;
    overflow: hidden;
    background-image: url('hero-background.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.cta {
    display: inline-block;
    background-color: #f00;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
}

Resultat:

Beim Scrollen gibt es hiere einen Effekt wo das Hintergrundbild an Ort und Stelle bleibt während die Inhalte sich bewegen. Das nennt man den Parallax Effekt.

Hauptinhalt

3.1. Kachel-Layout (Inhalte in gleichmäßigen Kacheln)

HTML:

<section class="tile-layout">
    <h2>Kachel-Layout</h2>
    <div class="tile">Kachel 1</div>
    <div class="tile">Kachel 2</div>
    <div class="tile">Kachel 3</div>
    <div class="tile">Kachel 4</div>
</section>

CSS:

.tile-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tile {
    flex: 1 1 calc(25% - 10px);
    background-color: lightgray;
    padding: 20px;
    box-sizing: border-box;
}

Resultat:

3.2. Zweisäuliges Layout (Inhalt und Sidebar)

HTML:

<section class="two-column-layout">
    <h2>Zweisäuliges Layout</h2>
    <div class="content">Inhalt</div>
    <aside class="sidebar">Sidebar</aside>
</section>

CSS:

.two-column-layout {
    display: flex;
    gap: 20px;
    min-height: 100vh; /* Setzt die Mindesthöhe auf die Höhe des Bildschirms */
}

.content {
    flex: 3;
    background-color: #f0f0f0; /* Hintergrundfarbe für den Inhalt */
    padding: 20px;
    box-sizing: border-box;
    min-height: 100%; /* Stellt sicher, dass der Inhalt mindestens die volle Höhe des Containers einnimmt */
}

.sidebar {
    flex: 1;
    background-color: #e0e0e0; /* Hintergrundfarbe für die Sidebar */
    padding: 20px;
    box-sizing: border-box;
    min-height: 100%; /* Stellt sicher, dass die Sidebar mindestens die volle Höhe des Containers einnimmt */
}

Resultat:

3.3. Einzäuliges Layout (zentrierter Inhalt)

HTML:

<section class="single-column-layout">
    <h2>Einzäuliges Layout</h2>
    <div class="content">Inhalt</div>
</section>

CSS:

.single-column-layout {
    display: flex;
    justify-content: center;
    min-height: 100vh; /* Setzt die Mindesthöhe auf die Höhe des Bildschirms */
    background-color: #f0f0f0; /* Hintergrundfarbe für das Layout */
}

.content {
    max-width: 800px;
    padding: 20px;
    box-sizing: border-box;
    min-height: 100%; /* Stellt sicher, dass der Inhalt mindestens die volle Höhe des Containers einnimmt */
}

Resultat:

Wie man sieht ist alles in einer Spalte, ähnlich wie bei vielen Landingpages. (z.B Clickfunnels)

3.4. Masonry-Layout (unregelmäßige Kacheln, wie Pinterest)

HTML:

<section class="masonry-layout">
    <h2>Masonry-Layout</h2>
    <div class="masonry-grid">
        <div class="masonry-item item-1">Item 1</div>
        <div class="masonry-item item-2">Item 2</div>
        <div class="masonry-item item-3">Item 3</div>
        <div class="masonry-item item-4">Item 4</div>
    </div>
</section>

CSS:

.masonry-layout {
    display: flex;
    justify-content: center;
}

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: masonry; /* Browserunterstützung ist noch eingeschränkt; alternativ können Sie 'auto' verwenden */
    gap: 10px;
    width: 800px;
}

.masonry-item {
    background-color: lightgray;
    padding: 20px;
    box-sizing: border-box;
}

.item-1 {
    grid-row: span 2;
}

.item-2 {
    grid-row: span 1;
}

.item-3 {
    grid-row: span 3;
}

.item-4 {
    grid-row: span 1;
}

Resultat:

3.5. Magazin-Layout (Inhalte in unterschiedlichen Boxen und Spalten)

HTML:

<section class="magazine-layout">
    <h2>Magazin-Layout</h2>
    <div class="magazine-grid">
        <article class="featured-article">Hauptartikel</article>
        <article class="small-article">Kleiner Artikel 1</article>
        <article class="small-article">Kleiner Artikel 2</article>
        <article class="small-article">Kleiner Artikel 3</article>
    </div>
</section>

CSS:

.magazine-layout {
    display: flex;
    justify-content: center;
}

.magazine-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    width: 800px;
}

.featured-article {
    grid-column: 1 / span 2;
    grid-row: 1;
    background-color: lightgray;
    padding: 20px;
}

.small-article {
    grid-row: 2;
    background-color: lightgray;
    padding: 20px;
}

Resultat:

Testimonials (Kundenmeinungen)

In diesem Abschnitt finden Sie verschiedene Möglichkeiten, Testimonials (Kundenmeinungen) auf Ihrer Website anzuzeigen. Die Beispiele umfassen automatisch wechselnde Kundenmeinungen, Meinungen in Kacheln, Zitat-Testimonials, Video-Testimonials und Testimonials in der Hero-Section.

4.1. Slider-Testimonials (automatisch wechselnde Kundenmeinungen)

Um automatisch wechselnde Kundenmeinungen zu erstellen, benötigen Sie JavaScript, um die Testimonials zu wechseln. Hier ist ein einfaches Beispiel:

HTML:

<section class="testimonial-slider">
  <h2>Slider-Testimonials</h2>
  <div class="testimonial-container">
    <div class="testimonial active">Testimonial 1</div>
    <div class="testimonial">Testimonial 2</div>
    <div class="testimonial">Testimonial 3</div>
  </div>
</section>

<script>
const testimonials = document.querySelectorAll('.testimonial');
let currentTestimonial = 0;

function changeTestimonial() {
  testimonials[currentTestimonial].classList.remove('active');
  currentTestimonial = (currentTestimonial + 1) % testimonials.length;
  testimonials[currentTestimonial].classList.add('active');
}

setInterval(changeTestimonial, 3000);
</script>

CSS:

.testimonial-slider {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-container {
  overflow: hidden;
  position: relative;
}

.testimonial {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: lightgray;
  transition: opacity 0.3s;
}

.testimonial.active {
  display: block;
  opacity: 1;
}

Resultat:

Eines nach dem anderen Testimonial wird im Slider angezeigt.

4.2. Kachel-Testimonials (Meinungen in Kacheln)

HTML:

<section class="testimonial-grid">
  <h2>Kachel-Testimonials</h2>
  <div class="testimonial">Testimonial 1</div>
  <div class="testimonial">Testimonial 2</div>
  <div class="testimonial">Testimonial 3</div>
</section>

CSS:

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial {
  padding: 20px;
  background-color: lightgray;
  text-align: center;
}

Resultat:

4.3. Zitat-Testimonials (mit Zitat-Design und Autor)

HTML:

<section class="quote-testimonials">
  <h2>Zitat-Testimonials</h2>
  <blockquote>
    <p>"Das ist ein tolles Produkt!"</p>
    <footer>- Max Mustermann</footer>
  </blockquote>
</section>

CSS:

.quote-testimonials {
  max-width: 800px;
  margin: 0 auto;
}

blockquote {
  padding: 20px;
  background-color: lightgray;
  quotes: "“" "”";
}

blockquote p {
  text-indent: 1em;
}

blockquote footer {
  display: block;
  text-align: right;
  margin-top: 10px;
  font-style: italic;
}

Resultat:

4.4. Video-Testimonials (Kurzvideos von Kunden)

HTML:

<section class="video-testimonials">
  <h2>Video-Testimonials</h2>
  <div class="video-container">
    <video controls>
      <source src="path/to/your/video1.mp4" type="video/mp4">
      Ihr Browser unterstützt das Video-Tag nicht.
    </video>
    <p>Video-Testimonial von Kunde 1</p>
  </div>
</section>

CSS:

.video-testimonials {
  max-width: 800px;
  margin: 0 auto;
}

.video-container {
  text-align: center;
}

.video-container video {
  width: 100%;
  max-width: 600px;
}

.video-container p {
  margin-top: 10px;
}

Resultat:

4.5. Testimonials in der Hero-Section (zusammen mit dem Haupt-Call-to-Action)

HTML:

<section class="hero-testimonials">
  <h2>Hero-Section mit Testimonials</h2>
  <div class="testimonial-container">
    <div class="testimonial active">Testimonial 1</div>
    <div class="testimonial">Testimonial 2</div>
    <div class="testimonial">Testimonial 3</div>
  </div>
  <button class="call-to-action">Jetzt kaufen</button>
</section>

CSS:

.hero-testimonials {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.testimonial-container {
  overflow: hidden;
  position: relative;
}

.testimonial {
  display: none;
  padding: 20px;
  background-color: lightgray;
  transition: opacity 0.3s;
}

.testimonial.active {
  display: block;
  opacity: 1;
}

.call-to-action {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

Resultat:

Footer

5.1. Minimalistischer Footer (Kontaktinformationen und Social-Media-Links)

HTML:

<footer class="minimal-footer">
  <h2>Minimalistischer Footer</h2>
  <p>Kontakt: info@example.com</p>
  <div class="social-media">
    <a href="#">Facebook</a>
    <a href="#">Twitter</a>
    <a href="#">Instagram</a>
  </div>
</footer>

CSS:

.minimal-footer {
  padding: 20px;
  background-color: lightgray;
  text-align: center;
}

.minimal-footer .social-media {
  margin-top: 10px;
}

.minimal-footer .social-media a {
  margin: 0 5px;
  text-decoration: none;
}

Resultat:

5.2. Mehrstufiger Footer (verschiedene Bereiche für Links, Kontakt, etc.)

HTML:

<footer class="multilevel-footer">
  <h2>Mehrstufiger Footer</h2>
  <div class="footer-row">
    <div class="footer-column">
      <h3>Links</h3>
      <ul>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Produkte</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </div>
    <div class="footer-column">
      <h3>Kontakt</h3>
      <p>info@example.com</p>
      <p>+49 123 456 7890</p>
    </div>
  </div>
</footer>

CSS:

.multilevel-footer {
  padding: 20px;
  background-color: lightgray;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-column {
  flex: 1;
  padding: 10px;
}

.footer-column ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 5px;
}

.footer-column ul li a {
  text-decoration: none;
}

Resultat:

5.3. Footer mit Newsletter-Anmeldung

HTML:

<footer class="newsletter-footer">
  <h2>Footer mit Newsletter-Anmeldung</h2>
  <form>
    <label for="email">Abonnieren Sie unseren Newsletter:</label>
    <input type="email" id="email" placeholder="Ihre E-Mail-Adresse">
    <button type="submit">Abonnieren</button>
  </form>
</footer>

CSS:

.newsletter-footer {
  padding: 20px;
  background-color: lightgray;
  text-align: center;
}

.newsletter-footer form {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.newsletter-footer input[type="email"] {
  margin-right: 10px;
  padding: 5px;
  font-size: 14px;
}

.newsletter-footer button[type="submit"] {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

Resultat:

Schlusswort

In dieser Anleitung haben wir ein paar Beispiele für HTML-und CSS-Abschnitte gezeigt, die du sofort einbauen und anpassen kannst. Das Erlernen dieser Technologien mag zunächst herausfordernd erscheinen, aber mit ein wenig Übung und Engagement wirst du schnell Fortschritte machen und deine eigene Webseite erstellen können.

Es ist wichtig zu erwähnen, dass dieser Ansatz nicht nur auf Webseiten beschränkt ist, sondern auch für die Entwicklung von Webapplikationen verwendet werden kann. So hast du die Möglichkeit, dein Wissen und deine Fähigkeiten auf verschiedene Projekte und Anwendungsfälle anzuwenden.

Wenn du die volle Kontrolle über das Design deiner Webseite oder Webapplikation haben möchtest, ohne tief in die Programmierung einzusteigen, gibt es auch Alternativen wie Webflow. Webflow ermöglicht es dir, responsives Webdesign und interaktive Elemente zu erstellen, ohne direkt mit Code zu arbeiten. Dies kann eine gute Option für diejenigen sein, die ihre kreativen Ideen schnell umsetzen wollen, ohne sich auf das Erlernen von Programmiersprachen zu konzentrieren.

Das könnte dich interessieren

Framer Testbericht – 50+ Baukasten getestet

KI-Highlights vom 4. bis 10. November 2024

KI-Highlights vom 28. Oktober bis 3. November 2024

10Web Testbericht – 50+ Baukasten getestet

KI- Generator: Finde die perfekte Domain für dein...

Online Business Erstellen – Der Ultimative Guide

Site123 Erfahrungsbericht – 2023

Die besten Webseitenbaukasten 2023 – 50+ Baukasten für...

KI Logo Erstellen: Gratis bis Günstig und Kreativ

Programmiere deine erste Webseite: HTML & CSS für...

Hinterlasse einen Kommentar

Meine Daten für das nächste Mal speichern.