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
Practice
Projects
Quizzes & Challenges
Quiz
Challenges
/
Fondamenti di Bootstrap

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

Chieda ad AI

expand

Chieda ad AI

ChatGPT

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

Sezione 5. Capitolo 4
some-alt