└── Calculator ├── Calculator.html ├── css ├── css.css └── style.css └── main.html /Calculator/Calculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calculator UI -Neumorphism 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 28 |
29 |
30 | 31 |
32 |
33 | 34 |
35 | 36 |
37 | 38 |
39 | 40 | 41 |
42 | 43 |
44 | 45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 |
76 |
77 | 78 |
79 |
80 | 81 |
82 |
83 |
84 | 85 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /Calculator/css/css.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap') ; 2 | 3 | body 4 | { 5 | background: #e8eaec; 6 | } 7 | * 8 | { 9 | margin: 0; 10 | padding: 0; 11 | font-family: 'Roboto', sans-serif; 12 | } 13 | .iphone-x 14 | { 15 | margin-top: 20px; 16 | } 17 | 18 | .iphone-x .screen 19 | { 20 | width: 42%; 21 | height: 625px; 22 | background: #e8eaec; 23 | box-shadow: 24 | 12px 12px 32px rgba(13,39,80,0.25), 25 | -10px 10px 15px #fff; 26 | margin: 0 auto; 27 | border: 8px solid #e8eaec; 28 | min-width: 310px; 29 | max-width: 310px; 30 | border-radius: 44px; 31 | } 32 | .screen .notch 33 | { 34 | width: 159px; 35 | height: 30px; 36 | margin: 0px auto; 37 | background: #e8eaece1; 38 | border-bottom-right-radius: 15px; 39 | border-bottom-left-radius:15px ; 40 | } 41 | 42 | .sound { 43 | top: 10px; 44 | left: 54px; 45 | width: 40px; 46 | height: 6px; 47 | position: relative; 48 | background: #222; 49 | border-radius: 10px; 50 | } 51 | .camera { 52 | top: 2px; 53 | left: 110px; 54 | width: 10px; 55 | height: 10px; 56 | position: relative; 57 | background: #222; 58 | border-radius: 100px; 59 | } 60 | 61 | .time { 62 | color: #000; 63 | width: 60px; 64 | font-size: 11px; 65 | margin-top: -22px; 66 | background: transparent; 67 | margin-left: 18px; 68 | } 69 | 70 | .battery 71 | { 72 | margin-top:-20px; 73 | } 74 | .battery i 75 | { 76 | color:rgba(0, 0, 0, 0.548) !important; 77 | margin-left: 230px !important; 78 | } 79 | .wifi 80 | { 81 | margin-top: -22px !important; 82 | margin-left: 260px; 83 | } 84 | .wifi i 85 | { 86 | color: rgb(0, 0, 0) !important; 87 | margin-top: -20px; 88 | } 89 | 90 | .top-nav { 91 | width: 100%; 92 | height: 40px; 93 | display: -webkit-box; 94 | display: -ms-flexbox; 95 | display: flex; 96 | -webkit-box-align: center; 97 | -ms-flex-align: center; 98 | align-items: center; 99 | background: transparent; 100 | -webkit-box-orient: horizontal; 101 | -webkit-box-direction: normal; 102 | -ms-flex-direction: row; 103 | flex-direction: row; 104 | -ms-flex-pack: distribute; 105 | justify-content: space-around; 106 | } 107 | 108 | .top-nav .fa-bell { 109 | color: #ddd; 110 | width: 33px; 111 | font-size: 18px; 112 | background: transparent; 113 | } 114 | .area 115 | { 116 | min-width: 50% !important; 117 | width: 93% !important; 118 | min-height: 120px !important; 119 | margin-left: -5px; 120 | margin-top: -5px; 121 | font-size: 30px !important; 122 | text-align: center; 123 | text-align: right; 124 | overflow: scroll; 125 | outline: none; 126 | border: none; 127 | font-family: 'Roboto', sans-serif; 128 | color:#0b254e; 129 | background-color: #e8eaec; 130 | font-weight: bold; 131 | border-radius: 10px; 132 | padding: 10px; 133 | box-shadow: 6px 6px 8px rgba(13, 39, 80, 0.25), -6px -6px 10px white, inset -8px -8px 12px rgba(255, 255, 255, 0.7), inset 5px 5px 8px rgba(13, 39, 80, 0.2); 134 | } 135 | 136 | .calculator{ 137 | margin: 0; 138 | box-sizing: content-box; 139 | } 140 | .key { 141 | float: left !important; 142 | font-size: 15pt; 143 | display: flex !important; 144 | margin: -5%; 145 | margin-left: auto !important; 146 | margin-right: auto !important; 147 | } 148 | 149 | .first-col, .second-col, .third-col, .fourth-col, .fifth-col 150 | { 151 | padding: 10px; 152 | white-space: wrap; 153 | margin:-9.5px; 154 | display: inline-block; 155 | margin-top: 20px !important; 156 | justify-content: space-between !important; 157 | } 158 | 159 | .button { 160 | display: block; 161 | padding-left: 40px; 162 | min-height: 40px; 163 | padding-right: 30px; 164 | white-space: wrap; 165 | word-wrap: break-word; 166 | margin-top: 20px; 167 | justify-content: space-between !important; 168 | } 169 | button { 170 | position: relative; 171 | margin-left: -54px !important; 172 | min-width: 45px; 173 | align-items: center; 174 | justify-content: center; 175 | text-align: center; 176 | padding: 0px; 177 | background: transparent; 178 | color: #c2c3c3 !important; 179 | border: none; 180 | border-radius: 10px !important; 181 | height: 45px; 182 | outline: none; 183 | font-weight: bold !important; 184 | font-size: 14pt !important; 185 | box-shadow: 4px 4px 8px rgba(13, 39, 80, 0.25), -4px -4px 8px white; 186 | 187 | } 188 | .btn-work 189 | { 190 | color:#0b254e !important; 191 | } 192 | 193 | .btn-equal 194 | { 195 | height: 120px !important; 196 | color:#0b254e !important; 197 | 198 | } 199 | button:focus { 200 | cursor: pointer; 201 | outline: none !important; 202 | border: none !important; 203 | } 204 | 205 | button:active 206 | { 207 | box-shadow: 208 | -3px -3px 7px #a0a0a032, 209 | 3px 3px 5px rgba(94, 104, 121, 0.417); 210 | outline: none !important; 211 | border: none !important; 212 | 213 | } 214 | button:hover 215 | { 216 | color: #696a6a !important; 217 | } 218 | .home 219 | { 220 | margin-top:382px; 221 | margin-left:72px ; 222 | font-size: 30px; 223 | cursor: pointer; 224 | color: #0b254e; 225 | } 226 | .menu 227 | { 228 | margin-top: 392px; 229 | margin-left:-275px; 230 | font-size: 20px; 231 | color: #0b254e; 232 | cursor: pointer; 233 | } 234 | .back { 235 | margin-top: 392px; 236 | margin-left: 75px; 237 | font-size: 20px; 238 | cursor: pointer; 239 | color: #0b254e; 240 | } 241 | 242 | 243 | 244 | -------------------------------------------------------------------------------- /Calculator/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap'); 2 | * 3 | { 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Roboto', sans-serif; 7 | } 8 | body 9 | { 10 | background: #e8eaec; 11 | } 12 | .iphone-x 13 | { 14 | margin-top: 20px; 15 | } 16 | .iphone-x .screen 17 | { 18 | width: 42%; 19 | height: 625px; 20 | background: #e8eaec; 21 | box-shadow: 22 | 12px 12px 32px rgba(13,39,80,0.25), 23 | -10px 10px 15px #fff; 24 | margin: 0 auto; 25 | border: 8px solid #e8eaec; 26 | min-width: 310px; 27 | max-width: 310px; 28 | border-radius: 44px; 29 | } 30 | .screen .notch 31 | { 32 | width: 159px; 33 | height: 30px; 34 | margin: 0px auto; 35 | background: #e8eaece1; 36 | border-bottom-right-radius: 15px; 37 | border-bottom-left-radius:15px ; 38 | } 39 | .sound 40 | { 41 | top: 10px; 42 | left: 54px; 43 | width: 40px; 44 | height: 6px; 45 | position: relative; 46 | background: #222; 47 | border-radius: 10px; 48 | } 49 | .camera 50 | { 51 | top: 2px; 52 | left: 110px; 53 | width: 10px; 54 | height: 10px; 55 | position: relative; 56 | background: #222; 57 | border-radius: 100px; 58 | } 59 | .time 60 | { 61 | color: #000; 62 | width: 60px; 63 | font-size: 11px; 64 | margin-top: -22px; 65 | background: transparent; 66 | margin-left: 18px; 67 | } 68 | .battery 69 | { 70 | margin-top:-20px; 71 | } 72 | .battery i 73 | { 74 | color: rgba(0,0,0,0.548); 75 | margin-left: 230px !important; 76 | } 77 | .wifi 78 | { 79 | margin-top: -22px !important; 80 | margin-left: 260px; 81 | } 82 | .wifi i 83 | { 84 | color: rgb(0,0,0); 85 | margin-top: -20px; 86 | } 87 | .top-nav 88 | { 89 | width: 100%; 90 | height: 40px; 91 | display: -webkit-box; 92 | display: -ms-flexbox; 93 | display: flex; 94 | -webkit-box-align: center; 95 | align-items: center; 96 | background: transparent; 97 | -webkit-box-orient: horizontal; 98 | -webkit-box-direction: normal; 99 | -ms-flex-direction: row; 100 | flex-direction: row; 101 | -ms-flex-pack: distribute; 102 | justify-content: space-around; 103 | } 104 | .area 105 | { 106 | min-width: 50% !important; 107 | width: 93% !important; 108 | min-height: 120px !important; 109 | margin-left: -5px; 110 | margin-top: -5px; 111 | font-size: 30px !important; 112 | text-align: center; 113 | text-align: right; 114 | overflow: scroll; 115 | outline: none; 116 | border: none; 117 | font-weight: bold; 118 | color: #0b254e; 119 | background: #e8eaec; 120 | border-radius: 10px; 121 | padding: 12px; 122 | box-shadow: 123 | 6px 6px 8px rgba(13, 39, 80, 0.25), 124 | -6px -6px 10px #fff, 125 | inset -8px -8px 12px rgba(255,255,255,0.7), 126 | inset 5px 5px 8px rgba(13,39,80,0.2); 127 | 128 | 129 | } 130 | .calculator 131 | { 132 | margin: 0; 133 | box-sizing: content-box; 134 | } 135 | .key 136 | { 137 | float: left !important; 138 | font-size: 15pt; 139 | display: flex !important; 140 | margin: -5%; 141 | margin-left: auto !important; 142 | margin-right: auto !important; 143 | } 144 | .first-col, 145 | .second-col, 146 | .third-col, 147 | .fourth-col, 148 | .fifth-col 149 | { 150 | padding: 10px; 151 | white-space: wrap; 152 | margin: -9.5px; 153 | display: inline-block; 154 | margin-top: 20px !important; 155 | justify-content: space-between !important; 156 | } 157 | .button 158 | { 159 | display: block; 160 | padding-left: 40px; 161 | min-height: 40px; 162 | padding-right: 30px; 163 | white-space: wrap; 164 | word-wrap: break-word; 165 | margin-top: 20px; 166 | justify-content: space-between !important; 167 | } 168 | button 169 | { 170 | position: relative; 171 | margin-left: -54px !important; 172 | min-width: 45px; 173 | align-items: center; 174 | justify-content: center; 175 | text-align: center; 176 | padding: 0px; 177 | background: transparent; 178 | color: #c2c3c3 !important; 179 | border: none !important; 180 | border-radius: 10px !important; 181 | height: 45px; 182 | outline: none; 183 | font-weight: bold !important; 184 | font-size: 14pt !important; 185 | box-shadow: 186 | 4px 4px 8px rgba(13, 39,80,0.25), 187 | -4px 4px 8px #fff; 188 | } 189 | .btn-work 190 | { 191 | color: #0b254e !important; 192 | } 193 | .btn-equal 194 | { 195 | color: #0b254e !important; 196 | height: 120px !important; 197 | } 198 | button:focus 199 | { 200 | cursor: pointer; 201 | outline: none !important; 202 | border: none !important; 203 | 204 | } 205 | button:active 206 | { 207 | box-shadow: 208 | -3px -3px 7px #a0a0a032, 209 | 3px 3px 5px rgba(94, 104, 121, 0.417); 210 | outline: none !important; 211 | border: none !important; 212 | } 213 | button:hover 214 | { 215 | color: #696a6a !important; 216 | } 217 | .btn-work:hover, 218 | .btn-equal:hover 219 | { 220 | color:#0b254e !important; 221 | } 222 | .home 223 | { 224 | margin-top: 382px; 225 | margin-left: 72px; 226 | font-size: 30px; 227 | cursor: pointer; 228 | color: #0b254e; 229 | } 230 | .menu 231 | { 232 | margin-top: 392px; 233 | margin-left: -275px; 234 | font-size: 20px; 235 | cursor: pointer; 236 | color: #0b254e; 237 | } 238 | .back 239 | { 240 | margin-top: 392px; 241 | margin-left: 75px; 242 | font-size: 20px; 243 | cursor: pointer; 244 | color: #0b254e; 245 | } 246 | 247 | 248 | 249 | 250 | 251 | -------------------------------------------------------------------------------- /Calculator/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Calculator UI -Neumorphism 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 | 38 |
39 | 40 |
41 | 42 | 43 |
44 | 45 |
46 | 47 |
48 |
49 |
50 |
51 |
52 | 53 |
54 | 55 |
56 | 57 |
58 |
59 |
60 |
61 |
62 | 63 |
64 |
65 | 66 |
67 |
68 |
69 |
70 |
71 | 72 |
73 |
74 | 75 |
76 |
77 |
78 |
79 | 80 |
81 |
82 | 83 |
84 |
85 |
86 | 87 |
88 | 89 |
90 |
91 |
92 |
93 | 94 | 126 | 127 | --------------------------------------------------------------------------------