Come fare per - Contatore di sezione
Scopri come creare un "contatore di sezioni" con CSS.
Contatore di sezione
Un contatore di sezioni viene utilizzato per dire alle persone come sta andando bene la loro attività, visualizzando numeri interessanti:
11+
Partner
55+
Progetti
100+
Clienti felici
100+
Riunioni
Come creare un contatore di sezione
Passaggio 1) Aggiungi HTML:
Esempio
<div class="row">
<div class="column">
<div
class="card">
<p><i class="fa fa-user"></i></p>
<h3>11+</h3>
<p>Partners</p>
</div>
</div>
<div class="column">
<div class="card">
<p><i class="fa fa-check"></i></p>
<h3>55+</h3>
<p>Projects</p>
</div>
</div>
<div class="column">
<div class="card">
<p><i class="fa fa-smile-o"></i></p>
<h3>100+</h3>
<p>Happy Clients</p>
</div>
</div>
<div class="column">
<div class="card">
<p><i class="fa fa-coffee"></i></p>
<h3>100+</h3>
<p>Meetings</p>
</div>
</div>
</div>
Passaggio 2) Aggiungi CSS:
Esempio
.* {
box-sizing: border-box;
}
/* Float four columns side by side
*/
.column {
float: left;
width: 25%;
padding: 0
5px;
}
.row
{margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 10px;
}
}
/* Style the
counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0,
0.2);
padding: 16px;
text-align: center;
background-color: #444;
color: white;
}
.fa {font-size:50px;}