├── appplebanner.png ├── carbon.jpg ├── carbonbanner.png ├── index.html ├── logo.png ├── readme.md ├── style.css └── watch.jpg /appplebanner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asynchronousJavascriptor/b26/ced81c8a38f43d262af20f76c34777d6def473af/appplebanner.png -------------------------------------------------------------------------------- /carbon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asynchronousJavascriptor/b26/ced81c8a38f43d262af20f76c34777d6def473af/carbon.jpg -------------------------------------------------------------------------------- /carbonbanner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asynchronousJavascriptor/b26/ced81c8a38f43d262af20f76c34777d6def473af/carbonbanner.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 27 |
28 |

your calendar
as a service.

29 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nesciunt perferendis numquam dolorem?

30 |
31 | 114 |
115 | 116 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asynchronousJavascriptor/b26/ced81c8a38f43d262af20f76c34777d6def473af/logo.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | desktop ✅ 2 | folder creation ✅ 3 | open with vs code ✅ 4 | file creation ✅ 5 | filename and file extension ✅ 6 | html 7 | boilerplate code = wo code jo har baar likhna pade ✅ 8 | tags ✅ 9 | requirements ✅ 10 | code editor - vs code 11 | code runner - brave 12 | 13 | h1-h6 p b i sup sub ol ul li - day 1 tags 14 | img a br form (intro) - day 2 15 | 16 | form ke inputs ke types : 17 | text 18 | email 19 | password 20 | checkbox 21 | radio 22 | range 23 | file 24 | submit 25 | 26 | hr, form repeat, div, id, class ✅ 27 | 28 | 29 | center pe ek h1 chahiye 30 | h1 ko style kariye 31 | 32 | black -> white 33 | font -> gilroy 34 | fsize -> 60-70px 35 | fweight - 600 36 | letter spacing -> 30px 37 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: "Gilroy"; 5 | box-sizing: border-box; 6 | } 7 | 8 | html,body{ 9 | width: 100%; 10 | height: 100%; 11 | } 12 | 13 | #main{ 14 | width: 100%; 15 | height: 100%; 16 | background-color: #fff; 17 | } 18 | 19 | #nav{ 20 | position: relative; 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | padding: 0 40px; 25 | width: 100%; 26 | height: 70px; 27 | } 28 | 29 | #logo{ 30 | display: flex; 31 | align-items: end; 32 | } 33 | 34 | #logo img{ 35 | width: 25px; 36 | } 37 | 38 | #logo h5{ 39 | font-size: 15px; 40 | margin-left: 10px; 41 | } 42 | 43 | #center{ 44 | display: flex; 45 | gap: 30px; 46 | position: absolute; 47 | top: 50%; 48 | left: 50%; 49 | transform: translate(-50%,-50%); 50 | } 51 | 52 | #center a{ 53 | text-decoration: none; 54 | color: #000; 55 | font-size: 12px; 56 | font-weight: 600; 57 | } 58 | 59 | #right{ 60 | display: flex; 61 | align-items: center; 62 | gap: 30px; 63 | } 64 | 65 | #right a{ 66 | text-decoration: none; 67 | font-size: 12px; 68 | color: #000; 69 | font-weight: 700; 70 | } 71 | 72 | #right button{ 73 | padding: 10px 22px; 74 | background-color: transparent; 75 | border: 1px solid #000; 76 | border-radius: 5px; 77 | font-size: 12px; 78 | font-weight: 700; 79 | } 80 | 81 | #textcenter{ 82 | height: 32%; 83 | margin-top: 70px; 84 | text-align: center; 85 | } 86 | 87 | #textcenter h1{ 88 | line-height: 1; 89 | font-size: 90px; 90 | font-weight: 800; 91 | } 92 | 93 | #textcenter p{ 94 | font-weight: 600; 95 | margin: 20px auto; 96 | width: 30%; 97 | } 98 | 99 | #footer{ 100 | display: flex; 101 | justify-content: space-between; 102 | align-items: end; 103 | width: 100%; 104 | height: calc(100% - (32% + 70px + 70px)); 105 | padding: 40px; 106 | } 107 | 108 | .col{ 109 | border-radius: 20px; 110 | width: 19%; 111 | height: 100%; 112 | } 113 | 114 | #footer .col:nth-child(1){ 115 | padding: 20px; 116 | background-color: rgb(29, 29, 29); 117 | color: #fff; 118 | } 119 | 120 | #footer .col:nth-child(1) h5{ 121 | opacity: .4; 122 | font-weight: 500; 123 | } 124 | 125 | #footer .col:nth-child(1) h1{ 126 | font-size: 22px; 127 | font-weight: 500; 128 | } 129 | 130 | #footer .col:nth-child(1) .dates{ 131 | display: flex; 132 | justify-content: space-between; 133 | background-color: rgb(56, 56, 56); 134 | margin-top: 20px; 135 | border-radius: 10px; 136 | } 137 | 138 | #footer .col:nth-child(1) .dates .arrow{ 139 | display: flex; 140 | align-items: center; 141 | justify-content: center; 142 | width: 10%; 143 | } 144 | 145 | #footer .col:nth-child(1) .dates .date{ 146 | padding: 8px 0; 147 | display: flex; 148 | flex-direction: column; 149 | align-items: center; 150 | justify-content: center; 151 | width: calc(80% / 3); 152 | } 153 | 154 | #footer .col:nth-child(1) .dates .date h4{ 155 | opacity: .7; 156 | font-size: 12px; 157 | } 158 | 159 | #footer .col:nth-child(1) .dates .date h2{ 160 | opacity: .7; 161 | } 162 | 163 | #footer .col:nth-child(1) .dates .selected{ 164 | background-color: rgb(96, 96, 96); 165 | border-radius: 10px; 166 | } 167 | 168 | .tasks{ 169 | width: 100%; 170 | margin-top: 20px; 171 | } 172 | 173 | .tasks .task{ 174 | margin-top: 10px; 175 | display: flex; 176 | justify-content: space-between; 177 | width: 100%; 178 | } 179 | 180 | .task .marking{ 181 | display: flex; 182 | align-items: center; 183 | gap: 10px; 184 | width: 75%; 185 | border-radius: 10px; 186 | padding: 10px 15px; 187 | color: #000; 188 | background-color: rgb(218, 233, 218); 189 | } 190 | 191 | .task .marking .check{ 192 | padding: .7px 1.3px; 193 | border-radius: 5px; 194 | border: 2px solid #000; 195 | } 196 | 197 | .marking h5{ 198 | opacity: .7 !important; 199 | font-weight: 800 !important; 200 | } 201 | 202 | #footer .col:nth-child(2){ 203 | height: 70%; 204 | background-image: url(https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2592&q=80); 205 | background-size: cover; 206 | background-position: 0% 70%; 207 | } 208 | 209 | #footer .col:nth-child(3){ 210 | display: flex; 211 | flex-direction: column; 212 | align-items: center; 213 | justify-content: space-between; 214 | height: 100%; 215 | } 216 | 217 | #footer .col:nth-child(4){ 218 | padding: 12px; 219 | background-color: rgb(191, 159, 223); 220 | height: 70%; 221 | } 222 | 223 | #footer .col:nth-child(4) .row1{ 224 | display: flex; 225 | align-items: center; 226 | } 227 | 228 | #footer .col:nth-child(4) .row1 .image{ 229 | width: 45px; 230 | height: 45px; 231 | border-radius: 50%; 232 | background-image: url(https://plus.unsplash.com/premium_photo-1664541336896-b3d5f7dec9a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80); 233 | background-size: cover; 234 | background-position: center; 235 | } 236 | 237 | #footer .col:nth-child(4) .row1 h2{ 238 | margin-left: 10px; 239 | } 240 | 241 | #footer .col:nth-child(4) h4{ 242 | margin-top: 10px; 243 | opacity: .7; 244 | } 245 | 246 | #footer .col:nth-child(4) .row1 h5{ 247 | opacity: .4; 248 | margin-bottom: -5px; 249 | margin-left: 5px; 250 | } 251 | 252 | #footer .col:nth-child(4) .tile{ 253 | display: flex; 254 | gap: 15px; 255 | margin-top: 20px; 256 | width: 100%; 257 | padding: 10px; 258 | background-color: rgb(37, 28, 46); 259 | border-radius: 10px; 260 | } 261 | 262 | #footer .col:nth-child(4) .tile .text{ 263 | color: #fff; 264 | } 265 | 266 | #footer .col:nth-child(4) .tile .text h5{ 267 | margin-top: 10px; 268 | font-weight: 200; 269 | } 270 | 271 | .text h5 i{ 272 | opacity: .2; 273 | } 274 | 275 | #footer .col:nth-child(4) .tile .badge{ 276 | border-radius: 15px; 277 | padding: 8px 17px; 278 | background-color: rgb(194, 227, 206); 279 | } 280 | 281 | .badge h3{ 282 | font-size: 20px; 283 | font-weight: 900; 284 | } 285 | 286 | #footer .col:nth-child(5){ 287 | color: #fff; 288 | overflow: hidden; 289 | background-image: url(https://images.unsplash.com/photo-1694967336899-d6d8b08932bf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80); 290 | background-size: cover; 291 | background-position: center; 292 | } 293 | 294 | #footer .col:nth-child(3) .top{ 295 | width: 100%; 296 | display: flex; 297 | flex-direction: column; 298 | align-items: center; 299 | } 300 | 301 | #footer .col:nth-child(3) button{ 302 | margin-bottom: 10px; 303 | border-radius: 10px; 304 | border: none; 305 | background-color: black; 306 | color: #fff; 307 | padding: 12px 40px; 308 | } 309 | 310 | #footer .col:nth-child(3) .btm{ 311 | width: 80%; 312 | border-radius: 10px; 313 | padding: 20px; 314 | font-size: 16px; 315 | font-weight: 600; 316 | line-height: 1.4; 317 | background-color: rgb(218, 233, 218); 318 | } 319 | 320 | #footer .col:nth-child(5) #overlay{ 321 | display: flex; 322 | flex-direction: column; 323 | justify-content: space-between; 324 | padding: 20px; 325 | width: 100%; 326 | height: 100%; 327 | background-color: rgba(0, 0, 0, 0.481); 328 | } 329 | 330 | #footer .col:nth-child(5) h3{ 331 | line-height: 1; 332 | font-size: 28px; 333 | font-weight: 600; 334 | } 335 | 336 | .btn{ 337 | display: flex; 338 | align-items: center; 339 | gap: 10px; 340 | padding: 5px; 341 | background-color: rgba(0, 0, 0, 0.494); 342 | border-radius: 10px; 343 | } 344 | 345 | .btn i{ 346 | font-size: 40px; 347 | } -------------------------------------------------------------------------------- /watch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asynchronousJavascriptor/b26/ced81c8a38f43d262af20f76c34777d6def473af/watch.jpg --------------------------------------------------------------------------------