Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda 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
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 4

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 3.23

bookDesigning the Hero Section

Deslize para mostrar o menu

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
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 4
some-alt