Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Design af Hero-sektionen | Oprettelse af et Porteføljewebsite med Bootstrap
Bootstrap-Essentials til Moderne Websites

bookDesign af Hero-sektionen

Opret hero-sektionen

Under navigationsbjælken oprettes en hero-sektion til introduktion af dig selv. Brug Bootstraps grid-system til at organisere layoutet.

<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. Tilføj professionelt foto og beskrivelse

Udskift "your-photo.jpg" med filstien eller URL'en til dit professionelle foto. Opdater den korte beskrivelse med oplysninger om dig selv, herunder din profession, placering, ekspertise og interesser.

Resultat

index.html

index.html

copy
Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 4

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 3.23

bookDesign af Hero-sektionen

Stryg for at vise menuen

Opret hero-sektionen

Under navigationsbjælken oprettes en hero-sektion til introduktion af dig selv. Brug Bootstraps grid-system til at organisere layoutet.

<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. Tilføj professionelt foto og beskrivelse

Udskift "your-photo.jpg" med filstien eller URL'en til dit professionelle foto. Opdater den korte beskrivelse med oplysninger om dig selv, herunder din profession, placering, ekspertise og interesser.

Resultat

index.html

index.html

copy
Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 4
some-alt