Portfolio
Codice HTML
<!-- MAIN (Center website) --> <div class="main"><h1>MYLOGO.COM</h1> <hr>
<h2>PORTFOLIO</h2> <p>Allarga e stringi la finestra del browser per vedere gli effetti responsive.</p>
<!-- Portfolio Gallery Grid --> <div class="row"> <div class="column"> <div class="content"> <img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto1.jpg" alt="Ghiaccio" style="width:100%"> <h3>Titolo 1</h3> <p>Il mio testo..</p> </div> </div> <div class="column"> <div class="content"> <img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto2.jpg" alt="Cascata" style="width:100%"> <h3>Titolo 2</h3> <p>Il mio testo..</p> </div> </div> <div class="column"> <div class="content"> <img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto3.jpg" alt="Colonne" style="width:100%"> <h3>Titolo 3</h3> <p>Il mio testo..</p> </div> </div> <div class="column"> <div class="content"> <img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto4.jpg" alt="Mare" style="width:100%"> <h3>Titolo 4</h3> <p>Il mio testo..</p> </div> </div> </div>
<div class="content"> <img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto5.jpg" alt="Natura" style="width:100%"> <h3>Titolo 5</h3> <p>Il mio testo..</p> </div>
<!-- END MAIN --> </div>
Codice CSS
* { box-sizing: border-box; }body { background-color: #f1f1f1; padding: 20px; font-family: Arial; }
/* Center website */ .main { max-width: 1000px; margin: auto; }
h1 { font-size: 50px; word-break: break-all; }
h1, h2, h3 { text-align: center; }
.row { margin: 8px -16px; }
/* Add padding BETWEEN each column (if you want) */ .row, .row > .column { padding: 8px; }
/* Create four equal columns that floats next to each other */ .column { float: left; width: 25%; }
/* Clear floats after rows */ .row:after { content: ""; display: table; clear: both; }
/* Content */ .content { background-color: white; padding: 10px; }
/* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 900px) { .column { width: 50%; } }
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } }