Card by Javierrocadev
#e8e8e8
1.card { 2 width: 300px; 3 height: 300px; 4 background: #003566; 5 color: white; 6 position: relative; 7 display: flex; 8 flex-direction: column; 9 justify-content: center; 10 box-sizing: border-box; 11 border: 2px solid #001d3d; 12} 13 14.card::before { 15 content: "10%"; 16 position: absolute; 17 width: 100px; 18 height: 60px; 19 display: flex; 20 justify-content: center; 21 align-items: center; 22 top: -20px; 23 left: -20px; 24 background-color: red; 25 color: white; 26 font-weight: 900; 27 font-size: 2em; 28 clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); 29 transform: rotate(40deg); 30} 31 32.card__content { 33 display: flex; 34 flex-direction: column; 35 justify-content: center; 36 align-items: center; 37 flex-grow: 1; 38 text-align: center; 39} 40 41.card__content span { 42 font-size: 1.5em; 43 font-weight: 900; 44} 45 46.cart { 47 display: flex; 48 flex-direction: row; 49 justify-content: center; 50 align-items: center; 51 gap: 5px; 52 padding: 10px 0px; 53 border: none; 54 background: #ffd60a; 55 color: #003566; 56 font-weight: 800; 57 transition: all .5s ease; 58 cursor: pointer; 59} 60 61.svg-icon { 62 fill: #ffd60a; 63 transition: all .7s ease; 64} 65 66.cart .svg-icon { 67 fill: blue; 68 width: 15px; 69} 70 71.cart:hover { 72 background: white; 73 color: black; 74} 75 76.card:hover .card__content svg { 77 transform: scale(1.5) rotate(-25deg); 78} 79
543 views
543 views
MIT License