Card by zanina-yassine
#e8e8e8
1.card { 2 width: 400px; 3 max-width: 450px; 4 height: fit-content; 5 6 display: grid; 7 grid-template-rows: auto 4px auto; 8 9 padding-bottom: 20px; 10 11 border-radius: 11px; 12 13 background: #ffffff; 14 box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 15 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 16 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); 17 overflow: hidden; 18} 19 20.card_title { 21 display: block; 22 23 padding: 12px 15px; 24 25 color: rgb(70, 70, 76); 26 font-size: 0.875rem; 27 font-weight: 600; 28 text-align: center; 29} 30 31.loader { 32 height: 3px; 33 width: 100%; 34 35 position: relative; 36 37 background-color: #e2e4e8; 38 animation: retract 5s cubic-bezier(0.15, 0.83, 0.66, 1) 2s forwards infinite; 39} 40 41.card:has(.load-more:hover) .loader { 42 height: 2px; 43} 44 45.loader::before { 46 content: ""; 47 48 height: 100%; 49 50 position: absolute; 51 52 left: 0; 53 54 background: linear-gradient(#4480ff 0%, #115dfc 50%, #0550ed 100%); 55 animation: slide 5s cubic-bezier(0.15, 0.83, 0.66, 1) 2s forwards infinite; 56} 57 58.card_content { 59 width: 100%; 60 height: 150px; 61 62 display: flex; 63 flex-direction: column; 64 align-items: center; 65 justify-content: flex-end; 66} 67 68.load-more { 69 width: fit-content; 70 height: 36px; 71 72 display: flex; 73 flex-direction: row; 74 justify-content: center; 75 align-items: center; 76 gap: 10px; 77 78 padding: 0 15px; 79 80 border-radius: 5px; 81 border: 0; 82 83 background: linear-gradient(180deg, #4480ff 0%, #115dfc 50%, #0550ed 100%); 84 font-style: normal; 85 font-weight: 600; 86 font-size: 12px; 87 line-height: 15px; 88 color: #ffffff; 89 90 box-shadow: 0px 0.5px 0.5px #efefef, 0px 1px 0.5px rgba(239, 239, 239, 0.5); 91 transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1); 92 cursor: pointer; 93} 94 95.load-more:hover { 96 transform: translateY(-1px); 97 box-shadow: 0 10px 20px 0#054eed6b; 98} 99 100@keyframes slide { 101 0% { 102 width: 0%; 103 } 104 30% { 105 width: 20%; 106 } 107 50% { 108 width: 30%; 109 } 110 70% { 111 width: 80%; 112 } 113 90% { 114 width: 100%; 115 opacity: 1; 116 } 117 100% { 118 opacity: 0; 119 } 120} 121 122@keyframes retract { 123 0% { 124 height: 3px; 125 } 126 95% { 127 height: 3px; 128 } 129 100% { 130 height: 1px; 131 } 132} 133
238 views
238 views
MIT License