#212121
1.card { 2 display: flex; 3 align-items: center; 4 justify-content: space-between; 5 flex-direction: column; 6 width: 280px; 7 height: 350px; 8 padding: 30px; 9 border-radius: 18px; 10 position: relative; 11 box-sizing: border-box; 12 background: linear-gradient(90deg, #0a76b5 0%, #3bf8a0 100%); 13 animation: gradient 8s ease-in-out infinite; 14 background-size: 500% 500%; 15 transition: all 0.5s; 16 box-shadow: 0px 15px 20px rgba(32, 64, 194, 0.4); 17} 18 19.heading { 20 font-size: 25px; 21 font-weight: bold; 22 color: rgb(15, 17, 36); 23 margin-top: 20px; 24 text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3); 25 ; 26} 27 28.heading span { 29 color: #ffffffeb; 30 text-shadow: 0px 0px 16px #CECECE; 31} 32 33.content { 34 display: flex; 35 justify-content: space-between; 36 list-style: none; 37 background-color: #17181c; 38 border-radius: 1em; 39 box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3); 40 transform-origin: 50% 133%; 41 text-shadow: 0px 0px 16px #CECECE; 42} 43 44.content:hover { 45 box-shadow: 0px 15px 20px rgba(32, 64, 194, 0.4); 46} 47 48.item { 49 display: flex; 50 flex-direction: column; 51 justify-content: center; 52 align-items: center; 53 text-align: center; 54 width: 5rem; 55 height: 4rem; 56 text-decoration: none; 57 transition: transform 0.2s ease-in-out; 58 color: #ffffff; 59 text-shadow: 0px 0px 16px #CECECE; 60} 61 62.item:hover { 63 color: dodgerblue; 64 transform: translateY(-10px); 65} 66 67.item:focus { 68 outline: transparent; 69} 70 71.item item--create svg { 72 display: block; 73 margin: 0 auto; 74 overflow: visible; 75 width: 1.5em; 76 height: 1.5em; 77 transition: transform 0.3s cubic-bezier(0.7,0,0.3,1); 78} 79 80.item span { 81 display: block; 82 font-size: 10px; 83 line-height: 1.25; 84 text-align: center; 85 transition: opacity 0.3s; 86} 87 88.item--create svg { 89 animation: spin 2s linear infinite; 90} 91 92.item--post svg { 93 animation: upDown 2s ease-in-out infinite alternate; 94} 95 96.item--inspire svg { 97 animation: flash 1.2s linear infinite; 98} 99 100@keyframes spin { 101 100% { 102 transform: rotate(360deg); 103 } 104} 105 106@keyframes upDown { 107 0% { 108 transform: translateY(1.8px); 109 } 110 111 100% { 112 transform: translateY(-1.8px); 113 } 114} 115 116@keyframes flash { 117 0% { 118 opacity: 1; 119 } 120 121 50% { 122 opacity: 0; 123 } 124 125 100% { 126 opacity: 1; 127 } 128} 129 130.content span:hover { 131 color: dodgerblue; 132 text-shadow: 0px 0px 16px #CECECE; 133} 134 135.item:focus span { 136 opacity: 0; 137} 138 139button { 140 padding: 15px; 141 font-size: 12px; 142 text-transform: uppercase; 143 text-shadow: 0px 0px 16px #CECECE; 144 letter-spacing: 2.5px; 145 font-weight: 500; 146 color: #fff; 147 background-color: rgb(12, 17, 80); 148 border: none; 149 border-radius: 25px; 150 box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3); 151 transition: all 0.3s ease 0s; 152 cursor: pointer; 153 outline: none; 154} 155 156button:hover { 157 background-color: #251ab6; 158 box-shadow: 0px 15px 20px rgba(32, 64, 194, 0.4); 159 color: #fff; 160 transform: translateY(-7px); 161} 162 163button:active { 164 transform: translateY(-1px); 165}
355 views
355 views
Comments
MIT License