M-am gandit ca este nevoie de un banner prin care sa se specifice pasi efectuati pentru dezvoltarea a ceva anume. Asa ca am creat acest banner cu aceasta idee in minte.
<div class="stat"> <div class="stat-layer"> <div class="stat-layer-leftside"> <div class="stat-layer-circle-area"> <div class="stat-layer-circle"> <div class="stat-layer-circle-inside"> <span>WEB DEVELOPMENT</span> </div> </div> </div> <div class="stat-dot stat-dot1"></div> <div class="stat-dot stat-dot2"></div> <div class="stat-dot stat-dot3"></div> <div class="stat-dot stat-dot4"></div> <div class="stat-dot stat-dot5"></div> <div class="stat-dot stat-dot6"></div> </div> <div class="stat-layer-rightside"> <div class="stat-layer-box"> <div class="stat-layer-box-shape"> <div>01</div> </div> <div class="stat-layer-box-txt">HTML</div> </div> <div class="stat-layer-box"> <div class="stat-layer-box-shape"> <div>02</div> </div> <div class="stat-layer-box-txt">CSS</div> </div> <div class="stat-layer-box"> <div class="stat-layer-box-shape"> <div>03</div> </div> <div class="stat-layer-box-txt">JavaScript</div> </div> <div class="stat-layer-box"> <div class="stat-layer-box-shape"> <div>04</div> </div> <div class="stat-layer-box-txt">PHP</div> </div> <div class="stat-layer-box"> <div class="stat-layer-box-shape"> <div>05</div> </div> <div class="stat-layer-box-txt">MySQL</div> </div> <div class="stat-layer-box"> <div class="stat-layer-box-shape"> <div>06</div> </div> <div class="stat-layer-box-txt">Design Patterns</div> </div> </div> </div> </div>
.stat-layer,
.stat-layer-circle-area,
.stat-layer-circle,
.stat-layer-leftside,
.stat-layer-rightside,
.stat-layer-box,
.stat-layer-box-txt{
display: flex;
}
.stat-layer-leftside,
.stat-layer-circle-area,
.stat-layer-circle,
.stat-layer-box-txt{
justify-content: center;
}
.stat-layer-leftside,
.stat-layer-circle-area,
.stat-layer-circle,
.stat-layer-box-txt{
align-items: center;
}
.stat-layer-leftside,
.stat-layer-box,
.stat-layer-box-shape{
position: relative;
}
.stat-layer-box:before,
.stat-layer-box:after,
.stat-layer-box-shape:before,
.stat-layer-box-shape:after,
.stat-dot{
position: absolute;
}
.stat-layer-box:before,
.stat-layer-box:after,
.stat-layer-box-shape:before,
.stat-layer-box-shape:after{
content: "";
}
.stat{
width: 100%;
min-width: 100px;
max-width: 1000px;
height: 100%;
min-height: 300px;
max-height: 500px;
background: #798a9c;
margin: auto;
overflow: auto;
transition: all 1s;
animation: stat 30s infinite alternate;
}
@keyframes stat{
0%{
filter: none;
}
25%{
filter: hue-rotate(200deg);
}
50%{
filter: sepia(1);
}
100%{
filter: none;
}
}
.stat:hover{
animation: none;
filter: invert(1);
}
.stat-layer{
width: calc(300px * 2);
height: calc(100% - 40px);
padding: 20px;
margin: auto;
}
.stat-layer-leftside,
.stat-layer-rightside{
width: 300px;
}
.stat-layer-leftside{}
.stat-layer-circle-area{
width: 250px;
height: 250px;
border: 15px solid #576978;
border-left-color: transparent;
border-bottom-color: transparent;
border-radius: 50%;
transform: rotate(45deg);
}
.stat-layer-circle{
width: 200px;
height: 200px;
border: 2px solid white;
border-radius: 50%;
background: linear-gradient(#d7dbe4, #fff);
transform: rotate(-45deg);
}
.stat-layer-box-txt,
.stat-layer-circle-inside{
color: #22262a;
font-weight: bold;
font-size: 16px;
}
.stat-layer-circle-inside{}
.stat-dot{
width: 7px;
height: 7px;
background: white;
border-radius: 50%;
border-width: 2px;
border-style: solid;
z-index: 1;
}
.stat-dot1{
border-color: #ee002c;
top: 93px;
left: 163px;
}
.stat-dot2{
border-color: #f7cd03;
top: 132px;
left: 240px;
}
.stat-dot3{
border-color: #f7cd03;
top: 184px;
left: 271px;
}
.stat-dot4{
border-color: #01dbb1;
top: 265px;
left: 271px;
}
.stat-dot5{
border-color: #07dfff;
top: 317px;
left: 240px;
}
.stat-dot6{
border-color: #0178fa;
top: 356px;
left: 162px;
}
.stat-layer-rightside{
flex-direction: column;
}
.stat-layer-box{
width: 230px;
height: 40px;
padding: 5px;
background: white;
margin-bottom: 32px;
align-self: flex-end;
}
.stat-layer-box:last-of-type{
margin-bottom: 0;
}
.stat-layer-box:before,
.stat-layer-box:after{
height: 6px;
}
.stat-layer-box:before{
top: calc(50% - 3px);
}
.stat-layer-box:nth-child(1):before,
.stat-layer-box:nth-child(1):after{
background: #ee002c;
}
.stat-layer-box:nth-child(2):before,
.stat-layer-box:nth-child(2):after{
background: #f7cd03;
}
.stat-layer-box:nth-child(3):before,
.stat-layer-box:nth-child(3):after{
background: #f7cd03;
}
.stat-layer-box:nth-child(4):before,
.stat-layer-box:nth-child(4):after{
background: #01dbb1;
}
.stat-layer-box:nth-child(5):before,
.stat-layer-box:nth-child(5):after{
background: #07dfff;
}
.stat-layer-box:nth-child(6):before,
.stat-layer-box:nth-child(6):after{
background: #0178fa;
}
.stat-layer-box:nth-child(1):before{
width: 120px;
left: -120px;
}
.stat-layer-box:nth-child(1):after{
width: 105px;
left: -208px;
top: 59px;
transform: rotate(-45deg);
}
.stat-layer-box:nth-child(2):before{
width: 85px;
left: -85px;
}
.stat-layer-box:nth-child(2):after{
width: 45px;
left: -121px;
top: 37px;
transform: rotate(-45deg);
}
.stat-layer-box:nth-child(3):before{
width: 85px;
left: -85px;
}
.stat-layer-box:nth-child(4):before{
width: 85px;
left: -85px;
}
.stat-layer-box:nth-child(5):before{
width: 85px;
left: -85px;
}
.stat-layer-box:nth-child(5):after{
width: 45px;
left: -121px;
top: 7px;
transform: rotate(45deg);
}
.stat-layer-box:nth-child(6):before{
width: 120px;
left: -120px;
}
.stat-layer-box:nth-child(6):after{
width: 105px;
left: -208px;
top: -14px;
transform: rotate(45deg);
}
.stat-layer-box-shape{
width: 0;
font-size: 18px;
font-weight: bold;
color: black;
margin: -10px 0 0 -5px;
border: 25px solid transparent;
}
.stat-layer-box:nth-child(1) .stat-layer-box-shape{
border-top-color: #ee002c;
border-left-color: #ee002c;
}
.stat-layer-box:nth-child(2) .stat-layer-box-shape{
border-top-color: #f66b00;
border-left-color: #f66b00;
}
.stat-layer-box:nth-child(3) .stat-layer-box-shape{
border-top-color: #f7cd03;
border-left-color: #f7cd03;
}
.stat-layer-box:nth-child(4) .stat-layer-box-shape{
border-top-color: #01dbb1;
border-left-color: #01dbb1;
}
.stat-layer-box:nth-child(5) .stat-layer-box-shape{
border-top-color: #07dfff;
border-left-color: #07dfff;
}
.stat-layer-box:nth-child(6) .stat-layer-box-shape{
border-top-color: #0178fa;
border-left-color: #0178fa;
}
.stat-layer-box-shape:before,
.stat-layer-box-shape:after{
width: 15px;
height: 15px;
}
.stat-layer-box-shape:before{
background: #798a9c;
transform: rotate(-45deg);
top: -38px;
left: 13px;
}
.stat-layer-box-shape:after{
background: white;
bottom: -30px;
left: -25px;
}
.stat-layer-box-shape > div{
margin: -20px 0 0 -18px;
color: black;
}
.stat-layer-box-txt{
width: calc(100% - 50px);
}