Card by eduardo-amaro-maciel
#e8e8e8
1.scroll-1::-webkit-scrollbar { 2 width: 8px; 3 height: 8px; 4} 5 6.scroll-1::-webkit-scrollbar-thumb { 7 border-radius: 20px; 8 background: #888; 9} 10 11.container * { 12 box-sizing: border-box; 13 padding: 0; 14 margin: 0; 15 color: #fff; 16} 17 18.container { 19 display: flex; 20 overflow-x: scroll; 21 padding: 24px; 22 width: 300px; 23 scroll-snap-type: x mandatory; 24 scroll-padding-top: 24px; 25 border-radius: 8px; 26 gap: 20px; 27} 28 29.container .card { 30 flex: 0 0 100%; 31 overflow: hidden; 32 border-radius: 8px; 33 background-color: #141414; 34 scroll-snap-align: start; 35} 36 37.card .card__image { 38 flex: 1; 39 height: 140px; 40} 41 42.card:nth-child(1) .card__image { 43 background-image: linear-gradient( 44 to right top, 45 #051937, 46 #004d7a, 47 #008793, 48 #00bf72, 49 #a8eb12 50 ); 51} 52 53.card:nth-child(2) .card__image { 54 background-image: linear-gradient( 55 to right top, 56 #dc09a5, 57 #ce00b4, 58 #ba00c5, 59 #9c00d8, 60 #6f12eb 61 ); 62} 63 64.card:nth-child(3) .card__image { 65 background-image: linear-gradient( 66 to right top, 67 #dc1009, 68 #e55f00, 69 #e49200, 70 #dac000, 71 #c7eb12 72 ); 73} 74 75.card .card__content { 76 display: flex; 77 flex-direction: column; 78 gap: 10px; 79 padding: 20px; 80} 81 82.card .card__content .card__title { 83 font-size: 32px; 84 color: #fff; 85 text-transform: capitalize; 86} 87 88.card .card__content .card__describe { 89 color: #fff; 90 font-size: 16px; 91}
4.4K views
4.4K views
MIT License