Incontra il team

Seleziona questo link:

Incontra il team

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

 <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>

/* 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;
}