Incontra il team





Seleziona questo link:

Incontra il team

e prova a stringere e ad allargare la finestra del browser.

Codice HTML

 <div class="row">
 <div class="column">
 <div class="card">
 <img src="https://www.puntoinformaticofree.it/pagine_tutorial/avatar/donna_avatar.jpeg" alt="Sara" style="width:100%">
 <div class="container">
 <h2>Sara Forte</h2>
 <p class="title">Direttrice generale</p>
 <br>
 <p>La descrizione sulla sua figura professionale.</p>
 <br>
 <p>example@example.com</p>
 <br>
 <p><button class="button">Contact</button></p>
 </div>
 </div>
 </div>

<div class="column"> <div class="card"> <img src="https://www.puntoinformaticofree.it/pagine_tutorial/avatar/donna2_avatar.jpeg" alt="Carla" style="width:100%"> <div class="container"> <h2>Carla Bruni</h2> <p class="title">Stilista</p> <br> <p>La descrizione sulla sua figura professionale.</p> <br> <p>example@example.com</p> <br> <p><button class="button">Contact</button></p> </div> </div> </div>

<div class="column"> <div class="card"> <img src="https://www.puntoinformaticofree.it/pagine_tutorial/avatar/uomo_avatar.jpeg" alt="John" style="width:100%"> <div class="container"> <h2>Massimo Conte</h2> <p class="title">Grafico</p> <br> <p>La descrizione sulla sua figura professionale.</p> <br> <p>example@example.com</p> <br> <p><button class="button">Contact</button></p> </div> </div> </div> </div>



Codice CSS

/* Three columns side by side */
.column {
 float: left;
 width: 32%;
 margin-bottom: 16px;
 padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */ @media screen and (max-width: 650px) { .column { width: 100%; display: block; } }

/* Add some shadows to create a card effect */ .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }

/* Some left and right padding inside the container */ .container { padding: 0 16px; }

/* Clear floats */ .container::after, .row::after { content: ""; clear: both; display: table; }

.title { color: grey; }

.button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: #000; text-align: center; cursor: pointer; width: 100%; }

.button:hover { background-color: #555; }