9.2K views
CSSAdd prefixes
1.card { 2 width: 190px; 3 height: 254px; 4 margin: 0 auto; 5 background-color: #F8FBFE; 6 border-radius: 8px; 7 z-index: 1; 8} 9 10.tools { 11 display: flex; 12 align-items: center; 13 padding: 9px; 14} 15 16.circle { 17 padding: 0 4px; 18} 19 20.box { 21 display: inline-block; 22 align-items: center; 23 width: 10px; 24 height: 10px; 25 padding: 1px; 26 border-radius: 50%; 27} 28 29.red { 30 background-color: #ff605c; 31} 32 33.yellow { 34 background-color: #ffbd44; 35} 36 37.green { 38 background-color: #00ca4e; 39} 40
HTML
1<div class="card"> 2 <div class="tools"> 3 <div class="circle"> 4 <span class="red box"></span> 5 </div> 6 <div class="circle"> 7 <span class="yellow box"></span> 8 </div> 9 <div class="circle"> 10 <span class="green box"></span> 11 </div> 12 </div> 13 <div class="card__content"> 14 </div> 15</div>