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="http://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="http://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="http://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="http://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="http://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%; } }