Contenu du cours
Essentiels de Bootstrap pour les Sites Web Modernes
Essentiels de Bootstrap pour les Sites Web Modernes
2. Configuration de l'Environnement
4. Concepts Avancés
Concevoir la Section Héro
Créez la section Hero
Sous la barre de navigation, créez une section hero pour vous présenter. Utilisez le système de grille de Bootstrap pour organiser la mise en page.
<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. Ajouter une Photo Professionnelle et une Description
Remplacez "your-photo.jpg"
par le chemin du fichier ou l'URL de votre photo professionnelle. Mettez à jour la courte description avec des informations vous concernant, y compris votre profession, votre localisation, votre expertise et vos intérêts.
Résultat
index.html
Tout était clair ?
Merci pour vos commentaires !
Section 5. Chapitre 4