mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
99 lines
2.1 KiB
HTML
99 lines
2.1 KiB
HTML
<div class="card">
|
|
<div class="circles">
|
|
<div class="c"></div>
|
|
<div class="c"></div>
|
|
<div class="c"></div>
|
|
</div>
|
|
|
|
<div class="browser">
|
|
<div class="chevrons">
|
|
<svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20">
|
|
<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>
|
|
</svg>
|
|
<svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20">
|
|
<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>
|
|
</svg>
|
|
</div>
|
|
<div class="search-bar">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="7.89" height="7.887" viewBox="0 0 16.89 16.887">
|
|
<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>
|
|
</svg>
|
|
|
|
uiverse.io
|
|
<div>
|
|
</div>
|
|
|
|
</div></div></div>
|
|
<style>
|
|
/* From Uiverse.io by boryanakrasteva - Tags: card */
|
|
.card {
|
|
width: 300px;
|
|
height: 254px;
|
|
background: lightgrey;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
.circles,
|
|
.browser {
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.circles {
|
|
width: 20%;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.c {
|
|
width: 09px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
box-shadow: inset 2px 2px 5px rgba(235, 235, 235, 0.356);
|
|
}
|
|
|
|
.c:first-child {
|
|
background-color: red;
|
|
}
|
|
|
|
.c:nth-child(2) {
|
|
background-color: rgb(204, 167, 4);
|
|
}
|
|
|
|
.c:last-child {
|
|
background-color: green;
|
|
}
|
|
|
|
.browser {
|
|
width: 80%;
|
|
padding: 5px;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.chevrons {
|
|
display: flex;
|
|
}
|
|
|
|
.search-bar {
|
|
position: relative;
|
|
border: 0.5px solid black;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: rgb(88, 88, 88);
|
|
box-shadow: inset 2px 2px 2px #05050525;
|
|
}
|
|
|
|
.search-bar svg {
|
|
position: absolute;
|
|
left: 10px;
|
|
}
|
|
</style>
|