Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Designing the Hero Section | Creating a Portfolio Website with Bootstrap
Bootstrap Essentials for Modern Websites

bookDesigning the Hero Section

Create the Hero Section

Below the navigation bar, create a hero section to introduce yourself. Use Bootstrap's grid system to organize the layout.

<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. Add Professional Photo and Description

Replace "your-photo.jpg" with the file path or URL of your professional photo. Update the short description with information about yourself, including your profession, location, expertise, and interests.

Result

index.html

index.html

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 4

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 3.23

bookDesigning the Hero Section

Pyyhkäise näyttääksesi valikon

Create the Hero Section

Below the navigation bar, create a hero section to introduce yourself. Use Bootstrap's grid system to organize the layout.

<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. Add Professional Photo and Description

Replace "your-photo.jpg" with the file path or URL of your professional photo. Update the short description with information about yourself, including your profession, location, expertise, and interests.

Result

index.html

index.html

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 4
some-alt