Portfolio

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

* {
 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%;
 }
}