Web Design Counter

19-Jul-2025 blackindia HTML / CSS

HTML Code:

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
:root{ 
    --white: #fff;
    --main-color: #f14431;
}
body {
background:#fff;
}
h1{ padding:0 0 30px; }
.counter{
    color: var(--main-color);
    background: var(--main-color);
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
    width: 210px;
    padding: 25px 20px;
    border-radius: 30px 30px; 
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.counter:before{
    content: "";
    background: var(--white);
    border: 2px dashed var(--main-color);
    width: 100%;
    height: calc(100% - 10px);
    border-radius: 30px 30px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); 
    position: absolute;
    top: 10px;
    left: 0;
    z-index: -1;
}
.counter .counter-icon{
    font-size: 30px;
    line-height: 30px;
    margin: 0 0 15px;
}
.counter .counter-value{
    color: var(--main-color);
    font-size: 33px;
    font-weight: 600;
}
.counter h3{
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 25px;
    text-transform: capitalize;
    margin: 0 0 10px;
}
.counter.blue{ --main-color: #2ea2cd; }
.counter.green{ --main-color: #41B280; }
.counter.magenta{ --main-color: #ce3983; }
@media screen and (max-width:990px){
    .counter{ margin-bottom: 40px; }
}

JavaScript Code:

Mobile View Tablet View Desktop View

A visual representation of web design progress, showcasing key milestones or achievements. The counter tracks the ongoing success or growth, emphasizing the expertise and impact in the field of web designing.

Web Design Counter

This post is for subscribers only

Latest posts