Card by Javierrocadev
#e8e8e8
1.card { 2 width: 300px; 3 height: 350px; 4 background: #ffd166; 5 color: #073b4c; 6 font-weight: 600; 7 padding: 15px; 8 display: flex; 9 flex-direction: column; 10 align-items: left; 11 position: relative; 12 transition: all .5s ease; 13} 14 15.card::before { 16 content: "32,99$"; 17 position: absolute; 18 width: 75px; 19 height: 75px; 20 top: 35%; 21 right: 2px; 22 display: flex; 23 align-items: center; 24 justify-content: center; 25 border-radius: 50%; 26 background-color: #ef476f; 27 color: aliceblue; 28 font-weight: 800; 29 transition: all .5s ease; 30} 31 32.card__image { 33 width: initial; 34 height: 150px; 35 background: rgb(6,214,160); 36 background: linear-gradient(163deg, #06d6a0 18%, rgba(17,138,178,1) 79%); 37 transition: all .5s ease; 38} 39 40.title { 41 font-weight: 800; 42 font-size: 1.4em; 43} 44 45.card__content { 46 display: flex; 47 flex-direction: column; 48 justify-content: center; 49 flex-grow: 1; 50 gap: 10px; 51} 52 53.card:hover { 54 border-top-left-radius: 35px; 55 box-shadow: 5px 5px 0px 0px #06d6a0, 10px 10px 0px 0px #118ab2, 15px 15px 0px 0px #06d6a0, 5px 5px 15px 5px rgba(0,0,0,0); 56} 57 58.card:hover .card__image { 59 border-top-left-radius: 25px; 60} 61 62.card:hover::before { 63 transform: scale(1.3) rotate(-30deg); 64}
784 views
784 views
MIT License