Card by imtausef
#212121
1.card { 2 width: 300px; 3 height: 254px; 4 background: #141414; 5 overflow: hidden; 6 display: flex; 7 border-radius: 7px; 8} 9 10.circles, 11.browser { 12 height: 30px; 13 display: flex; 14 align-items: center; 15 border-bottom: 1px solid rgb(255 239 255 / 15%); 16} 17 18.circles { 19 width: 20%; 20 gap: 8px; 21 padding: 10px; 22} 23 24.c { 25 width: 09px; 26 height: 9px; 27 border-radius: 50%; 28 box-shadow: inset 2px 2px 5px #ffffff25; 29} 30 31.c:first-child { 32 background-color: red; 33} 34 35.c:nth-child(2) { 36 background-color: rgb(204, 167, 4); 37} 38 39.c:last-child { 40 background-color: green; 41} 42 43.browser { 44 width: 80%; 45 padding: 5px; 46 display: flex; 47 gap: 10px; 48} 49 50.chevrons { 51 display: flex; 52} 53 54.search-bar { 55 position: relative; 56 border: 0.5px solid #fff; 57 border-radius: 5px; 58 padding: 5px; 59 width: 100%; 60 height: 100%; 61 display: flex; 62 align-items: center; 63 justify-content: center; 64 font-size: 10px; 65 color: rgb(204, 204, 204); 66 box-shadow: inset 2px 2px 2px #ffffff25; 67} 68 69.search-bar svg { 70 position: absolute; 71 left: 10px; 72} 73
120 views
Variation of acard
Original Post
Variations
2 MIT License