#212121
1.one-div { 2 --circle-color: #212121; 3 width: 300px; 4 height: 150px; 5 position: relative; 6} 7 8.one-div::before { 9 content: "Golden Ticket"; 10 color: transparent; 11 text-shadow: -55px 0 #2E2205; 12 text-transform: uppercase; 13 font-family: "Anton", Impact, sans-serif; 14 font-size: 1.6rem; 15 display: -webkit-box; 16 display: -ms-flexbox; 17 display: flex; 18 -webkit-box-align: center; 19 -ms-flex-align: center; 20 align-items: center; 21 -webkit-box-pack: center; 22 -ms-flex-pack: center; 23 justify-content: center; 24 position: absolute; 25 inset: 0; 26 background-image: -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 27 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 28 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 29 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 30 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 31 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 32 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 33 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 34 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 35 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 36 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 37 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 38 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px), 39 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 40 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 41 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 42 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 43 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 44 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 45 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 46 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 47 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 48 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 49 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 50 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 51 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 52 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 53 -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%), 54 -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%), 55 -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%), 56 -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%), 57 -o-radial-gradient(right bottom, ellipse farthest-corner, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), 58 -o-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); 59 background-image: linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 60 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 61 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 62 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 63 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 64 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 65 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 66 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 67 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 68 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 69 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 70 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 71 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px), 72 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 73 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 74 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 75 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 76 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 77 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 78 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 79 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 80 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 81 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 82 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 83 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 84 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 85 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 86 radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%), 87 radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%), 88 radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%), 89 radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%), 90 radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), 91 radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); 92 background-size: 55%, 55%, 1%, 1%, 1%, 1%, 1%, 1%, 1%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 100%, 100%, 100%, 100%, 100%, 100%; 93 background-position: 8px -6px, 8px 125px, 198px 3px, 198px 20px, 198px 37px, 198px 54px, 198px 71px, 198px 88px, 198px 105px, 235px 15px, 235px 20px, 235px 27px, 235px 31px, 235px 39px, 235px 43px, 235px 50px, 235px 54px, 235px 58px, 235px 65px, 235px 69px, 235px 76px, 235px 80px, 235px 87px, 235px 91px, 235px 95px, 235px 103px, 235px 106px, 50px -90px, 50px 90px, 200px, -200px, 0, 0; 94 background-repeat: no-repeat; 95 -webkit-backface-visibility: hidden; 96 backface-visibility: hidden; 97 -webkit-transition: .8s; 98 -o-transition: .8s; 99 transition: .8s; 100 -webkit-transform-style: preserve-3d; 101 transform-style: preserve-3d; 102} 103 104.one-div::after { 105 content: "This golden ticket\A ensures admittance"; 106 white-space: pre; 107 color: transparent; 108 text-shadow: 55px 0 #2E2205; 109 font-family: "Anton", Impact, sans-serif; 110 text-align: center; 111 font-size: 14px; 112 display: -webkit-box; 113 display: -ms-flexbox; 114 display: flex; 115 -webkit-box-align: center; 116 -ms-flex-align: center; 117 align-items: center; 118 -webkit-box-pack: center; 119 -ms-flex-pack: center; 120 justify-content: center; 121 position: absolute; 122 inset: 0; 123 background-image: -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 124 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 125 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 126 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 127 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 128 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 129 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 130 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 131 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 132 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 133 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 134 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 135 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px), 136 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 137 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 138 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 139 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 140 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 141 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 142 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 143 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 144 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 145 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 146 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 147 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 148 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 149 -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 150 -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%), 151 -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%), 152 -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%), 153 -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%), 154 -o-radial-gradient(left bottom, ellipse farthest-corner, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), 155 -o-radial-gradient(right top, ellipse farthest-corner, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); 156 background-image: linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 157 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 158 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 159 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 160 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 161 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 162 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 163 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 164 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px), 165 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 166 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 167 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 168 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px), 169 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 170 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 171 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 172 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 173 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 174 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 175 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 176 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 177 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 178 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 179 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 180 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px), 181 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 182 linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px), 183 radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%), 184 radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%), 185 radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%), 186 radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%), 187 radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), 188 radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); 189 background-size: 55%, 55%, 1%, 1%, 1%, 1%, 1%, 1%, 1%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 100%, 100%, 100%, 100%, 100%, 100%; 190 background-position: 126px -6px, 126px 125px, 98px 3px, 98px 20px, 98px 37px, 98px 54px, 98px 71px, 98px 88px, 98px 105px, 20px 15px, 20px 20px, 20px 27px, 20px 31px, 20px 39px, 20px 43px, 20px 50px, 20px 54px, 20px 58px, 20px 65px, 20px 69px, 20px 76px, 20px 80px, 20px 87px, 20px 91px, 20px 95px, 20px 103px, 20px 106px, -50px -90px, -50px 90px, 200px, -200px, 0, 0; 191 background-repeat: no-repeat; 192 -webkit-backface-visibility: hidden; 193 backface-visibility: hidden; 194 -webkit-transition: .8s; 195 -o-transition: .8s; 196 transition: .8s; 197 -webkit-transform: rotateY(180deg); 198 transform: rotateY(180deg); 199 -webkit-transform-style: preserve-3d; 200 transform-style: preserve-3d; 201} 202 203.one-div:hover::before { 204 -webkit-transform: rotateY(180deg); 205 transform: rotateY(180deg); 206} 207 208.one-div:hover::after { 209 -webkit-transform: rotateY(0); 210 transform: rotateY(0); 211}
759 views
759 views
Comments
MIT License