Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Conception de la Section Héroïque | Création d'un Site Portfolio avec Bootstrap
Essentiels de Bootstrap pour les Sites Web Modernes

bookConception de la Section Héroïque

Créer la section Héros

Sous la barre de navigation, créez une section héros 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 brève description avec des informations vous concernant, incluant votre profession, localisation, expertise et centres d'intérêt.

Résultat

index.html

index.html

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 3.23

bookConception de la Section Héroïque

Glissez pour afficher le menu

Créer la section Héros

Sous la barre de navigation, créez une section héros 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 brève description avec des informations vous concernant, incluant votre profession, localisation, expertise et centres d'intérêt.

Résultat

index.html

index.html

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 4
some-alt