Card by Javierrocadev
#e8e8e8
1.card { 2 width: 370px; 3 height: 270px; 4 background: linear-gradient(120deg, rgba(255,237,57,1) 0%, rgba(247,253,45,1) 100%); 5 ; 6 position: relative; 7 display: flex; 8 justify-content: center; 9 padding: 20px; 10 border-radius: 15px; 11 transition: all 0.5s ease; 12} 13 14.card::before { 15 content: 'Dart'; 16 position: absolute; 17 width: 0px; 18 height: 60px; 19 border-left: 30px solid #3A486F; 20 border-right: 30px solid #3A486F; 21 border-bottom: 10px solid transparent; 22 top: -10px; 23 left: 10px; 24 display: flex; 25 align-items: center; 26 justify-content: center; 27 color: #fff; 28 font-size: 8px; 29 text-transform: uppercase; 30 transition: all 0.5s ease; 31} 32 33.svg-icon { 34 width: 5em; 35 height: 5em; 36 fill: #3A486F; 37} 38 39.svgContainer { 40 height: 100px; 41 width: 100px; 42 position: absolute; 43 display: flex; 44 align-items: center; 45 justify-content: center; 46} 47 48.svgContainer svg { 49 position: absolute; 50 overflow: visible; 51} 52 53.dartboard { 54 width: 2em; 55 height: 2em; 56 padding: 6px; 57 border: 3px solid #3A486F; 58 border-radius: 50%; 59 transition: all 0.5s ease; 60 transform: scale(2) rotate(34deg); 61} 62 63.eyehole { 64 transform: scale(1.2) rotate(-270deg); 65 transition: all 0.5s ease; 66} 67 68.batman { 69 transition: all .4s ease-in; 70 transform: rotate(55deg) translate(240px, -45px) scale(1.2); 71} 72 73.svg-fill-primary { 74 fill: #242424; 75} 76 77.card-info { 78 display: flex; 79 flex-direction: column; 80 justify-content: end; 81 text-align: center; 82 gap: 10px; 83 align-items: center; 84} 85 86.card span { 87 font-size: 20px; 88 font-weight: 700; 89 text-transform: uppercase; 90} 91 92.card-info p { 93 color: #3A486F; 94 font-weight: 600; 95} 96 97.card-info .challengeButton { 98 text-decoration: none; 99 background-color: #343434; 100 color: white; 101 padding: 5px 15px; 102 border-radius: 10px; 103 box-sizing: border-box; 104 transition: all 0.5s ease; 105} 106 107.card:hover { 108 box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.83); 109} 110 111.card:hover .batman { 112 transform: rotate(-50deg) translate(12px, 2px); 113} 114 115.card:hover .eyehole { 116 transform: scale(1); 117} 118 119.card:hover .dartboard { 120 transform: scale(1) rotate(0deg) translate(0, 0); 121} 122 123.challengeButton:hover { 124 background-color: #3A486F; 125} 126 127.card:hover::before { 128 border-left: 30px solid #182445; 129 border-right: 30px solid #182445; 130 border-bottom: 10px solid transparent; 131 top: -15px; 132}
674 views
674 views
MIT License