Card by Tsiangana
#e8e8e8
1.card { 2 width: 320px; 3 height: 220px; 4 perspective: 1000px; 5 background: #fff; 6 border-radius: 10px; 7 box-shadow: 1px 1px 20px #c7c7c7; 8} 9 10.card .paleta { 11 width: 100%; 12 height: 180px; 13 position: absolute; 14 bottom: 0; 15 display: flex; 16 align-items: center; 17 justify-content: center; 18} 19 20.component { 21 height: 23px; 22} 23 24.card .paleta .cores { 25 width: 80px; 26 height: 180px; 27 cursor: pointer; 28 transition: 0.3s linear; 29 overflow: hidden; 30} 31.card .paleta .cores:hover { 32 width: 120px; 33 transition: 0.4s linear; 34} 35 36.circle { 37 width: 50px; 38 height: 50px; 39 border-radius: 50%; 40 background-color: #fff; 41 position: absolute; 42 top: -60px; 43 box-shadow: 1px 1px 8px #c7c7c7; 44 display: flex; 45 align-items: center; 46 justify-content: center; 47} 48.card .paleta .cor1 { 49 background-color: #0e3746; 50 border-radius: 0px 0px 0px 10px; 51} 52.card .paleta .cor2 { 53 background-color: #eae8dc; 54} 55.card .paleta .cor3 { 56 background-color: #f4f2ec; 57} 58.card .paleta .cor4 { 59 background-color: #be2623; 60 border-radius: 0px 0px 10px 0px; 61} 62 63.card .paleta .cores .nome { 64 width: 100%; 65 height: 30px; 66 background-color: #fff; 67 text-align: center; 68 font-size: 11px; 69 font-family: Roboto, sans-serif; 70 font-weight: 550; 71} 72 73.card .paleta .func { 74 width: 100px; 75 display: block; 76 transform: rotate(-90deg); 77 position: absolute; 78 bottom: 40px; 79 margin-left: -41px; 80 padding-left: 5px; 81 color: #fff; 82 font-size: 15px; 83 font-family: sans-serif; 84 font-weight: 500; 85} 86 87.div1 { 88 cursor: pointer; 89 transition: background-color 0.3s; 90 position: absolute; 91 bottom: 0; 92 width: 80px; 93 height: 150px; 94} 95 96.div2 { 97 width: 50px; 98 height: 50px; 99 border-radius: 50%; 100 background-color: #fff; 101 position: absolute; 102 top: -60px; 103 left: 135px; 104 box-shadow: 1px 1px 8px #c7c7c7; 105 align-items: center; 106 justify-content: center; 107 display: none; 108} 109 110.div1:hover + .div2 { 111 background-color: #0e3746; 112 display: flex; 113 color: #fff; 114 animation: cssAnimation_0 1512ms 1 ease-out; 115} 116 117.div3 { 118 cursor: pointer; 119 transition: background-color 0.3s; 120 position: absolute; 121 bottom: 0; 122 width: 80px; 123 height: 150px; 124} 125 126.div4 { 127 width: 50px; 128 height: 50px; 129 border-radius: 50%; 130 background-color: #fff; 131 position: absolute; 132 top: -60px; 133 left: 135px; 134 box-shadow: 1px 1px 8px #c7c7c7; 135 align-items: center; 136 justify-content: center; 137 display: none; 138} 139 140.div3:hover + .div4 { 141 background-color: #eae8dc; 142 display: flex; 143 color: #fff; 144 animation: cssAnimation_0 1512ms 1 ease-out; 145} 146 147.div5 { 148 cursor: pointer; 149 transition: background-color 0.3s; 150 position: absolute; 151 bottom: 0; 152 width: 80px; 153 height: 150px; 154} 155 156.div6 { 157 width: 50px; 158 height: 50px; 159 border-radius: 50%; 160 background-color: #fff; 161 position: absolute; 162 top: -60px; 163 left: 135px; 164 box-shadow: 1px 1px 8px #c7c7c7; 165 align-items: center; 166 justify-content: center; 167 display: none; 168} 169 170.div5:hover + .div6 { 171 background-color: #f4f2ec; 172 display: flex; 173 color: #fff; 174 animation: cssAnimation_0 1512ms 1 ease-out; 175} 176 177.div7 { 178 cursor: pointer; 179 transition: background-color 0.3s; 180 position: absolute; 181 bottom: 0; 182 width: 80px; 183 height: 150px; 184} 185 186.div8 { 187 width: 50px; 188 height: 50px; 189 border-radius: 50%; 190 background-color: #fff; 191 position: absolute; 192 top: -60px; 193 left: 135px; 194 box-shadow: 1px 1px 8px #c7c7c7; 195 align-items: center; 196 justify-content: center; 197 display: none; 198} 199 200.div7:hover + .div8 { 201 background-color: #be2623; 202 display: flex; 203 color: #fff; 204 animation: cssAnimation_0 1512ms 1 ease-out; 205} 206 207@keyframes cssAnimation_0 { 208 to { 209 transform: rotate(360deg) translate(0px, 0px); 210 } 211} 212
544 views
544 views
MIT License