Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Progettazione della Sezione Hero | Creazione di un Sito Portfolio con Bootstrap
Fondamenti di Bootstrap per Siti Web Moderni

bookProgettazione della Sezione Hero

Crea la sezione Hero

Sotto la barra di navigazione, crea una sezione hero per presentarti. Utilizza il sistema a griglia di Bootstrap per organizzare il 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. Aggiungi foto professionale e descrizione

Sostituisci "your-photo.jpg" con il percorso del file o l'URL della tua foto professionale. Aggiorna la breve descrizione con informazioni su di te, inclusi professione, località, competenze e interessi.

Risultato

index.html

index.html

copy
Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 4

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 3.23

bookProgettazione della Sezione Hero

Scorri per mostrare il menu

Crea la sezione Hero

Sotto la barra di navigazione, crea una sezione hero per presentarti. Utilizza il sistema a griglia di Bootstrap per organizzare il 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. Aggiungi foto professionale e descrizione

Sostituisci "your-photo.jpg" con il percorso del file o l'URL della tua foto professionale. Aggiorna la breve descrizione con informazioni su di te, inclusi professione, località, competenze e interessi.

Risultato

index.html

index.html

copy
Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 4
some-alt