कैसे करें - अनुभाग काउंटर
CSS के साथ "सेक्शन काउंटर" बनाने का तरीका जानें।
अनुभाग काउंटर
दिलचस्प संख्याएँ प्रदर्शित करके लोगों को यह बताने के लिए एक अनुभाग काउंटर का उपयोग किया जाता है कि उनका व्यवसाय कितना अच्छा चल रहा है:
11+
भागीदारों
55+
परियोजनाओं
100+
खुश ग्राहक
100+
बैठक
सेक्शन काउंटर कैसे बनाएं
चरण 1) HTML जोड़ें:
उदाहरण
<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>
चरण 2) सीएसएस जोड़ें:
उदाहरण
.* {
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;}