Projetando a Seção Hero
Criar a Seção Hero
Abaixo da barra de navegação, crie uma seção hero para se apresentar. Utilize o sistema de grid do Bootstrap para organizar o 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. Adicionar Foto Profissional e Descrição
Substitua "your-photo.jpg" pelo caminho do arquivo ou URL da sua foto profissional. Atualize a breve descrição com informações sobre você, incluindo profissão, localização, especialidade e interesses.
Resultado
index.html
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you help me write a short description for my hero section?
What are some tips for choosing a professional photo for my portfolio?
How can I customize the layout of the hero section using Bootstrap?
Awesome!
Completion rate improved to 3.23Projetando a Seção Hero
Deslize para mostrar o menu
Criar a Seção Hero
Abaixo da barra de navegação, crie uma seção hero para se apresentar. Utilize o sistema de grid do Bootstrap para organizar o 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. Adicionar Foto Profissional e Descrição
Substitua "your-photo.jpg" pelo caminho do arquivo ou URL da sua foto profissional. Atualize a breve descrição com informações sobre você, incluindo profissão, localização, especialidade e interesses.
Resultado
index.html
Obrigado pelo seu feedback!
