Card by MijailVillegas
#212121
1.container { 2 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 3 font-style: italic; 4 font-weight: bold; 5 display: flex; 6 margin: auto; 7 aspect-ratio: 16/9; 8 align-items: center; 9 justify-items: center; 10 justify-content: center; 11 flex-wrap: wrap; 12 flex-direction: column; 13 gap: 1em; 14} 15 16.card-container { 17 filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9); 18 animation: blinkShadowsFilter 8s ease-in infinite; 19} 20 21.card-content { 22 display: grid; 23 align-content: center; 24 justify-items: center; 25 align-items: center; 26 text-align: center; 27 padding: 1em; 28 grid-template-rows: 0.1fr 0.7fr 0.25fr; 29 background-color: hsl(296, 59%, 10%); 30 width: 10em; 31 aspect-ratio: 9/16; 32 -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%); 33 clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%); 34} 35 36.card-content::before { 37 content: ""; 38 position: absolute; 39 width: 250%; 40 aspect-ratio: 1/1; 41 transform-origin: center; 42 background: linear-gradient(to bottom, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent), linear-gradient(to left, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent); 43 animation: rotate 5s infinite linear; 44} 45 46.card-content::after { 47 content: ""; 48 position: absolute; 49 top: 1%; 50 left: 1%; 51 width: 98%; 52 height: 98%; 53 background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, rgba(64, 144, 181, 0.3019607843) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%); 54 box-shadow: inset 0px 0px 30px 40px hsl(296, 59%, 10%); 55 -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%); 56 clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%); 57 animation: backglitch 94ms linear infinite; 58} 59 60.card-title { 61 z-index: 80; 62 -webkit-clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%); 63 clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%); 64 background: linear-gradient(90deg, rgba(255, 254, 250, 0) 0%, rgba(102, 224, 255, 0.3) 27%, rgba(102, 224, 255, 0.3) 63%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(102, 224, 255, 0.3) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 96%, rgba(102, 224, 255, 0.3) 100%); 65 width: 98%; 66 font-size: 1.2em; 67} 68 69.title { 70 width: 100%; 71 height: 100%; 72 text-align: right; 73 position: relative; 74 z-index: 2; 75 color: hsl(192, 100%, 88%); 76 font-size: 1em; 77 transition: all ease-in-out 2s linear; 78} 79 80.card-body { 81 padding-block: 1.5em; 82 padding-inline: 1em; 83 z-index: 80; 84 display: flex; 85 gap: 1.5em; 86 flex-wrap: wrap; 87 justify-content: space-around; 88 align-items: center; 89 align-content: center; 90} 91 92.svg-card { 93 text-decoration: none; 94 color: hsl(192, 100%, 88%); 95 background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%); 96 fill: currentColor; 97 width: 2em; 98 aspect-ratio: 1/1; 99 display: flex; 100 justify-content: center; 101 align-items: center; 102 transition: 0.5s; 103} 104 105.svg-card .face { 106 width: 0.7em; 107} 108 109.svg-card .twit { 110 width: 1em; 111} 112 113.svg-card .insta { 114 width: 1em; 115} 116 117.svg-card .whats { 118 width: 1.1em; 119} 120 121.svg-card:hover { 122 cursor: pointer; 123 color: hsl(192, 100%, 100%); 124} 125 126.card-footer { 127 padding-inline: 1em; 128} 129 130@keyframes backglitch { 131 0% { 132 box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%); 133 } 134 135 50% { 136 box-shadow: inset 0px -20px 30px 40px hsl(296, 59%, 10.2%); 137 } 138 139 to { 140 box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%); 141 } 142} 143 144@keyframes rotate { 145 0% { 146 transform: rotate(0deg) translate(-50%, 20%); 147 } 148 149 50% { 150 transform: rotate(180deg) translate(40%, 10%); 151 } 152 153 to { 154 transform: rotate(360deg) translate(-50%, 20%); 155 } 156} 157 158@keyframes blinkShadowsFilter { 159 0% { 160 filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9); 161 } 162 163 25% { 164 filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 24px #9e30a9); 165 } 166 167 50% { 168 filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471)); 169 } 170 171 75% { 172 filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471)); 173 } 174 175 to { 176 filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9); 177 } 178}/*# sourceMappingURL=style.css.map */
3K views
3K views
MIT License