Card by Javierrocadev
#e8e8e8
1.card { 2 width: 300px; 3 height: 325px; 4 background: #e8e8e8; 5 border-radius: 15px; 6 overflow: hidden; 7 display: flex; 8 flex-direction: column; 9 justify-content: center; 10 position: relative; 11 color: #212121; 12 border: 2px solid #ab4b38; 13 transition: all .5s ease; 14} 15 16.icons { 17 display: flex; 18 flex-direction: row; 19 gap: 5px; 20 position: absolute; 21 right: 15px; 22 top: 15px; 23 transition: opacity 0.5s ease; 24 opacity: 0; 25} 26 27.image { 28 width: 300px; 29 height: 148px; 30 background: rgb(223,235,56); 31 background: rgb(56,235,226); 32 background: linear-gradient(163deg, rgba(56,235,226,1) 0%, rgba(134,221,245,1) 50%); 33} 34 35.save { 36 background: #eb4b38; 37 color: white; 38 border: none; 39 border-radius: 5px; 40} 41 42.see-more { 43 background: #ab4b38; 44 border: none; 45 border-radius: 5px; 46 color: white; 47} 48 49.save, .see-more { 50 display: flex; 51 flex-direction: row; 52 justify-content: center; 53 gap: 5px; 54 padding: 5px; 55} 56 57.save__icon, .see-more__icon { 58 width: 15px; 59 fill: white; 60} 61 62.card__info { 63 display: flex; 64 flex-direction: column; 65 flex-grow: 1; 66 justify-content: center; 67 padding: 15px; 68 gap: 3px; 69} 70 71.page { 72 font-size: 13px; 73 font-weight: 100; 74} 75 76.title { 77 text-decoration: none; 78 font-weight: 600; 79 font-size: 17px; 80 color: black; 81} 82 83.content { 84 font-size: 14px; 85} 86 87.card:hover { 88 box-shadow: 5px 5px 10px 0px #ab4b3866; 89} 90 91.card:hover .icons { 92 z-index: 1; 93 opacity: 1; 94} 95 96.card:hover .image { 97 filter: brightness(.8); 98} 99 100.card:hover .title { 101 color: #ab4b38; 102}
709 views
709 views
MIT License