پیشنمایش زنده
کد 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>
کد CSS
.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;
}