mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
98 lines
3.4 KiB
HTML
98 lines
3.4 KiB
HTML
<div class="card">
|
|
<div class="item item--1">
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path fill="rgba(149,149,255,1)" d="M17 15.245v6.872a.5.5 0 0 1-.757.429L12 20l-4.243 2.546a.5.5 0 0 1-.757-.43v-6.87a8 8 0 1 1 10 0zm-8 1.173v3.05l3-1.8 3 1.8v-3.05A7.978 7.978 0 0 1 12 17a7.978 7.978 0 0 1-3-.582zM12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"></path></svg>
|
|
<span class="quantity"> 90+ </span>
|
|
<span class="text text--1"> Icons </span>
|
|
</div>
|
|
<div class="item item--2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0L24 0 24 24 0 24z"></path><path d="M16 16c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zM6 12c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zm10 6c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1zM6 14c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm8.5-12C17.538 2 20 4.462 20 7.5S17.538 13 14.5 13 9 10.538 9 7.5 11.462 2 14.5 2zm0 2C12.567 4 11 5.567 11 7.5s1.567 3.5 3.5 3.5S18 9.433 18 7.5 16.433 4 14.5 4z" fill="rgba(252,161,71,1)"></path></svg> <span class="quantity"> 70+ </span>
|
|
<span class="text text--2"> Illustrations </span>
|
|
</div>
|
|
<div class="item item--3">
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path fill="rgba(66,193,110,1)" d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z"></path></svg>
|
|
<span class="quantity"> 150+ </span>
|
|
<span class="text text--3"> Components </span>
|
|
</div>
|
|
<div class="item item--4">
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path fill="rgba(220,91,183,1)" d="M12 20h8v2h-8C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10a9.956 9.956 0 0 1-2 6h-2.708A8 8 0 1 0 12 20zm0-10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>
|
|
<span class="quantity"> 30+ </span>
|
|
<span class="text text--4"> Animations </span>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by alexmaracinaru - Tags: card */
|
|
.card {
|
|
width: 190px;
|
|
height: 254px;
|
|
color: white;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 5px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.card .item {
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.item:hover {
|
|
transform: scale(0.95);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.item svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.item--1 {
|
|
background: #c7c7ff;
|
|
}
|
|
|
|
.item--2 {
|
|
background: #ffd8be;
|
|
}
|
|
|
|
.item--3 {
|
|
background: #a9ecbf;
|
|
}
|
|
|
|
.item--4 {
|
|
background: #f3bbe1;
|
|
}
|
|
|
|
.quantity {
|
|
font-size: 25px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.text {
|
|
font-size: 12px;
|
|
font-family: inherit;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.text--1 {
|
|
color: rgba(149,149,255,1);
|
|
}
|
|
|
|
.text--2 {
|
|
color: rgba(252,161,71,1);
|
|
}
|
|
|
|
.text--3 {
|
|
color: rgba(66,193,110,1);
|
|
}
|
|
|
|
.text--4 {
|
|
color: rgba(220,91,183,1);
|
|
}
|
|
</style>
|