This post is saved as a draft.
#e8e8e8
1.phoneContainer { 2 width: 185px; 3 height: 350px; 4 background-color: black; 5 border-radius: 20px; 6 position: relative; 7} 8 9.screen { 10 width: 180px; 11 height: 340px; 12 background: rgb(255,196,196); 13 background: linear-gradient(167deg, rgba(255,196,196,1) 10%, rgba(45,138,253,1) 20%, rgba(34,193,195,1) 48%, rgba(211,216,255,1) 69%, rgba(0,164,24,1) 88%); 14 border-radius: 20px; 15 position: absolute; 16 top: 4px; 17 bottom: 2px; 18 right: 2px; 19 left: 2px; 20 box-sizing: border-box; 21} 22 23.camera { 24 width: 80px; 25 background-color: black; 26 position: absolute; 27 height: 20px; 28 top: 4%; 29 right: 50%; 30 transform: translate(50%, -50%); 31 border-radius: 25px; 32 transition: 0.3s; 33 animation-name: callTransition; 34 animation-duration: 1.9s; 35 animation-direction: alternate; 36 animation-iteration-count: infinite; 37 animation-timing-function: ease; 38} 39 40@keyframes callTransition { 41 15% { 42 width: 40px; 43 } 44 45 95% { 46 width: 95px; 47 background-color: darkblue; 48 } 49} 50 51.camera:before { 52 content: ""; 53 width: 15px; 54 height: 15px; 55 background-color: rgb(19, 19, 51); 56 position: absolute; 57 border-radius: 50%; 58 left: 5px; 59 top: 2px; 60} 61 62.camera:after { 63 content: ""; 64 width: 5px; 65 height: 5px; 66 background-color: lightgreen; 67 position: absolute; 68 border-radius: 50%; 69 right: 5px; 70 top: 6px; 71} 72 73.appsContainer { 74 margin-top: 10px; 75 position: absolute; 76 right: 50%; 77 top: 40%; 78 transform: translate(50%, -50%); 79} 80 81.widgets { 82 display: grid; 83 grid-template-columns: repeat(2, 1fr); 84 gap: 10px; 85 box-sizing: border-box; 86} 87 88.one, .two { 89 height: 80px; 90 width: 80px; 91 background-color: blue; 92 border-radius: 10px; 93 cursor: pointer; 94} 95 96.two { 97 background-color: lightblue; 98} 99 100.oneApp, .twoApp { 101 width: 35px; 102 height: 35px; 103 background-color: white; 104 border-radius: 5px; 105 margin-top: 10px; 106} 107 108.apps { 109 display: grid; 110 grid-template-columns: repeat(4, 1fr); 111 margin-top: 15px; 112 margin-left: 5px; 113} 114 115.menuBar { 116 display: flex; 117 border-radius: 20px; 118 position: absolute; 119 bottom: -70px; 120} 121 122.menuBar .twoApp:not(:last-child) { 123 margin-right: 10px; 124} 125 126.menuBar::before { 127 content: ""; 128 position: absolute; 129 width: 50px; 130 height: 13px; 131 background-color: lightgray; 132 border: none; 133 border-radius: 20px; 134 top: -5px; 135 right: 50%; 136 transform: translate(50%, -50%); 137} 138 139.menuBar::before { 140 content: "°°°°°°"; 141 position: absolute; 142 display: flex; 143 justify-content: center; 144 font-size: 18px; 145 font-weight: bolder; 146 color: gray; 147}
Variation of acard
Variation of acard