#212121
1.card::before { 2 content: ""; 3 background: rgb(202, 26, 114); 4 position: absolute; 5 /* inset: 0; */ 6 z-index: -100; 7} 8 9.card { 10 width: 300px; 11 height: 300px; 12 zoom: .8; 13} 14 15.heading { 16 font-size: 24px; 17 color: white; 18 text-shadow: -1px 2px 0px #fff, 19 -1px -2px 12px #fff; 20 position: absolute; 21 top: calc(50% - 190px); 22} 23 24.heading span { 25 color: hotpink; 26 text-shadow: -1px 2px 0px #ff69b4, 27 -1px -2px 12px hotpink; 28} 29 30button { 31 border: 2px #ff69b4 solid; 32 padding: 10px 80px; 33 background-color: #ff69b422; 34 border-radius: 30px; 35 color: #ff69b4; 36 font-weight: 900; 37 font-size: 16px; 38 margin-top: 345px; 39} 40 41button:hover { 42 background-color: #ff69b444; 43} 44 45.item--create::before { 46 content: ""; 47 background-color: rgb(69, 1, 37); 48 width: 120px; 49 height: 120px; 50 position: absolute; 51 top: 0px; 52 z-index: -1; 53} 54 55.item--create { 56 width: 120px; 57 height: 125px; 58 position: absolute; 59 top: calc(50% - 115px); 60 left: calc(50% - 65px); 61 display: flex; 62 flex-direction: column; 63 align-items: center; 64 padding-top: 45px; 65 transition: padding-top 0.5s ease-out; 66 -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0LjYxIDIxLjE4IDE2Ny41NSAxNDkuMzQiPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00MCwtNjYuMkM0OS4yLC01Ni4zLDUyLjMsLTQwLjgsNTkuOSwtMjYuN0M2Ny40LC0xMi41LDc5LjMsMC4zLDgxLjcsMTQuNkM4NC4xLDI4LjksNzcsNDQuNyw2NC43LDUyLjZDNTIuNSw2MC41LDM1LjEsNjAuNSwxOS43LDYzLjRDNC4yLDY2LjMsLTkuMyw3Mi4xLC0yMS42LDcwLjFDLTMzLjgsNjgsLTQ0LjcsNTguMSwtNTYuMSw0Ny4zQy02Ny40LDM2LjUsLTc5LjMsMjQuOCwtODMuNSwxMC42Qy04Ny44LC0zLjYsLTg0LjYsLTIwLjQsLTc1LjQsLTMyQy02Ni4zLC00My42LC01MS4zLC01MCwtMzcuNywtNThDLTI0LjIsLTY2LC0xMi4xLC03NS41LDEuNiwtNzguMUMxNS40LC04MC43LDMwLjcsLTc2LjIsNDAsLTY2LjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAgMTAwKSIvPgo8L3N2Zz4='); 67 z-index: 100; 68 -webkit-mask-repeat: no-repeat; 69} 70 71.item--create svg { 72 height: 50px !important; 73 width: 50px !important; 74 margin-bottom: 10px; 75 transition: height 0.5s ease-out,width 0.5s ease-out,margin-bottom 0.5s ease-out; 76} 77 78.item--create:hover svg { 79 height: 40px !important; 80 width: 40px !important; 81 margin-bottom: 5px; 82} 83 84.item--create:hover { 85 padding-top: 30px; 86} 87 88.item--post::before { 89 content: ""; 90 background-color: rgb(114, 7, 79); 91 width: 230px; 92 height: 230px; 93 position: absolute; 94 top: 0px; 95 z-index: -2; 96 /* top:200px; 97 left:calc(50% - 50px); */ 98} 99 100.item--post { 101 min-width: 230px; 102 min-height: 230px; 103 position: absolute; 104 top: calc(50% - 130px); 105 left: calc(50% - 120px); 106 display: flex; 107 flex-direction: column; 108 align-items: center; 109 padding-top: 140px; 110 transition: padding-top 0.5s ease-out; 111 z-index: 99; 112 -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0LjYxIDIxLjE4IDE2Ny41NSAxNDkuMzQiPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00MCwtNjYuMkM0OS4yLC01Ni4zLDUyLjMsLTQwLjgsNTkuOSwtMjYuN0M2Ny40LC0xMi41LDc5LjMsMC4zLDgxLjcsMTQuNkM4NC4xLDI4LjksNzcsNDQuNyw2NC43LDUyLjZDNTIuNSw2MC41LDM1LjEsNjAuNSwxOS43LDYzLjRDNC4yLDY2LjMsLTkuMyw3Mi4xLC0yMS42LDcwLjFDLTMzLjgsNjgsLTQ0LjcsNTguMSwtNTYuMSw0Ny4zQy02Ny40LDM2LjUsLTc5LjMsMjQuOCwtODMuNSwxMC42Qy04Ny44LC0zLjYsLTg0LjYsLTIwLjQsLTc1LjQsLTMyQy02Ni4zLC00My42LC01MS4zLC01MCwtMzcuNywtNThDLTI0LjIsLTY2LC0xMi4xLC03NS41LDEuNiwtNzguMUMxNS40LC04MC43LDMwLjcsLTc2LjIsNDAsLTY2LjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAgMTAwKSIvPgo8L3N2Zz4='); 113 -webkit-mask-repeat: no-repeat; 114} 115 116.item--post svg { 117 height: 50px !important; 118 width: 50px !important; 119 margin-bottom: 15px; 120 transition: height 0.5s ease-out,width 0.5s ease-out,margin-bottom 0.5s ease-out; 121} 122 123.item--post:hover svg { 124 height: 40px !important; 125 width: 40px !important; 126 margin-bottom: 5px; 127} 128 129.item--post:hover { 130 padding-top: 130px; 131} 132 133.item--inspire::before { 134 /* background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0LjYxIDIxLjE4IDE2Ny41NSAxNDkuMzQiPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00MCwtNjYuMkM0OS4yLC01Ni4zLDUyLjMsLTQwLjgsNTkuOSwtMjYuN0M2Ny40LC0xMi41LDc5LjMsMC4zLDgxLjcsMTQuNkM4NC4xLDI4LjksNzcsNDQuNyw2NC43LDUyLjZDNTIuNSw2MC41LDM1LjEsNjAuNSwxOS43LDYzLjRDNC4yLDY2LjMsLTkuMyw3Mi4xLC0yMS42LDcwLjFDLTMzLjgsNjgsLTQ0LjcsNTguMSwtNTYuMSw0Ny4zQy02Ny40LDM2LjUsLTc5LjMsMjQuOCwtODMuNSwxMC42Qy04Ny44LC0zLjYsLTg0LjYsLTIwLjQsLTc1LjQsLTMyQy02Ni4zLC00My42LC01MS4zLC01MCwtMzcuNywtNThDLTI0LjIsLTY2LC0xMi4xLC03NS41LDEuNiwtNzguMUMxNS40LC04MC43LDMwLjcsLTc2LjIsNDAsLTY2LjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAgMTAwKSIvPgo8L3N2Zz4='); */ 135 content: ""; 136 background-color: rgb(179, 4, 100); 137 width: 350px; 138 height: 350px; 139 position: absolute; 140 top: 0px; 141 z-index: -3; 142 /* top:200px; 143 left:calc(50% - 50px); */ 144} 145 146.item--inspire { 147 min-width: 350px; 148 min-height: 350px; 149 position: absolute; 150 top: calc(50% - 145px); 151 left: calc(50% - 350px / 2); 152 display: flex; 153 flex-direction: column; 154 align-items: center; 155 padding-top: 245px; 156 transition: padding-top 0.5s ease-out; 157 z-index: 98; 158 -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0LjYxIDIxLjE4IDE2Ny41NSAxNDkuMzQiPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00MCwtNjYuMkM0OS4yLC01Ni4zLDUyLjMsLTQwLjgsNTkuOSwtMjYuN0M2Ny40LC0xMi41LDc5LjMsMC4zLDgxLjcsMTQuNkM4NC4xLDI4LjksNzcsNDQuNyw2NC43LDUyLjZDNTIuNSw2MC41LDM1LjEsNjAuNSwxOS43LDYzLjRDNC4yLDY2LjMsLTkuMyw3Mi4xLC0yMS42LDcwLjFDLTMzLjgsNjgsLTQ0LjcsNTguMSwtNTYuMSw0Ny4zQy02Ny40LDM2LjUsLTc5LjMsMjQuOCwtODMuNSwxMC42Qy04Ny44LC0zLjYsLTg0LjYsLTIwLjQsLTc1LjQsLTMyQy02Ni4zLC00My42LC01MS4zLC01MCwtMzcuNywtNThDLTI0LjIsLTY2LC0xMi4xLC03NS41LDEuNiwtNzguMUMxNS40LC04MC43LDMwLjcsLTc2LjIsNDAsLTY2LjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAgMTAwKSIvPgo8L3N2Zz4='); 159 -webkit-mask-repeat: no-repeat; 160} 161 162.item--inspire svg { 163 height: 50px !important; 164 width: 50px !important; 165 margin-bottom: 15px; 166 transition: height 0.5s ease-out,width 0.5s ease-out,margin-bottom 0.5s ease-out; 167} 168 169.item--inspire:hover svg { 170 height: 40px !important; 171 width: 40px !important; 172 margin-bottom: 5px; 173} 174 175.item--inspire:hover { 176 padding-top: 232px; 177}
338 views
338 views
Comments
MIT License