Modèles de présentation d’équipe
1°
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 I stay. </p>
</div>
</div>
</div>
</section>
</div>
2°
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>
3°
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>
4°
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 I stay.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
5°
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>
6°
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>
7°
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>