├── Hero-Sections ├── First-Sec-1.html ├── First-Sec-2.html ├── First-Sec-3_bobbles.html ├── First-Sec-4.html ├── First-Sec-5_babyCare.html └── First-Sec-6-person ├── README.md └── sign-in-out-form ├── index.css ├── index.html └── index.js /Hero-Sections/First-Sec-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Portfolio 11 | 195 | 196 | 197 | 198 |
199 | 202 | 203 | 208 | 215 |
216 | 217 | 218 |
219 |
220 |
221 |

Hi, It's Me
I'm Aura

222 |

Lorem Ipsum is simply dummy text of the printing
and typesetting industry.

223 | 229 |
230 |
231 | 232 |
233 |
234 |
235 | 236 | 237 | 238 | -------------------------------------------------------------------------------- /Hero-Sections/First-Sec-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Portfolio Round Icon 11 | 12 | 383 | 384 | 385 | 386 |
387 |
388 | 391 | 392 | 393 | 398 | 405 |
406 |
407 | 408 | 409 |
410 |
411 |
412 |
413 |
414 | 416 |
417 |
418 | 420 |
421 |
422 | 424 |
425 |
426 | 427 |
428 |
429 |
430 | 431 |
432 |
433 |
434 |

Hi, I'm

435 |

Olive Hicks

436 |

I'm a professional Web Developer. Our Main Goal to help & Satisficed the Local & Global Clients by web development solutions

437 | 438 |
439 |
440 |
441 | 442 | -------------------------------------------------------------------------------- /Hero-Sections/First-Sec-3_bobbles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo Website 8 | 10 | 107 | 108 | 109 | 110 | 111 |
112 | 144 |
145 | 146 |
147 | 151 |
152 |
153 |
154 |
155 |
156 |

Hi, It's John

157 |
158 |

I'm a professional Web Developer. Our Main Goal to help & Satisficed the Local & Global 159 | Clients by web development solutions

160 | 161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 | 169 | 172 | 173 | 174 | -------------------------------------------------------------------------------- /Hero-Sections/First-Sec-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Portfolio 12 | 318 | 319 | 320 | 321 | 339 | 340 | 341 |
342 |
343 |
344 |

Hi, I'm John

345 |

Web Developer

346 |

I'm a professional Web Developer. Our Main Goal to help & Satisficed the Local & Global Clients by web development solutions 347 |

348 | 354 | 355 |
356 |
357 |
358 |
359 |
360 | image 361 |
362 |
363 |
364 |
365 |
366 |
367 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /Hero-Sections/First-Sec-5_babyCare.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Portfolio 11 | 355 | 356 | 357 | 358 |
359 |
360 | 363 | 364 | 365 | 370 | 378 | 379 |
380 |
381 | 382 | 383 |
384 |
385 |
386 |

UP TO 60% OFF

387 |

Welcome to Our baby care Haven

388 | 389 |
390 |
391 | 393 |
394 |
395 |
396 | 397 | 398 | 399 | 400 | 401 | -------------------------------------------------------------------------------- /Hero-Sections/First-Sec-6-person: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Portfolio 11 | 395 | 396 | 397 | 398 |
399 |
400 | 403 | 404 | 405 | 410 | 417 | 421 |
422 |
423 | 424 | 425 |
426 |
427 |
428 |

Hi, It's Me

429 |

I'm John

430 |

I'm a professional Web Developer. Our Main Goal to help & Satisficed the Local & Global Clients by 431 | web development solutions 432 |

