Atunci cand ai date, cu siguranta vei avea si metadate, adica date despre date. Le poti rezuma foarte scurt intr-un astfel de banner. La asta m-am gandit eu.
<div class="stat1"> <div class="stat1-layer"> <div class="stat1-layer-half"> <div class="stat1-layer-half-circle"> <div class="stat1-layer-half-circle-child"> <div class="stat1-layer-half-circle-child-nephew"> <div class="stat1-layer-half-circle-child-nephew-txt"> <div class="stat1-layer-half-circle-child-nephew-txt1">INFO</div> <div class="stat1-layer-half-circle-child-nephew-txt2">GRAPHICS</div> </div> </div> </div> </div> </div> <div class="stat1-layer-half"> <div class="stat1-layer-half-info"> <div class="stat1-layer-half-info-letter">A</div> <div class="stat1-layer-half-info-txt">Text text text text text text text text text text text. Text text text text text text text text text text text.</div> </div> <div class="stat1-layer-half-info"> <div class="stat1-layer-half-info-letter">B</div> <div class="stat1-layer-half-info-txt">Text text text text text text text text text text text. Text text text text text text text text text text text.</div> </div> <div class="stat1-layer-half-info"> <div class="stat1-layer-half-info-letter">C</div> <div class="stat1-layer-half-info-txt">Text text text text text text text text text text text. Text text text text text text text text text text text.</div> </div> <div class="stat1-layer-half-info"> <div class="stat1-layer-half-info-letter">D</div> <div class="stat1-layer-half-info-txt">Text text text text text text text text text text text. Text text text text text text text text text text text.</div> </div> <div class="stat1-layer-half-info"> <div class="stat1-layer-half-info-letter">E</div> <div class="stat1-layer-half-info-txt">Text text text text text text text text text text text. Text text text text text text text text text text text.</div> </div> <div class="stat1-layer-half-info"> <div class="stat1-layer-half-info-letter">F</div> <div class="stat1-layer-half-info-txt">Text text text text text text text text text text text. Text text text text text text text text text text text.</div> </div> </div> </div> </div>
.stat1-layer,
.stat1-layer-half,
.stat1-layer-half-circle,
.stat1-layer-half-circle-child,
.stat1-layer-half-circle-child-nephew,
.stat1-layer-half-circle-child-nephew-txt,
.stat1-layer-half-info,
.stat1-layer-half-info-letter{
display: flex;
}
.stat1-layer:nth-child(1) .stat1-layer-half:nth-child(1),
.stat1-layer-half-circle,
.stat1-layer-half-circle-child,
.stat1-layer-half-circle-child-nephew,
.stat1-layer-half-info-letter{
justify-content: center;
}
.stat1-layer:nth-child(1) .stat1-layer-half:nth-child(2),
.stat1-layer-half-info{
justify-content: space-between;
}
.stat1-layer:nth-child(1) .stat1-layer-half:nth-child(1),
.stat1-layer-half-circle,
.stat1-layer-half-circle-child,
.stat1-layer-half-circle-child-nephew,
.stat1-layer-half-info,
.stat1-layer-half-info-letter{
align-items: center;
}
.stat1-layer:nth-child(1) .stat1-layer-half:nth-child(2){
flex-direction: column;
}
.stat1-layer-half-circle,
.stat1-layer-half-circle-child,
.stat1-layer-half-circle-child-nephew,
.stat1-layer-half-info-letter{
border-radius: 50%;
}
.stat1-layer-half-info,
.stat1-layer-half-circle-child{
box-shadow: inset 10px 0 5px rgba(0,0,0,0.4);
}
.stat1-layer-half-info-txt,
.stat1-layer-half-circle-child-nephew-txt1,
.stat1-layer-half-circle-child-nephew-txt2{
text-overflow: ellipsis;
}
.stat1-layer-half,
.stat1-layer-half-info-txt,
.stat1-layer-half-circle-child-nephew-txt1,
.stat1-layer-half-circle-child-nephew-txt2{
overflow: hidden;
}
.stat1-layer-half-info-txt,
.stat1-layer-half-circle-child-nephew-txt1,
.stat1-layer-half-circle-child-nephew-txt2{
font-size: 15px;
}
.stat1-layer-half-circle,
.stat1-layer-half-circle-child-nephew,
.stat1-layer-half-info-letter{
box-sizing: border-box;
}
.stat1{
width: 100%;
min-width: 100px;
max-width: 1000px;
height: 500px;
background: #c4d5d9;
overflow: auto;
margin: auto;
}
.stat1-layer{
width: calc(100% - 20px);
height: calc(100% - 20px);
padding: 10px;
}
.stat1-layer-half{
width: 50%;
height: 100%;
}
.stat1-layer:nth-child(1) .stat1-layer-half:nth-child(1){}
.stat1-layer-half-circle{
width: 250px;
height: 250px;
border: 8px solid transparent;
border-right-color: white;
border-bottom-color: white;
transform: rotate(-45deg);
}
.stat1-layer-half-circle-child{
width: calc(100% - 25px);
height: calc(100% - 25px);
background: #adc8cd;
transform: rotate(90deg);
}
.stat1-layer-half-circle-child-nephew,
.stat1-layer-half-info-letter{
border: 2px solid white;
background: linear-gradient(100deg, #cdcfd1, #ffffff);
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.stat1-layer-half-circle-child-nephew{
width: calc(100% - 20px);
height: calc(100% - 20px);
transform: rotate(-45deg);
}
.stat1-layer-half-circle-child-nephew-txt{
width: calc(100% - 4px - 10px);
border: 2px solid #6e878b;
}
.stat1-layer-half-circle-child-nephew-txt1,
.stat1-layer-half-circle-child-nephew-txt2{
padding: 5px;
text-align: center;
}
.stat1-layer-half-circle-child-nephew-txt1{
width: calc(50px - 10px);
color: #6e878b;
}
.stat1-layer-half-circle-child-nephew-txt2{
width: calc(100% - 50px - 10px);
color: white;
background: #6e878b;
}
.stat1-layer:nth-child(1) .stat1-layer-half:nth-child(2){}
.stat1-layer-half-info{
width: calc(100% - 20px - 4px);
height: 50px;
padding: 10px;
border: 2px solid #e9e9e6;
border-radius: 35px;
}
.stat1-layer-half-info:nth-child(1){
background: #8fd6e0;
}
.stat1-layer-half-info:nth-child(2){
background: #1597bb;
}
.stat1-layer-half-info:nth-child(3){
background: #11688c;
}
.stat1-layer-half-info:nth-child(4){
background: #29537a;
}
.stat1-layer-half-info:nth-child(5){
background: #29536a;
}
.stat1-layer-half-info:nth-child(6){
background: #29535a;
}
.stat1-layer-half-info-letter{
width: 50px;
height: 50px;
color: #71858b;
font-weight: bold;
font-size: 30px;
}
.stat1-layer-half-info-txt{
width: calc(100% - 50px - 20px);
height: 100%;
}
@media screen and (max-width: 640px){
.stat1-layer{
display: block;
}
.stat1-layer-half{
width: 100%;
}
}
@media screen and (min-width: 1px) and (max-width: 319px){
.stat1-layer-half-circle{
width: 120px;
height: 120px;
}
}
Foloseste aceasta interfata grafica ce simuleaza un sistem de operare. Sper ca aplicatiile din acesta sa iti fie utile.