mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
39 lines
937 B
HTML
39 lines
937 B
HTML
<div class="container">
|
|
<div class="item">SCROLL SNAP</div>
|
|
<div class="item">SCROLL SNAP</div>
|
|
<div class="item">SCROLL SNAP</div>
|
|
<div class="item">SCROLL SNAP</div>
|
|
<div class="item">SCROLL SNAP</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by joe-watson-sbf - Tags: card, scroll snap */
|
|
.container {
|
|
display: flex;
|
|
overflow: auto;
|
|
scroll-snap-type: x mandatory;
|
|
padding: 10px;
|
|
gap: 10px;
|
|
scroll-padding: 10px;
|
|
width: 190px;
|
|
height: 254px;
|
|
background-color: white;
|
|
border: 2px solid coral;
|
|
}
|
|
|
|
.container .item {
|
|
scroll-snap-align: start;
|
|
flex: 0 0 60%;
|
|
background: linear-gradient(120deg, coral 30%, rgb(255, 187, 163) 88%, rgb(255, 185, 160)
|
|
40%, coral 48%);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: bisque;
|
|
text-align: center;
|
|
font-size: 1.3rem;
|
|
line-height: 1.3em;
|
|
font-weight: 400;
|
|
font-family: sans-serif;
|
|
border-radius: .2rem;
|
|
}
|
|
</style>
|