Card by escannord
#212121
1.card { 2 perspective: 1000px; 3 transform-style: preserve-3d; 4 position: relative; 5} 6 7.phone { 8 /* transform: rotateX(40deg); */ 9 position: relative; 10 perspective: 1000px; 11 width: 150px; 12 height: 254px; 13 transform-style: preserve-3d; 14 transform: rotateX(80deg) rotateY(0deg) rotateZ(30deg); 15 transition: all 1s; 16 /* animation: rotate 5s linear infinite; */ 17} 18 19.phone:hover { 20 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.5); 21} 22.front { 23 width: 100%; 24 height: 100%; 25 background: lightgrey; 26 border: solid 5px rgb(0, 0, 0); 27 border-radius: 10px; 28 border-top: 15px solid; 29 border-bottom: 15px solid; 30 background: lightblue; 31 padding: 0.5rem; 32 text-align: center; 33 transform: translateY(20px); 34 background: radial-gradient( 35 circle, 36 rgb(170, 162, 162), 37 rgb(44, 8, 102) 30%, 38 rgba(26, 78, 189, 0.226) 0% 39 ), 40 radial-gradient( 41 circle at 40px 40px, 42 rgb(233, 228, 228), 43 rgb(41, 35, 49) 30%, 44 rgba(88, 84, 84, 0) 0% 45 ), 46 radial-gradient( 47 circle at 600px 200px, 48 rgb(233, 228, 228), 49 rgb(27, 26, 26) 10%, 50 rgba(88, 84, 84, 0) 0% 51 ), 52 radial-gradient( 53 circle at 800px 100px, 54 rgb(233, 228, 228), 55 #333 10%, 56 rgba(88, 84, 84, 0) 0% 57 ), 58 radial-gradient( 59 circle at 700px 500px, 60 rgb(233, 228, 228), 61 #333 2%, 62 rgba(88, 84, 84, 0.123) 0% 63 ), 64 radial-gradient( 65 circle at 200px 400px, 66 rgb(233, 228, 228), 67 #333 1%, 68 rgba(88, 84, 84, 0) 0% 69 ), 70 radial-gradient( 71 circle at 300px 700px, 72 rgb(233, 228, 228), 73 #333 15%, 74 rgba(88, 84, 84, 0) 0% 75 ), 76 radial-gradient( 77 circle at 650px 400px, 78 rgb(233, 228, 228), 79 #333 10%, 80 rgba(88, 84, 84, 0) 0% 81 ), 82 radial-gradient( 83 circle at 600px 600px, 84 rgb(233, 228, 228), 85 #333 1%, 86 rgba(88, 84, 84, 0.959) 0% 87 ); 88 position: absolute; 89 top: 0; 90 left: 0; 91 /* outline: 2px solid rgb(116, 115, 115); */ 92} 93.front .home { 94 display: grid; 95 grid-template-columns: repeat(5, 1fr); 96 gap: 10px; 97 grid-template-rows: repeat(2, 1fr); 98} 99 100.home2 { 101 grid-template-rows: repeat(1, 1fr) !important; 102 margin-bottom: 0.5rem; 103} 104 105.front .home .app { 106 display: inline-block; 107 width: 15px; 108 height: 15px; 109 background-color: rgb(255, 255, 255); 110 border-radius: 30%; 111 text-align: center; 112 position: relative; 113} 114.front .home .app .logo-app { 115 width: 70%; 116 height: 70%; 117 position: absolute; 118 top: 50%; 119 left: 50%; 120 transform: translate(-50%, -50%); 121} 122 123.full-logo { 124 background-color: transparent !important; 125} 126 127.full-logo .logo-app { 128 width: 100% !important; 129 height: 100% !important; 130} 131 132.search { 133 position: relative; 134 margin-top: 0.2rem; 135 margin-bottom: 1rem; 136} 137 138.logo-google { 139 position: absolute; 140 width: 10px; 141 left: 5px; 142 top: 50%; 143 transform: translateY(-50%); 144} 145 146.search-google { 147 width: 100%; 148 border-radius: 20px; 149 padding: 0.3rem; 150 padding-left: 1rem; 151 font-size: 9px; 152 height: 1.5rem; 153 border: none; 154 outline: none; 155} 156 157.date { 158 color: white; 159 position: relative; 160 margin-bottom: 1rem; 161 text-align: left; 162} 163 164.date .hour { 165 font-size: large; 166} 167 168.date * { 169 display: inline-block; 170} 171 172.date .period, 173.date .day { 174 font-size: 9px; 175 line-height: 10px; 176} 177 178.bullet { 179 display: inline-block; 180 width: 30%; 181 height: 0; 182 border-bottom: 5px dotted rgba(255, 255, 255, 0.651); 183} 184 185.navigation { 186 display: flex; 187 justify-content: space-around; 188} 189 190.navigation .btn { 191 display: inline-block; 192 width: 10px; 193 height: 10px; 194} 195 196.navigation .btn-home { 197 border-radius: 50%; 198 border: solid 1px white; 199} 200 201.navigation .btn-back { 202 border-radius: 35%; 203 border: solid 1px white; 204 border-left: 1px solid transparent; 205} 206 207.navigation .btn-task { 208 border-radius: 35%; 209 border: solid 1px white; 210} 211 212.face { 213 position: absolute; 214 border-radius: 10px; 215 width: 100%; 216 height: 100%; 217 background-color: rgb(24, 23, 24); 218 top: 50%; 219 left: 50%; 220} 221 222.head { 223 font-size: 6px; 224 position: absolute; 225 width: 100%; 226 left: 0; 227 top: 0; 228 height: 10px; 229 display: flex; 230 justify-content: space-between; 231} 232 233.head .h-left { 234 color: white; 235 margin: 0 2px; 236} 237.head .h-right span { 238 display: inline-block; 239 width: 10px; 240 height: 10px; 241 margin: 0 1px; 242} 243 244.logo-head { 245 width: 100%; 246 height: 100%; 247} 248 249.top, 250.bottom { 251 width: 150px; 252 height: 10px; 253} 254 255.right, 256.left { 257 height: 254px; 258 width: 10px; 259} 260 261.front { 262 transform: translate(-50%, -50%) translateZ(5px); 263} 264.back { 265 transform: translate(-50%, -50%) rotateY(180deg) translateZ(5px); 266} 267.left { 268 transform: translate(-50%, -50%) rotateY(-90deg) translateZ(75px); 269} 270.right { 271 transform: translate(-50%, -50%) rotateY(90deg) translateZ(75px); 272} 273.top { 274 transform: translate(-50%, -50%) rotateX(90deg) translateZ(127px); 275} 276.bottom { 277 transform: translate(-50%, -50%) rotateX(-90deg) translateZ(127px); 278} 279 280.bottom .elements { 281 display: flex; 282 justify-content: space-around; 283 align-items: center; 284 width: 100%; 285 height: 100%; 286} 287 288.bottom .elements .headphone { 289 display: inline-block; 290 width: 8px; 291 height: 8px; 292 border-radius: 50%; 293 background-color: #333; 294} 295 296.bottom .elements .microphone { 297 display: inline-block; 298 width: 3px; 299 height: 3px; 300 border-radius: 50%; 301 background-color: #333; 302} 303 304.bottom .elements .charge { 305 display: inline-block; 306 width: 20px; 307 height: 6px; 308 position: relative; 309 border-radius: 3px 3px 10px 10px; 310 background-color: #333; 311} 312 313.charge::before { 314 content: ""; 315 display: inline-block; 316 width: 10px; 317 height: 2px; 318 position: absolute; 319 border-radius: 3px 3px 10px 10px; 320 top: 50%; 321 left: 50%; 322 transform: translate(-50%, -50%); 323 background-color: rgb(26, 25, 25); 324} 325 326.bottom .elements .speaker { 327 display: inline-block; 328 width: 30px; 329 height: 0; 330 border-top: #333 dotted 5px; 331} 332 333.front-camera { 334 width: 10px; 335 height: 10px; 336 background-color: rgb(26, 25, 25); 337 border-radius: 50%; 338 position: absolute; 339 top: -11px; 340 left: 50%; 341 transform: translateX(-50%); 342} 343 344.front-camera::after { 345 content: ""; 346 position: absolute; 347 border-radius: 50%; 348 display: inline-block; 349 top: 50%; 350 left: 50%; 351 width: 50%; 352 height: 50%; 353 transform: translate(-50%, -50%); 354 background: radial-gradient( 355 circle at 6px 2px, 356 rgba(255, 255, 255, 0.726), 357 rgb(0, 0, 0) 358 ); 359} 360 361.front-camera::before { 362 content: ""; 363 position: absolute; 364 border-radius: 50%; 365 display: inline-block; 366 top: 50%; 367 left: 50%; 368 width: 25%; 369 height: 25%; 370 z-index: 2; 371 transform: translate(-50%, -50%); 372 background-color: #212121; 373} 374 375.menu { 376 background-color: transparent !important; 377} 378 379.logo-menu { 380 width: 100%; 381 height: 100%; 382} 383 384.logo-phone { 385 background-color: #33ff77 !important; 386} 387 388.message { 389 /* background-color: blue!important; */ 390} 391 392@keyframes rotate { 393 0% { 394 transform: rotateX(0deg) rotateY(0deg); 395 } 396 100% { 397 transform: rotateX(360deg) rotateY(360deg); 398 } 399} 400
1K views
1K views
MIT License