Incontra il team
Seleziona questo link:
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; }