mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
146 lines
No EOL
3 KiB
HTML
146 lines
No EOL
3 KiB
HTML
<div class="card">
|
|
<div data-position="top" class="carousel">
|
|
<span class="carousel__text"
|
|
>• card component • card component • card component • card component •
|
|
card component • card component</span
|
|
>
|
|
</div>
|
|
<div class="image">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<span class="title">Highlight Curation</span>
|
|
<p class="paragraph">
|
|
Works autonomously through artificial intelligent and hundred of
|
|
micro-services
|
|
</p>
|
|
<div data-direction="right" data-position="bottom" class="carousel">
|
|
<span class="carousel__text"
|
|
>• card component • card component • card component • card component •
|
|
card component • card component</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by MuhammadHasann - Tags: animation, card, rounded */
|
|
.card {
|
|
--lime-500: #bdd910;
|
|
--violet-700: #8a07b8;
|
|
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
|
|
padding: 1rem;
|
|
width: 14rem;
|
|
height: auto;
|
|
min-height: 16rem;
|
|
background-color: var(--lime-500);
|
|
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 7rem;
|
|
right: 2rem;
|
|
|
|
width: 1.25rem;
|
|
aspect-ratio: 1 / 1;
|
|
background-color: var(--violet-700);
|
|
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.card::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 8.75rem;
|
|
right: -0.5rem;
|
|
|
|
width: 3rem;
|
|
aspect-ratio: 1 / 1;
|
|
background-color: var(--violet-700);
|
|
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.card .carousel {
|
|
position: absolute;
|
|
left: 0;
|
|
|
|
animation: carousel 10s linear var(--carousel_direction, normal) infinite;
|
|
}
|
|
|
|
.card .carousel[data-direction="right"] {
|
|
--carousel_direction: reverse;
|
|
}
|
|
.card .carousel[data-position="top"] {
|
|
top: 0.75rem;
|
|
}
|
|
.card .carousel[data-position="bottom"] {
|
|
bottom: 0.75rem;
|
|
}
|
|
|
|
.card .carousel .carousel__text {
|
|
font-size: 0.75rem;
|
|
color: black;
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
@keyframes carousel {
|
|
to {
|
|
transform: translate(-50%);
|
|
}
|
|
}
|
|
|
|
.card .image {
|
|
position: relative;
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
padding: 0.25rem;
|
|
margin-bottom: 0.5rem;
|
|
width: fit-content;
|
|
aspect-ratio: 1 / 1;
|
|
background-color: black;
|
|
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.card .image svg {
|
|
width: 1.5rem;
|
|
fill: white;
|
|
}
|
|
|
|
.card .title {
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
font-size: 1rem;
|
|
color: black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card .paragraph {
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
padding-right: 0.25rem;
|
|
|
|
font-size: 0.75rem;
|
|
color: black;
|
|
}
|
|
|
|
</style>
|
|
|