Lernfabrik

INFOTEAM Webseite Nachbauen mit HTML & Bootstrap

In dieser Anleitung lernst du Schritt für Schritt, wie du die INFOTEAM-Webseite komplett mit Bootstrap nachbauen kannst.

Schritt 1: Projektstruktur erstellen

Erstelle einen Hauptordner INFOTEAM_Website und folgende Unterordner:

Schritt 2: Grundgerüst HTML

Erstelle eine index.html mit folgendem Grundgerüst:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>INFOTEAM GmbH</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet">
  <link href="css/styles.css" rel="stylesheet">
</head>
<body>
</body>
</html>

Schritt 3: Navigation erstellen

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="index.html">INFOTEAM GmbH</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="index.html">Startseite</a></li>
        <li class="nav-item"><a class="nav-link" href="about.html">Anmeldung</a></li>
        <li class="nav-item"><a class="nav-link" href="contact.html">Schulungen</a></li>
        <li class="nav-item"><a class="nav-link" href="pricing.html">Kontakt</a></li>
      </ul>
    </div>
  </div>
</nav>

Schritt 4: Header / Hero-Bereich

<header class="bg-dark py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6 text-center text-lg-start">
        <h1 class="display-5 fw-bolder text-white">Online-Schulungen von INFOTEAM</h1>
        <p class="lead text-white-50">Flexible Schulungen jederzeit und überall</p>
        <a class="btn btn-primary btn-lg me-3" href="#features">Jetzt Schulungen ansehen</a>
      </div>
      <div class="col-lg-6 text-center">
        <img class="img-fluid rounded" src="https://dummyimage.com/600x400/343a40/6c757d" alt="Online-Schulung">
      </div>
    </div>
  </div>
</header>

Schritt 5: Features / Leistungen

<section class="py-5" id="features">
  <div class="container">
    <div class="row">
      <div class="col-lg-4"><h2>Unsere Schulungen</h2></div>
      <div class="col-lg-8">
        <div class="row row-cols-1 row-cols-md-2">
          <div class="col mb-4">
            <div class="feature bg-primary text-white rounded-3 mb-3"><i class="bi bi-collection"></i></div>
            <h5>Flexible Teilnahme</h5>
            <p>Jederzeit und überall teilnehmen.</p>
          </div>
          <div class="col mb-4">
            <div class="feature bg-primary text-white rounded-3 mb-3"><i class="bi bi-building"></i></div>
            <h5>Für Unternehmen</h5>
            <p>Maßgeschneiderte Schulungen.</p>
          </div>
          <div class="col mb-4">
            <div class="feature bg-primary text-white rounded-3 mb-3"><i class="bi bi-toggles2"></i></div>
            <h5>Individuelle Themen</h5>
            <p>Themen auf Ihr Unternehmen abgestimmt.</p>
          </div>
          <div class="col mb-4">
            <div class="feature bg-primary text-white rounded-3 mb-3"><i class="bi bi-toggles2"></i></div>
            <h5>Einfache Teilnahme</h5>
            <p>Termin wählen und teilnehmen.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Schritt 6: Testimonial

<div class="py-5 bg-light">
  <div class="container text-center">
    <p class="fst-italic">"Die Schulungen haben uns sehr geholfen..."</p>
    <div>Julia Müller / CEO, FOOD & FUN GmbH</div>
  </div>
</div>

Schritt 7: Blog / Neueste Schulungen

<section class="py-5">
  <div class="container">
    <div class="row row-cols-1 row-cols-md-3">
      <div class="col mb-5">
        <div class="card h-100">
          <img class="card-img-top" src="https://dummyimage.com/600x350/ced4da/6c757d">
          <div class="card-body">
            <h5>Einführung in die IT-Sicherheit</h5>
            <p>Grundlagen der IT-Sicherheit lernen.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Schritt 8: Footer

<footer class="bg-dark py-4 mt-auto">
  <div class="container d-flex justify-content-between">
    <div class="text-white">Copyright © INFOTEAM GmbH 2025</div>
    <div>
      <a class="link-light" href="#!">Datenschutz</a>
      <span class="text-white mx-1">·</span>
      <a class="link-light" href="#!">AGB</a>
      <span class="text-white mx-1">·</span>
      <a class="link-light" href="#!">Kontakt</a>
    </div>
  </div>
</footer>
Vorlage herunterladen