logo

A propos de .. / L’équipe

AccueilBulmaModèles-bulmaPage secondaireA propos de .. / L’équipe

Modèles de présentation d’équipe

Code :

 <div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <h2 class="title">The Pipers</h2>
        <p class="subtitle">We are the guys that made this whole thing possible</p>
        <div class="columns">
          <div class="column is-4">
            <div class="level">
              <div class="level-item">
                <figure class="image is-128x128"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
            </div>
            <h5 class="title is-5">Richard Hendricks</h5>
            <p class="subtitle is-6">CEO</p>
            <p>When I'm not obsessively stressing about the fate of Pied Piper, I sometimes 
			give lectures to school
              kids. Spend most of my time coding.</p>
          </div>
          <div class="column is-4">
            <div class="level">
              <div class="level-item">
                <figure class="image is-128x128"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
            </div>
            <h5 class="title is-5">Dinesh Chugtai</h5>
            <p class="subtitle is-6">CTO</p>
            <p>I am the absolute best programmer at Pied Piper (especially better than Gilfoyle).
			My genius shines and guides the Pied Piper team.</p>
          </div>
          <div class="column is-4">
            <div class="level">
              <div class="level-item">
                <figure class="image is-128x128"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
            </div>
            <h5 class="title is-5">Bertram Gilfoyle</h5>
            <p class="subtitle is-6">Chief Systems Architect</p>
            <p>I work on Pied Piper only for the advanced technology. I don't really like most 
			people I work with, but
              they need me to put out their fires, so&nbsp;I&nbsp;stay. </p>
          </div>
        </div>
      </div>
    </section>
  </div>

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <h2 class="title">The Pipers</h2>
        <p class="subtitle">We are the guys that made this whole thing possible</p>
        <div class="columns is-centered is-multiline">
          <div class="column is-3">
            <div class="level">
              <div class="level-item">
                <figure class="image is-128x128"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
            </div>
            <h5 class="title is-5">Richard Hendricks</h5>
            <p class="subtitle is-6">CEO</p>
          </div>
          <div class="column is-3">
            <div class="level">
              <div class="level-item">
                <figure class="image is-128x128"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
            </div>
            <h5 class="title is-5">Jared Dunn</h5>
            <p class="subtitle is-6">COO</p>
          </div>
          <div class="column is-3">
            <div class="level">
              <div class="level-item">
                <figure class="image is-128x128"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
            </div>
            <h5 class="title is-5">Monica Hall</h5>
            <p class="subtitle is-6">CFO</p>
          </div>
          <div class="column is-3">
            <div class="level">
              <div class="level-item">
                <figure class="image is-128x128"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
            </div>
            <h5 class="title is-5">Erlich Bachman</h5>
            <p class="subtitle is-6">Marketing Manager</p>
          </div>
          <div class="column is-3">
            <div class="level">
              <div class="level-item">
                <figure class="image is-128x128"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
            </div>
            <h5 class="title is-5">Bertram Gilfoyle</h5>
            <p class="subtitle is-6">Chief Systems Architect</p>
          </div>
          <div class="column is-3">
            <div class="level">
              <div class="level-item">
                <figure class="image is-128x128"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
            </div>
            <h5 class="title is-5">Dinesh Chugtai</h5>
            <p class="subtitle is-6">Senior Programmer</p>
          </div>
          <div class="column is-3">
            <div class="level">
              <div class="level-item">
                <figure class="image is-128x128"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
            </div>
            <h5 class="title is-5">Nelson Bighetti</h5>
            <p class="subtitle is-6">Majority Investor</p>
          </div>
        </div>
      </div>
    </section>
  </div>

