Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Diseño de la Sección Principal | Creación de un Sitio Web de Portafolio con Bootstrap
Esenciales de Bootstrap para Sitios Web Modernos

bookDiseño de la Sección Principal

Crear la sección principal

Debajo de la barra de navegación, crea una sección principal para presentarte. Utiliza el sistema de cuadrícula de Bootstrap para organizar el diseño.

<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. Añadir foto profesional y descripción

Reemplaza "your-photo.jpg" con la ruta del archivo o la URL de tu foto profesional. Actualiza la breve descripción con información sobre ti, incluyendo tu profesión, ubicación, especialidad e intereses.

Resultado

index.html

index.html

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 4

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 3.23

bookDiseño de la Sección Principal

Desliza para mostrar el menú

Crear la sección principal

Debajo de la barra de navegación, crea una sección principal para presentarte. Utiliza el sistema de cuadrícula de Bootstrap para organizar el diseño.

<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. Añadir foto profesional y descripción

Reemplaza "your-photo.jpg" con la ruta del archivo o la URL de tu foto profesional. Actualiza la breve descripción con información sobre ti, incluyendo tu profesión, ubicación, especialidad e intereses.

Resultado

index.html

index.html

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 4
some-alt