Card by SouravBandyopadhyay
#e8e8e8
1.card-title { 2 color: #262626; 3 font-size: 1.5em; 4 line-height: normal; 5 font-weight: 700; 6 margin-bottom: 0.5em; 7} 8 9.small-desc { 10 font-size: 1em; 11 font-weight: 400; 12 line-height: 1.5em; 13 color: #452c2c; 14} 15 16.small-desc { 17 font-size: 1em; 18} 19 20.go-corner { 21 display: flex; 22 align-items: center; 23 justify-content: center; 24 position: absolute; 25 width: 2em; 26 height: 2em; 27 overflow: hidden; 28 top: 0; 29 right: 0; 30 background: linear-gradient(135deg, #6293c8, #384c6c); 31 border-radius: 0 4px 0 32px; 32} 33 34.go-arrow { 35 margin-top: -4px; 36 margin-right: -4px; 37 color: white; 38 font-family: courier, sans; 39} 40 41.card { 42 display: block; 43 position: relative; 44 max-width: 300px; 45 max-height: 320px; 46 background-color: #f2f8f9; 47 border-radius: 10px; 48 padding: 2em 1.2em; 49 margin: 12px; 50 text-decoration: none; 51 z-index: 0; 52 overflow: hidden; 53 background: linear-gradient(to bottom, #c3e6ec, #a7d1d9); 54 font-family: Arial, Helvetica, sans-serif; 55} 56 57.card:before { 58 content: ''; 59 position: absolute; 60 z-index: -1; 61 top: -16px; 62 right: -16px; 63 background: linear-gradient(135deg, #364a60, #384c6c); 64 height: 32px; 65 width: 32px; 66 border-radius: 32px; 67 transform: scale(1); 68 transform-origin: 50% 50%; 69 transition: transform 0.35s ease-out; 70} 71 72.card:hover:before { 73 transform: scale(28); 74} 75 76.card:hover .small-desc { 77 transition: all 0.5s ease-out; 78 color: rgba(255, 255, 255, 0.8); 79} 80 81.card:hover .card-title { 82 transition: all 0.5s ease-out; 83 color: #ffffff; 84} 85
7.6K views
7.6K views
MIT License