HTML & CSS / Counter / Counter4
Couters
-
STEPS
1. html
77Web Designing
73Web Development
2. css
.counter{ color: #628900; background: linear-gradient(to bottom, #628900 49%, transparent 50%); font-family: 'Poppins', sans-serif; text-align: center; width: 200px; height: 200px; padding: 25px 15px 35px; margin: 0 auto; border: 18px solid #628900; border-radius: 100% 100%; box-shadow: inset 0 8px 10px rgba(0, 0, 0, 0.3); } .counter .counter-value{ color: #fff; font-size: 35px; font-weight: 600; display: block; margin: 0 0 25px; } .counter h3{ font-size: 16px; font-weight: 600; text-transform: uppercase; margin-top: 90px; border:1px solid red; } .counter.red{ color: #e3213c; background: linear-gradient(to bottom, #e3213c 49%, transparent 50%); border-color: #e3213c; } .counter.orange{ color: #fb8603; background: linear-gradient(to bottom, #fb8603 49%, transparent 50%); border-color: #fb8603; } .counter.blue{ color: #1f8bc1; background: linear-gradient(to bottom, #1f8bc1 49%, transparent 50%); border-color: #1f8bc1; } @media screen and (max-width:990px) { .counter{ margin-bottom: 40px; } } 3. script