Card by Saad3092003
This card was created for One <div> challenge
#212121
1.one-div { 2 position: relative; 3 height: 250px; 4 width: 200px; 5 background-color: rgb(15, 15, 15); 6 transform-style: preserve-3d; 7 animation: rot 2s infinite ease; 8 border-radius: 20px; 9 box-shadow: 0 0 50px 0px white ,inset 0 0 50px 0px white; 10 transition: 1s; 11} 12 13.one-div::after { 14 content: 'D I V'; 15 font-size: 30px; 16 text-shadow: 5px 5px 1px black; 17 position: absolute; 18 top: 0; 19 left: 0; 20 height: 100%; 21 width: 100%; 22 display: flex; 23 justify-content: center; 24 align-items: center; 25 transition: all 0.5s; 26 color: white; 27} 28 29.one-div:hover.one-div::after { 30 font-size: 40px; 31} 32 33.one-div::before { 34 content: 'UIVERSE'; 35 color: white; 36 font-size: 25px; 37 letter-spacing: 7px; 38 display: flex; 39 justify-content: center; 40 align-items: center; 41 position: absolute; 42 top: -20px; 43 left: 40px; 44 background-color: rgb(25, 25, 25); 45 width: 220px; 46 height: 270px; 47 transform: translateY(50px) translateZ(50px); 48 border-radius: 20px; 49 filter: blur(0px); 50 transition: 0.5s; 51 box-shadow: 0 0 5px 0px black, -3px -3px 10px 3px rgb(25,25,25),inset 0px 0px 40px -20px black; 52} 53 54.one-div:active.one-div::after { 55 text-shadow: 0 0 0 black; 56 transition: 0.5s; 57 transform: translateY(5px) translateZ(5px); 58} 59 60.one-div:hover.one-div::before { 61 font-size: 10px; 62 width: 250px; 63 height: 300px; 64 transform: translateZ(-50px) translateY(50px); 65 box-shadow: 0 0 5px 0px black, -3px -3px 10px 3px rgb(25,25,25),inset 0px 0px 40px -20px; 66} 67 68.one-div:hover { 69 height: 300px; 70 width: 250px; 71 box-shadow: 0 0 5px 0px black,inset -3px -3px 10px 3px rgb(25,25,25),inset 3px 3px 20px 3px black; 72 cursor: pointer; 73} 74 75@keyframes rot { 76 0% { 77 transform: rotateX(-15deg) translateY(0px); 78 } 79 80 50% { 81 transform: rotateX(-15deg) translateY(-10px); 82 } 83 84 100% { 85 transform: rotateX(-15deg) translateY(0px); 86 } 87} 88
2.4K views
2.4K views
MIT License