#e8e8e8
1.container { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5} 6 7.card_box { 8 width: 200px; 9 height: 250px; 10 border-radius: 20px; 11 background: linear-gradient(170deg, rgba(58, 56, 56, 0.623) 0%, rgb(31, 31, 31) 100%); 12 position: relative; 13 box-shadow: 0 25px 50px rgba(0,0,0,0.55); 14 cursor: pointer; 15 transition: all .3s; 16} 17 18.card_box:hover { 19 transform: scale(0.9); 20} 21 22.card_box span { 23 position: absolute; 24 overflow: hidden; 25 width: 150px; 26 height: 150px; 27 top: -10px; 28 left: -10px; 29 display: flex; 30 align-items: center; 31 justify-content: center; 32} 33 34.card_box span::before { 35 content: 'Premium'; 36 position: absolute; 37 width: 150%; 38 height: 40px; 39 background-image: linear-gradient(45deg, #ff6547 0%, #ffb144 51%, #ff7053 100%); 40 transform: rotate(-45deg) translateY(-20px); 41 display: flex; 42 align-items: center; 43 justify-content: center; 44 color: #fff; 45 font-weight: 600; 46 letter-spacing: 0.1em; 47 text-transform: uppercase; 48 box-shadow: 0 5px 10px rgba(0,0,0,0.23); 49} 50 51.card_box span::after { 52 content: ''; 53 position: absolute; 54 width: 10px; 55 bottom: 0; 56 left: 0; 57 height: 10px; 58 z-index: -1; 59 box-shadow: 140px -140px #cc3f47; 60 background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%); 61}
12K views
12K views
Comments
MIT License