1.6K views
CSSAdd prefixes
1.card { 2 width: 300px; 3 height: 254px; 4 background: lightgrey; 5 overflow: hidden; 6 display: flex; 7} 8 9.circles, 10.browser { 11 height: 30px; 12 display: flex; 13 align-items: center; 14} 15 16.circles { 17 width: 20%; 18 gap: 8px; 19 padding: 10px; 20} 21 22.c { 23 width: 09px; 24 height: 9px; 25 border-radius: 50%; 26 box-shadow: inset 2px 2px 5px rgba(235, 235, 235, 0.356); 27} 28 29.c:first-child { 30 background-color: red; 31} 32 33.c:nth-child(2) { 34 background-color: rgb(204, 167, 4); 35} 36 37.c:last-child { 38 background-color: green; 39} 40 41.browser { 42 width: 80%; 43 padding: 5px; 44 display: flex; 45 gap: 10px; 46} 47 48.chevrons { 49 display: flex; 50} 51 52.search-bar { 53 position: relative; 54 border: 0.5px solid black; 55 border-radius: 5px; 56 padding: 5px; 57 width: 100%; 58 height: 100%; 59 display: flex; 60 align-items: center; 61 justify-content: center; 62 font-size: 10px; 63 color: rgb(88, 88, 88); 64 box-shadow: inset 2px 2px 2px #05050525; 65} 66 67.search-bar svg { 68 position: absolute; 69 left: 10px; 70}
HTML
1<div class="card"> 2 <div class="circles"> 3 <div class="c"></div> 4 <div class="c"></div> 5 <div class="c"></div> 6 </div> 7 8 <div class="browser"> 9 <div class="chevrons"> 10 <svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20"> 11 <path transform="translate(6.25 3.75)" d="M0,6.25,6.25,0l.875.875L1.75,6.25l5.375,5.375L6.25,12.5Z" id="Fill"></path> 12 </svg> 13 <svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20"> 14 <path transform="translate(6.625 3.75)" d="M7.125,6.25.875,12.5,0,11.625,5.375,6.25,0,.875.875,0Z" id="Fill"></path> 15 </svg> 16 </div> 17 <div class="search-bar"> 18 <svg xmlns="http://www.w3.org/2000/svg" width="7.89" height="7.887" viewBox="0 0 16.89 16.887"> 19 <path id="Fill" d="M16.006,16.887h0l-4.743-4.718a6.875,6.875,0,1,1,.906-.906l4.719,4.744-.88.88ZM6.887,1.262a5.625,5.625,0,1,0,5.625,5.625A5.631,5.631,0,0,0,6.887,1.262Z" transform="translate(0.003 0)"></path> 20</svg> 21 22 uiverse.io 23 <div> 24 </div> 25 26</div></div></div>