Contenuti del Corso
Bootstrap Essentials for Modern Websites
Bootstrap Essentials for Modern Websites
5. Creating a Portfolio Website with Bootstrap
Designing 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
Tutto è chiaro?
Grazie per i tuoi commenti!
Sezione 5. Capitolo 4