Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Gestaltung des Hero-Bereichs | Erstellung Einer Portfolio-Website Mit Bootstrap
Bootstrap-Grundlagen für Moderne Websites

bookGestaltung des Hero-Bereichs

Hero-Bereich erstellen

Unterhalb der Navigationsleiste einen Hero-Bereich anlegen, um sich vorzustellen. Das Grid-System von Bootstrap zur Strukturierung des Layouts verwenden.

<section id="about" class="hero-section py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto">
        <!-- Add professional photo here -->
        <img
          src="your-photo.jpg"
          alt="[Your Name]"
          class="img-fluid"
          style="display: block; margin: 0 auto"
        />
      </div>
      <div class="col-md-8 mx-auto">
        <!-- Add short description about yourself here -->
        <h1 class="h1 text-center fs-2 text-primary my-3">Your Name</h1>
        <p class="fs-3">
          Welcome to my portfolio! I'm a passionate [your profession] based in
          [your location]. I specialize in [your expertise] and love creating
          [your interests].
        </p>
      </div>
    </div>
  </div>
</section>

2. Professionelles Foto und Beschreibung hinzufügen

"your-photo.jpg" durch den Dateipfad oder die URL Ihres professionellen Fotos ersetzen. Die Kurzbeschreibung mit Informationen zu Ihrer Person, einschließlich Beruf, Standort, Fachgebiet und Interessen, aktualisieren.

Ergebnis

index.html

index.html

copy
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 4

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 3.23

bookGestaltung des Hero-Bereichs

Swipe um das Menü anzuzeigen

Hero-Bereich erstellen

Unterhalb der Navigationsleiste einen Hero-Bereich anlegen, um sich vorzustellen. Das Grid-System von Bootstrap zur Strukturierung des Layouts verwenden.

<section id="about" class="hero-section py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto">
        <!-- Add professional photo here -->
        <img
          src="your-photo.jpg"
          alt="[Your Name]"
          class="img-fluid"
          style="display: block; margin: 0 auto"
        />
      </div>
      <div class="col-md-8 mx-auto">
        <!-- Add short description about yourself here -->
        <h1 class="h1 text-center fs-2 text-primary my-3">Your Name</h1>
        <p class="fs-3">
          Welcome to my portfolio! I'm a passionate [your profession] based in
          [your location]. I specialize in [your expertise] and love creating
          [your interests].
        </p>
      </div>
    </div>
  </div>
</section>

2. Professionelles Foto und Beschreibung hinzufügen

"your-photo.jpg" durch den Dateipfad oder die URL Ihres professionellen Fotos ersetzen. Die Kurzbeschreibung mit Informationen zu Ihrer Person, einschließlich Beruf, Standort, Fachgebiet und Interessen, aktualisieren.

Ergebnis

index.html

index.html

copy
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 4
some-alt