433 | 439 |
440 |
441 |
442 | 444 |
445 |
446 |
447 |
448 | 466 | 467 | 468 | 469 | 470 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # This Repository contains all the first sections of the source code. So you do'nt need to find another repository -------------------------------------------------------------------------------- /sign-in-out-form/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #33383C; 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | body { 9 | height: 100vh; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | font-family: 'Josefin Sans', Arial, sans-serif; 14 | overflow: hidden; 15 | } 16 | .form-container { 17 | -webkit-transform: translate3d(0, 0, 0); 18 | position: absolute; 19 | top: auto; 20 | left: auto; 21 | right: auto; 22 | width: 100%; 23 | max-width: 450px; 24 | background: white; 25 | box-shadow: 0 30px 35px -15px rgba(0, 0, 0, 0.3), 0 5px 15px -5px rgba(0, 0, 0, 0.4); 26 | border-radius: 20px; 27 | } 28 | .form-1 { 29 | z-index: 2; 30 | } 31 | .form-1.submitted { 32 | animation: switchback 1.2s forwards; 33 | } 34 | .form-1.goback { 35 | animation: switchfront 1.2s forwards; 36 | } 37 | .form-2 { 38 | z-index: 1; 39 | } 40 | .form-2.pull { 41 | animation: switchfront 1.2s forwards; 42 | } 43 | .form-2.push { 44 | animation: switchback 1.2s forwards; 45 | } 46 | /* .form-2 .form-image { 47 | background-image: url(https://res.cloudinary.com/dqj168cdc/image/upload/v1491578856/daily-ui-1_2_irnqx9.jpg); 48 | } */ 49 | .form-3 { 50 | z-index: 3; 51 | transform: translateY(200%); 52 | transition: transform 0.5s; 53 | } 54 | .form-3.active { 55 | transform: translateY(0); 56 | } 57 | .padding-wrap { 58 | padding: 20px 50px 40px; 59 | } 60 | .form-image { 61 | width: 100%; 62 | height: 220px; 63 | background-size: cover; 64 | position: relative; 65 | border-radius: 20px 20px 0 0; 66 | background-color: var(--primary-color); 67 | } 68 | .form-image svg { 69 | position: absolute; 70 | bottom: -1px; 71 | left: 0; 72 | right: 0; 73 | } 74 | h1 { 75 | margin: 0; 76 | margin-bottom: 30px; 77 | color: var(--primary-color); 78 | } 79 | .form-group { 80 | width: 100%; 81 | position: relative; 82 | margin-bottom: 30px; 83 | } 84 | .form-group input { 85 | border: 0; 86 | border-bottom: 1px solid black; 87 | width: 100%; 88 | padding: 8px; 89 | transition: border-color 0.3s; 90 | } 91 | .form-group input:focus { 92 | outline: none; 93 | border-color: var(--primary-color); 94 | } 95 | .form-group input:focus + label { 96 | transform: scale(0.8) translateY(-140%); 97 | color: var(--primary-color); 98 | } 99 | .form-group input:valid + label { 100 | transform: scale(0.8) translateY(-140%); 101 | color: var(--primary-color); 102 | } 103 | .form-group label { 104 | position: absolute; 105 | top: 8px; 106 | left: 0; 107 | cursor: text; 108 | transition: transform 0.3s, color 0.3s; 109 | } 110 | input[type="submit"] { 111 | width: 100%; 112 | padding: 15px; 113 | text-align: center; 114 | border-radius: 100px; 115 | border: 0; 116 | font-weight: bold; 117 | background: var(--primary-color); 118 | color: white; 119 | margin-bottom: 20px; 120 | transition: background 0.3s; 121 | cursor: pointer; 122 | } 123 | input[type="submit"]:hover { 124 | background: #fff; 125 | outline: 2px solid var(--primary-color); 126 | color: var(--primary-color); 127 | } 128 | input[type="submit"]:focus { 129 | outline: none; 130 | } 131 | .login { 132 | display: block; 133 | text-align: center; 134 | font-size: 13px; 135 | } 136 | .login a { 137 | color: #3b4371; 138 | cursor: pointer; 139 | font-weight: bold; 140 | } 141 | .login a:hover { 142 | color: #2a2f4f; 143 | } 144 | @keyframes switchback { 145 | 0% { 146 | transform: translateX(0) scale(1); 147 | z-index: 2; 148 | } 149 | 25% { 150 | transform: translateX(0) scale(1.1); 151 | z-index: 2; 152 | } 153 | 50% { 154 | transform: translateX(-50%) scale(1.1); 155 | z-index: 2; 156 | } 157 | 75% { 158 | transform: translateX(-50%) scale(0.9); 159 | z-index: 2; 160 | } 161 | 80% { 162 | z-index: 1; 163 | } 164 | 100% { 165 | transform: translateX(0) scale(0.9); 166 | z-index: 1; 167 | } 168 | } 169 | @keyframes switchfront { 170 | 0% { 171 | transform: translateX(0) scale(0.9); 172 | z-index: 1; 173 | } 174 | 25% { 175 | transform: translateX(0) scale(0.9); 176 | z-index: 1; 177 | } 178 | 50% { 179 | transform: translateX(50%) scale(0.9); 180 | z-index: 1; 181 | } 182 | 75% { 183 | transform: translateX(50%) scale(1); 184 | z-index: 1; 185 | } 186 | 80% { 187 | z-index: 2; 188 | } 189 | 100% { 190 | transform: translateX(0) scale(1); 191 | z-index: 2; 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /sign-in-out-form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 19 | 20 |
21 |
22 |

Create an Account

23 | 24 |
25 | 26 |
27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 |
35 | 36 | 37 | 38 |
39 | 40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 | 50 | 51 |
52 |
53 |

Set Your Password

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 | 81 | 82 |
83 |
84 |

Login

85 | 86 |
87 | 88 |
89 | 90 | 91 |
92 | 93 |
94 | 95 | 96 |
97 | 98 | 99 | 100 |
101 | 102 | 103 |
104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /sign-in-out-form/index.js: -------------------------------------------------------------------------------- 1 | $( "#sign-up-1" ).submit(function( e ) { 2 | e.preventDefault(); 3 | 4 | $(".form-1").removeClass("goback"); 5 | $(".form-1").addClass("submitted"); 6 | $(".form-2").removeClass("push"); 7 | $(".form-2").addClass("pull"); 8 | }); 9 | 10 | $( "#log-in" ).click(function() { 11 | $(".form-3").addClass("active"); 12 | }); 13 | 14 | $( "#go-to-signup" ).click(function() { 15 | $(".form-3").removeClass("active"); 16 | }); 17 | 18 | $( "#back" ).click(function( e ) { 19 | $(".form-1").removeClass("submitted"); 20 | $(".form-1").addClass("goback"); 21 | $(".form-2").removeClass("pull"); 22 | $(".form-2").addClass("push"); 23 | }); --------------------------------------------------------------------------------