Code :

 <div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <h2 class="title">The Pipers</h2>
        <p class="subtitle">We are the guys that made this whole thing possible</p>
        <div class="columns is-multiline">
          <div class="column is-4">
            <div class="media">
              <div class="media-left">
                <figure class="image is-64x64"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
              <div class="media-content">
                <h4 class="title is-4">Richard Hendricks</h4>
                <p class="subtitle">CEO</p>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="media">
              <div class="media-left">
                <figure class="image is-64x64"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
              <div class="media-content">
                <h4 class="title is-4">Jared Dunn</h4>
                <p class="subtitle">COO</p>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="media">
              <div class="media-left">
                <figure class="image is-64x64"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
              <div class="media-content">
                <h4 class="title is-4">Monica Hall</h4>
                <p class="subtitle">CFO</p>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="media">
              <div class="media-left">
                <figure class="image is-64x64"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
              <div class="media-content">
                <h4 class="title is-4">Erlich Bachman</h4>
                <p class="subtitle">Marketing Manager</p>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="media">
              <div class="media-left">
                <figure class="image is-64x64"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
              <div class="media-content">
                <h4 class="title is-4">Bertram Gilfoyle</h4>
                <p class="subtitle">Chief Systems Architect</p>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="media">
              <div class="media-left">
                <figure class="image is-64x64"><img class="is-rounded"
                    src="https://bulma.dev/placeholder/pictures/bg_circle.svg?primary=00d1b2" 
					alt=""></figure>
              </div>
              <div class="media-content">
                <h4 class="title is-4">Dinesh Chugtai</h4>
                <p class="subtitle">Senior Programmer</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <h2 class="title">The Pipers</h2>
        <p class="subtitle">We are the guys that made this whole thing possible</p>
        <div class="columns">
          <div class="column is-4">
            <div class="card">
              <div class="card-image">
               <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2"
                  alt=""></div>
              <div class="card-content">
                <h5 class="title is-5">Richard Hendricks</h5>
                <h6 class="subtitle">CEO</h6>
                <p>When I'm not obsessively stressing about the fate of Pied Piper, 
				I sometimes give lectures to school
                  kids. Spend most of my time coding.</p>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="card">
              <div class="card-image">
                   <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2"
                  alt=""></div>
              <div class="card-content">
                <h5 class="title is-5">Dinesh Chugtai</h5>
                <h6 class="subtitle">CTO</h6>
                <p>I am the absolute best programmer at Pied Piper 
				(especially better than Gilfoyle). My genius shines
                  and guides the Pied Piper team.</p>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="card">
              <div class="card-image">
                <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2"
                  alt=""></div>
              <div class="card-content">
                <h5 class="title is-5">Bertram Gilfoyle</h5>
                <h6 class="subtitle">Chief Systems Architect</h6>
                <p>I work on Pied Piper only for the advanced technology. I don't 
				really like most people I work with,
                  but they need me to put out their fires, so&nbsp;I&nbsp;stay.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container">
        <div class="columns is-vcentered">
          <div class="column">
		   <img src="https://bulma.dev/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt="">
		   </div>
          <div class="column">
            <h2 class="title">Richard Hendricks</h2>
            <h4 class="subtitle">CEO</h4>
            <p>When I'm not obsessively stressing about the fate of Pied Piper, 
			I sometimes give lectures to school
              kids. Spend most of my time coding.</p>
          </div>
        </div>
        <div class="columns is-mobile is-multiline">
          <div class="column is-6-mobile is-2-tablet"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
          <div class="column is-6-mobile is-2-tablet"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
          <div class="column is-6-mobile is-2-tablet"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
          <div class="column is-6-mobile is-2-tablet"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
          <div class="column is-6-mobile is-2-tablet"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
          <div class="column is-6-mobile is-2-tablet"><a href="#"><img
            src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
			</a></div>
        </div>
      </div>
    </section>
  </div>

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container">
        <div class="columns is-vcentered">
          <div class="column">
		  <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
           </div>
          <div class="column">
            <h3 class="title is-5">The team</h3>
            <div class="columns">
              <div class="column">
		<img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
              </div>
              <div class="column">
		<img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
              </div>
              <div class="column">
		<img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
              </div>
            </div>
            <h2 class="title is-2">Richard Hendricks</h2>
            <h5 class="subtitle">CEO</h5>
            <p>When I'm not obsessively stressing about the fate of Pied Piper,
			I sometimes give lectures to school kids. Spend most of my time coding.</p>
          </div>
        </div>
      </div>
    </section>
  </div>

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container">
        <div class="columns is-vcentered">
          <div class="column">
            <h2 class="title is-spaced">The Pipers</h2>
            <p class="subtitle">We don't really like being called the Pipers, but Richard thought 
             of this name and won't
              let us change it. Anyways, we are the guys that made this whole thing possible.</p>
            <div class="buttons"><a class="button is-primary" href="#">Join our team</a></div>
          </div>
          <div class="column">
		  <img src="https://bulma.dev/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt="">
          </div>
        </div>
      </div>
    </section>
  </div>

 

Une idée ? Partagez-la !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *