├── .gitignore ├── .vscode ├── launch.json └── settings.json ├── 404.html ├── AshHere.html ├── CONTRIBUTORS.md ├── COVID 19 Resource Site ├── about.html ├── disclaimer.html ├── index.html ├── quicktips.html └── statewise.html ├── Fast typing ├── Typing.css └── Typing.html ├── Homepage-options ├── Landing-page-redesign │ ├── css │ │ └── style.css │ ├── img │ │ ├── AndreiNeagoie.jpg │ │ ├── Logo.png │ │ ├── favicon.png │ │ └── hero.jpg │ └── index.html ├── Landing-page-redesign2 │ └── index6.html ├── index-redesign │ ├── index.html │ └── style.css ├── index-redesign2 │ ├── image │ │ └── 05.png │ ├── index.html │ └── styles.css ├── index-redesign3 │ ├── img │ │ ├── java.png │ │ └── programming.jpg │ ├── index.html │ └── style.css └── redesigning-landing-page │ ├── css │ └── style.css │ ├── images │ ├── AndreiNeagoie.jpg │ ├── bg.jpg │ ├── dsa.jpg │ ├── eh.jpg │ ├── faang.jpg │ ├── facebook.png │ ├── favicon.png │ ├── insta.png │ ├── joiner to senior web.jpg │ ├── logo.png │ ├── mail.png │ ├── ml.jpg │ ├── python.jpg │ ├── react.jpg │ ├── twitter.png │ ├── web.jpg │ └── whatsapp.png │ └── index.html ├── Loader ├── Loader.css └── Loader.html ├── No idea ├── Pokedex ├── assets │ ├── bug.png │ ├── dark.png │ ├── dragon.png │ ├── electric.png │ ├── fairy.png │ ├── fighting.png │ ├── fire.png │ ├── flying.png │ ├── ghost.png │ ├── grass.png │ ├── ground.png │ ├── ice.png │ ├── normal.png │ ├── poison.png │ ├── psychic.png │ ├── question_mark.png │ ├── rock.png │ ├── steel.png │ └── water.png ├── favicon.ico ├── index.html ├── index.js └── style.css ├── Profile Card ├── Profile_card.css ├── Profile_card.html └── images │ └── youtube.svg ├── README.md ├── Responsive Navbar ├── Responsive_Navbar.css └── Responsive_Navbar.html ├── RockPaperScissors ├── index.html ├── script.js └── style.css ├── TO-Do list ├── TODO.css ├── TODO.html ├── TODO.js └── media-queries.css ├── about.html ├── alwayschange.html ├── angularInfoPage.html ├── architectureA.html ├── beyondztm.html ├── contact-us.html ├── contri.html ├── contributersProfile.html ├── fun3d.html ├── index.html ├── instructor.html ├── jQueryInfoPage.html ├── javaScriptInfoPage.html ├── loading-Bar ├── app.js ├── index.html └── styles.css ├── main.css ├── modified_homepage_css.css ├── new.html ├── package-lock.json ├── particles.json ├── rash.html ├── register.html ├── resources ├── images │ ├── GB.png │ ├── Pikachu.gif │ ├── ZTM_logo.png │ ├── browser.png │ ├── dollar.jpg │ ├── express.png │ ├── gb.jpg │ ├── git.svg │ ├── html5-new.png │ ├── html5.png │ ├── indexPagePic.png │ ├── laptop-header.jpg │ ├── laptop.png │ ├── logo.png │ ├── moneyfall.png │ ├── node.ico │ ├── paper.jpg │ ├── social-media.jpg │ └── wallet.png ├── scripts │ ├── app.js │ ├── particles.js │ ├── script.js │ └── themeToggle.js └── style │ ├── about-page.css │ ├── carousel-style.css │ ├── glitch.css │ ├── particles.css │ ├── register-page.css │ ├── scrollbar.css │ ├── style.css │ ├── style6.css │ └── themeToggle.css ├── simple-folio ├── css │ └── styles.css ├── hobbies │ └── hobbies.html ├── img │ └── bunny-cropped-img.png └── index.html ├── test.html ├── thanks.html ├── todo_list.html └── vueInfoPage.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://127.0.0.1:5500/", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "githubPullRequests.ignoredPullRequestBranches": [ 3 | "master" 4 | ] 5 | } -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 404 - Page Not Found 14 | 20 | 21 | 28 | 29 | 30 | 31 |
32 |
33 |
34 | 38 |

Error-404

39 |
40 |
41 |

We could not find that page....!

42 |

Please check the url

43 | 44 |
45 |
46 | 53 |
54 |
55 |
56 | 57 | 58 | -------------------------------------------------------------------------------- /AshHere.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My first html file for github 8 | 9 | 10 |

First HTML file for open source contribution

11 |

Hey there! This is my first open source contribution. Hope to make more useful contibutions to our coding community. Stay strong, Be Happy :)

12 |

Thank You

13 | 14 | -------------------------------------------------------------------------------- /CONTRIBUTORS.md: -------------------------------------------------------------------------------- 1 | [@arijaya](https://github.com/AriJaya07) 2 | 3 | [@akashjoffl](https://github.com/akashjoffl) 4 | 5 | [@excel61](https://github.com/excel61) 6 | 7 | [@varun-sirpal10](https://github.com/varun-sirpal10) 8 | 9 | [@DarrnyH](https://github.com/DarrnyH) 10 | 11 | [@nidvar](https://github.com/nidvar) 12 | 13 | [@kitokomatondo](https://github.com/kitokomatondo) 14 | 15 | [@crux-in-lan](https://github.com/crux-in-lan) 16 | 17 | [@SaitejaVemula](https://github.com/SaitejaVemula) 18 | 19 | [@mehul1011](https://github.com/mehul1011) 20 | 21 | [@VidhyaJayakumar](https://github.com/VidhyaJayakumar) 22 | 23 | [@shubhamd99](https://github.com/shubhamd99) 24 | 25 | [@dejiabiola](https://github.com/dejiabiola) 26 | 27 | [@lisapnct](https://github.com/lisapnct) 28 | 29 | [@Sysonec](https://github.com/Sysonec) 30 | 31 | [@markg29](https://github.com/markg29) 32 | 33 | [@Kallinicos](https://github.com/Kallinicos) 34 | 35 | [@jflores3531](https://github.com/jflores3531) 36 | 37 | [@MLit10](https://github.com/MLit10) 38 | 39 | [@countOfMonteCristo13] (https://github.com/@countOfMonteCristo13) 40 | 41 | [@BARANLANKA](https://github.com/BARANLANKA) 42 | 43 | [@Edmonanto](https://github.com/Edmonanto) 44 | 45 | [@BARANLANKA](https://github.com/BARANLANKA) 46 | 47 | [@steveburton](https://github.com/SteveBurtonWebDev) 48 | 49 | [@Ejiro-Asiuwhu](https://github.com/ejirocodes) 50 | 51 | [@borason](https://github.com/borason) 52 | 53 | [@charley81](https://github.com/charley81) 54 | 55 | [@alon1525](https://github.com/alon1525) 56 | 57 | [@CedarSky](https://github.com/ChrissyHandley) 58 | 59 | [@paulbillings](https://github.com/paulbillings) 60 | 61 | [@chantelletjie](https://github.com/chantelletjie) 62 | 63 | [@haiivan](https://github.com/haiivan) 64 | 65 | [@ricksnow26](https://github.com/ricksnow26) 66 | 67 | [@itshally](https://github.com/itshally) 68 | 69 | [@joshuafolorunsho](https://github.com/joshuafolorunsho) 70 | 71 | [@codepol](https://github.com/codepol) 72 | 73 | [@sandy8169](https://github.com/sandy8169) 74 | 75 | [@princeo1](https://github.com/princeo1) 76 | 77 | [@Itailevi420](https://github.com/Itailevi420) 78 | 79 | [@p4avinash](https://github.com/p4avinash) 80 | 81 | [@mughees-asif](https://github.com/mughees-asif) 82 | 83 | [@FrancoMuniz](https://github.com/FrancoMuniz) 84 | 85 | [@tpartridge1](https://github.com/tpartridge1) 86 | 87 | [@felipegcruz](https://github.com/felipegcruz) 88 | 89 | [@Umair-1119](https://github.com/Umair-1119) 90 | 91 | [@ihouwat](https://github.com/ihouwat) 92 | 93 | [@wilsonzeg](https://github.com/wilsonzeg) 94 | 95 | [@VelizarStavrev](https://github.com/VelizarStavrev) 96 | 97 | [@javfue](https://github.com/javfue) 98 | 99 | [@Ram-1984](https://github.com/Ram-1984) 100 | 101 | [@CTMBeast](https://github.com/CTMBeast) 102 | 103 | [@AmrithaM](https://github.com/AmrithaM) 104 | 105 | [@andy890275](https://github.com/andy890275) 106 | 107 | [@stanluxembourg](https://github.com/stanluxembourg) 108 | 109 | [@fumiadeyemi](https://github.com/fumiadeyemi) 110 | 111 | [@elenaandersson](https://github.com/elenaandersson) 112 | 113 | [@khushbooJangle](https://github.com/khushbooJangle) 114 | 115 | [@lakshmivardini-369](https://github.com/@lakshmivardini-369) 116 | 117 | [@eduardoramosdev](https://github.com/eduardoramosdev) 118 | 119 | [@Gittenger](https://github.com/gittenger) 120 | 121 | [@amita1996](https://github.com/amita1996) 122 | 123 | [@nnhhiilliisstt](https://github.com/nnhhiilliisstt) 124 | 125 | [@Gajhendran](https://github.com/Gajhendran) 126 | 127 | [@akshhat](https://github.com/akshhat) 128 | 129 | [@prakharbitspilani](https://github.com/prakharbitspilani) 130 | 131 | [@Ngokapat](https://github.com/Ngokapat/) 132 | 133 | [@toscanoGithub](https://github.com/toscanoGithub) 134 | 135 | [@naemeh-adl](https://github.com/naemeh-adl) 136 | 137 | [@Anjaneyamustoor](https://github.com/anjaneyamustoor) 138 | 139 | [@Ngokapat](https://github.com/Ngokapat/) 140 | 141 | [@Mwilke08](https://github.com/mwilke08/) 142 | 143 | [@JagveerGagaan](https://github.com/Jagveergagaan) 144 | 145 | [@idumanli](https://github.com/idumanli/) 146 | 147 | [@harshcut](https://github.com/harshcut/) 148 | 149 | [@TarrynGouveris](https://github.com/TarrynGouveris) 150 | 151 | [@achilleleal](https://github.com/achilleleal) 152 | 153 | [@TarrynGouveris](https://github.com/TarrynGouveris) 154 | 155 | [@chettriyuvraj](https://github.com/chettriyuvraj) 156 | 157 | [@gustnbones](https://github.com/gustnbones) 158 | 159 | [@ohnomig](https://github.com/ohnomig) 160 | 161 | [@Rapyra](https://github.com/Rapyra/) 162 | 163 | [@piincher](https://github.com/piincher/) 164 | 165 | [@GoGi2712](https://github.com/GoGi2712/) 166 | 167 | [@AswinBarath](https://github.com/AswinBarath/) 168 | 169 | [@bregarulai](https://github.com/bregarulai/) 170 | 171 | [@Bhavna121](https://github.com/Bhavna121/) 172 | 173 | [@kunalprakash1309](https://github.com/kunalprakash1309/) 174 | 175 | [@Sara-2007](https://github.com/Sara-2007) 176 | 177 | [@Rishi-121](https:github.com/Rishi-121/) 178 | 179 | [@shamikakumar](https://github.com/shamikakumar) 180 | 181 | [@Vikramadithya10](https:github.com/Vikramadithya10/) 182 | 183 | [@amanbijalwan](https://github.com/amanbijalwan) 184 | 185 | [@ivioje](https:github.com/ivioje/) 186 | 187 | [@Nenamed](https:github.com/Nenamed/) 188 | 189 | [@Surya742](https://github.com/Surya742/) 190 | 191 | [@kyriakoszafeiropoulos](https:github.com/kyriakoszafeiropoulos/) 192 | 193 | [@suman-nath](https://github.com/suman-nath/) 194 | 195 | [@mohitsoni-dev](https://github.com/mohitsoni-dev/) 196 | 197 | [@KrishnaMahato](https://github.com/krishna9304/) 198 | 199 | [@Ashutosh00710](https://github.com/Ashutosh00710/) 200 | 201 | [@navdeepsingh4298](https://github.com/navdeepsingh4298) 202 | 203 | [@otfigo87](https:github.com/otfigo87/) 204 | 205 | [@Ashutosh00710](https:github.com/Ashutosh00710/) 206 | 207 | [@godnondsilva](https://github.com/godnondsilva/) 208 | 209 | [@AdityaSaroj](https:github.com/AdityaSaroj/) 210 | 211 | [@AnastasiaCortes](https:github.com/AnastasiaCortes) 212 | 213 | [@yessirali](https:github.com/yessirali) 214 | 215 | [@gsakshay](https://github.com/gsakshay) 216 | 217 | [@SkyC0der](https://github.com/SkyC0der) 218 | 219 | [@Harsh](https://github.com/xpharsh) 220 | 221 | [@StrykerKent](https://github.com/StrykerKent) 222 | 223 | [@Davekibh](https://github.com/Davekibh) 224 | 225 | [@lonecreationwastaken](https://github.com/lonecreationwastaken) 226 | 227 | [@mrsindelic](https://github.com/mrsindelic) 228 | 229 | [@Panchowasaki](https://gibhub.com/panchowasaki) 230 | 231 | [@adamwojnicki](https://github.com/adamwojnicki) 232 | 233 | [@Panchowasaki](https://gibhub.com/panchowasaki) 234 | 235 | [@PleaBanshee](https://github.com/PleaBanshee) 236 | 237 | [@AakashChahal](https://github.com/AakashChahal) 238 | 239 | [@Iftee97](https://github.com/Iftee97) 240 | 241 | [@AAD93](https://github.com/AAD93) 242 | 243 | [@Daarkinvaader](http://github.com/Daarkinvaader) 244 | 245 | [@rinaldopasa](https://github.com/rinaldopasa) 246 | 247 | [@cntran](https://github.com/cntran) 248 | 249 | [@nishadmm](https://github.com/nishadmm) 250 | 251 | [@adityakumar48](https://github.com/adityakumar48) 252 | 253 | [@PleaBanshee](https://github.com/PleaBanshee) 254 | 255 | [@stefanjames](https://github.com/stefanjames) 256 | 257 | [@Bear-crawl](https://github.com/Bear-crawl) 258 | 259 | [@onkar444](https://github.com/onkar444/) 260 | 261 | [@RojinPm](https://github.com/RojinPm) 262 | 263 | [@fatin3ihsan](https://github.com/fatin3ihsan) 264 | 265 | [@christopher-force](https://github.com/christopher-force) 266 | 267 | [@sahilverma0433](https://github.com/cryptic-padawan) 268 | 269 | [@Lejla1502](https://github.com/Lejla1502) 270 | 271 | [@Mohit1310](https://github.com/Mohit1310) 272 | 273 | [@anayatkhan1](https://github.com/anayatkhan1) 274 | 275 | [@Lejla1502](https://github.com/Lejla1502) 276 | 277 | [@damaluku](https://github.com/damaluku) 278 | 279 | [@Saga-sanga](https://github.com/Saga-sanga) 280 | 281 | [@RedNoodle325](https://github.com/RedNoodle325) 282 | 283 | [@bunnyBites](https://github.com/bunnyBites) 284 | -[@Vigneshwaar](https://github.com/V6g1) 285 | [@proton029](https://github.com/proton029) 286 | -------------------------------------------------------------------------------- /COVID 19 Resource Site/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | COVID-19 Resource India 16 | 17 | 24 | 25 |
26 |
27 | 28 |
29 |
30 |
31 |

COVID-19 RESOURCE

32 |

ABOUT

33 |

This website is created by Anukiran Ghosh. 34 | Website concept inspiration- covid19-twitter.in

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 | -------------------------------------------------------------------------------- /COVID 19 Resource Site/disclaimer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Disclaimer 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | COVID-19 Resource India 16 | 17 | 24 | 25 |
26 |
27 | 28 |
29 |
30 |
31 |

COVID-19 RESOURCE

32 |

DISCLAIMER

33 |

This website redirects you to tweets from various cities related to COVID-19 emergency resource information. The website does not verify the authenticity of the information available. Please verify the authenticity of any information you recieve via this website yourself. 34 | This website or it's owner isn't responsible for any loss due to inaccurate information. This website doesn't feature any information by itself, it only redirects you to tweets related to your selection.

35 |
36 | 37 |
38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /COVID 19 Resource Site/quicktips.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quick Tips 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | COVID-19 Resource India 16 | 17 | 24 | 25 |
26 |
27 | 28 |
29 |
30 |
31 |

COVID-19 RESOURCE

32 |

QUICK TIPS

33 |

* Wear a mask whenever you go outside 34 | * Don't go outside unless necessary 35 | * Sanitize & wash your hands 36 | * Avoid touching your face & nose 37 | * Stay & work from home, if possible 38 | * Maintain Social Distancing 39 | * Avoid visiting crowded places 40 | * Don't believe in rumours 41 | * Get vaccinated

42 |
43 | 44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Fast typing/Typing.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | background:radial-gradient(#00faff ,#f981f3 60%); 4 | } 5 | h2 { 6 | animation: type 1.5s steps(17); 7 | overflow: hidden; 8 | white-space: nowrap; 9 | font-family: monospace; 10 | border-right: 16px solid black; 11 | width: 19ch; 12 | color:red; 13 | } 14 | 15 | 16 | @keyframes type { 17 | 0% { 18 | width: 0ch; 19 | } 20 | 100% { 21 | width: 19ch; 22 | } 23 | } 24 | Can { 25 | text-align:center; 26 | } 27 | #startButtonId { 28 | position:absolute; 29 | left:34%; 30 | top:195px; 31 | border-radius: 30%; 32 | border-bottom: 14px ; 33 | border-top: 14px ; 34 | width: 100px; 35 | height: 100px; 36 | -webkit-animation: spin 1.5s linear 37 | infinite; 38 | animation: spin 1.8s linear infinite; 39 | background-color: black; 40 | 41 | } 42 | #buttonText { 43 | color: white; 44 | text-align: center; 45 | font-size: x-large ; 46 | padding: 30x; 47 | } 48 | @-webkit-keyframes spin { 49 | 0% {-webkit-transform: rotate(0deg);} 50 | 100% { -webkit-transform: 51 | rotate(360deg); } 52 | } 53 | 54 | @keyframes spin { 55 | 0% { transform: rotate(0deg); } 56 | 100% { transform: rotate(360deg); } 57 | } -------------------------------------------------------------------------------- /Fast typing/Typing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Page Title 5 | 6 | 7 | 8 |

Welcome in my code.

9 |


10 | 11 | You can follow me on
👇👇👇👇👇👇👇👇 12 | 13 |
14 |
15 |
16 | SoloLearn 17 |
18 |
19 |







20 | My youtube channel 21 | 22 | -------------------------------------------------------------------------------- /Homepage-options/Landing-page-redesign/css/style.css: -------------------------------------------------------------------------------- 1 | /************************************ 2 | ********RESET STYLES***************** 3 | ************************************/ 4 | *, 5 | *::before, 6 | *::after { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | /************************************ 13 | *********BASE STYLES***************** 14 | ************************************/ 15 | 16 | html { 17 | font-size: 60%; /* This makes the default font size to 10px*/ 18 | } 19 | 20 | body { 21 | font-family: "Lato", sans-serif; 22 | font-weight: 300; 23 | line-height: 1.7; 24 | color: #f7f7f7; 25 | padding: 2.5rem; 26 | box-sizing: border-box; 27 | background: #333; 28 | } 29 | 30 | /************************************ 31 | *********HEADER STYLES*************** 32 | ************************************/ 33 | 34 | .header { 35 | height: 95vh; 36 | background-image: linear-gradient( 37 | to right bottom, 38 | rgba(51, 51, 51, 0.438), 39 | rgba(34, 34, 34, 0.411) 40 | ), 41 | url(../img/hero.jpg); 42 | background-size: cover; 43 | background-position: top; 44 | position: relative; 45 | clip-path: polygon(0% 0%, 100% 0%, 100% 75vh, 0% 100%); 46 | } 47 | 48 | .header__logo-box { 49 | position: absolute; 50 | top: 4rem; 51 | left: 4rem; 52 | } 53 | 54 | .header__logo { 55 | width: 4rem; 56 | } 57 | 58 | .header__text-box { 59 | position: absolute; 60 | top: 40%; 61 | left: 50%; 62 | transform: translate(-50%, -50%); 63 | text-align: center; 64 | width: 100%; 65 | } 66 | 67 | .heading-primary { 68 | color: #fff; 69 | text-transform: uppercase; 70 | backface-visibility: hidden; 71 | margin-bottom: 6rem; 72 | } 73 | 74 | .heading-primary--main { 75 | display: block; 76 | width: 100%; 77 | font-size: 4rem; 78 | font-weight: 700; 79 | letter-spacing: 1.8rem; 80 | animation-name: moveInLeft; 81 | animation-duration: 1s; 82 | animation-timing-function: ease-out; 83 | } 84 | 85 | .heading-primary--sub { 86 | display: block; 87 | font-size: 1.65rem; 88 | font-weight: 700; 89 | letter-spacing: 0.63rem; 90 | 91 | animation: moveInRight 1s; 92 | } 93 | 94 | @keyframes moveInLeft { 95 | 0% { 96 | opacity: 0; 97 | transform: translateX(-10rem); 98 | } 99 | 100 | 80% { 101 | transform: translateX(1rem); 102 | } 103 | 104 | 100% { 105 | opacity: 1; 106 | transform: translate(0); 107 | } 108 | } 109 | 110 | @keyframes moveInRight { 111 | 0% { 112 | opacity: 0; 113 | transform: translateX(10rem); 114 | } 115 | 116 | 80% { 117 | transform: translateX(-1rem); 118 | } 119 | 120 | 100% { 121 | opacity: 1; 122 | transform: translate(0); 123 | } 124 | } 125 | 126 | @keyframes moveInBottom { 127 | 0% { 128 | opacity: 0; 129 | transform: translateY(3rem); 130 | } 131 | 132 | 100% { 133 | opacity: 1; 134 | transform: translate(0); 135 | } 136 | } 137 | 138 | .btn:link.btn, 139 | .btn:visited { 140 | text-transform: uppercase; 141 | text-decoration: none; 142 | padding: 1rem 4rem; 143 | display: inline-block; 144 | border-radius: 10rem; 145 | transition: all 0.2s; 146 | position: relative; 147 | } 148 | 149 | .btn:hover { 150 | transform: translateY(-0.3rem); 151 | box-shadow: 0.1rem 1rem 2rem rgba(0, 0, 0, 0.3); 152 | } 153 | 154 | .btn:active { 155 | transform: translateY(-0.1rem); 156 | box-shadow: 0.1rem 0.5rem 1rem rgba(0, 0, 0, 0.3); 157 | } 158 | 159 | .btn--white { 160 | background-color: #fff; 161 | color: #777; 162 | } 163 | 164 | .btn::after { 165 | content: ""; 166 | display: inline-block; 167 | width: 100%; 168 | height: 100%; 169 | border-radius: 10rem; 170 | position: absolute; 171 | top: 0; 172 | left: 0; 173 | z-index: -1; 174 | transition: all 0.4s; 175 | } 176 | 177 | .btn-white::after { 178 | background-color: #fff; 179 | } 180 | .btn:hover::after { 181 | transform: scaleX(1.4) scaleY(1.6); 182 | opacity: 0; 183 | } 184 | 185 | .btn--animated { 186 | animation: moveInBottom 0.5s ease-out 0.75s; 187 | animation-fill-mode: backwards; 188 | } 189 | 190 | /************************************ 191 | ***********MAIN STYLES*************** 192 | ************************************/ 193 | .intro { 194 | color: #f7f7f7; 195 | line-height: 1.8; 196 | } 197 | 198 | .intro > h2 { 199 | text-transform: uppercase; 200 | text-align: center; 201 | display: inline-block; 202 | border-bottom: 3px solid #f7f7f7; 203 | margin-bottom: 2rem; 204 | padding: 2rem; 205 | cursor: pointer; 206 | transition: transform 0.3s; 207 | } 208 | 209 | .intro > h2:hover { 210 | box-shadow: 0 1rem 2rem rgba(0, 0, 0, 1); 211 | transform: scale(1.02); 212 | background: #f7f7f7; 213 | color: #333; 214 | } 215 | 216 | .bold { 217 | font-weight: 700; 218 | } 219 | main { 220 | font-size: 1.4rem; 221 | line-height: 1.6; 222 | } 223 | 224 | /************************************ 225 | ********SECTION STYLES*************** 226 | ************************************/ 227 | 228 | /* course-details SECTION */ 229 | 230 | .course-details { 231 | margin: 2rem 0 4rem; 232 | padding: 1rem 2rem; 233 | } 234 | 235 | .course-img { 236 | width: 90%; 237 | } 238 | 239 | .course-img img { 240 | max-width: 100%; 241 | border-radius: 4px; 242 | box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1); 243 | transition: transform 0.3s, box-shadow 0.3s; 244 | margin: 4rem; 245 | } 246 | 247 | .course-img img:hover { 248 | box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); 249 | transform: scale(1.02); 250 | } 251 | 252 | .instructor { 253 | margin: 4rem; 254 | } 255 | 256 | .instructor img { 257 | width: 50%; 258 | border-radius: 50%; 259 | margin-left: 20%; 260 | } 261 | /* employable-skills SECTION */ 262 | 263 | .employable-skills { 264 | padding: 4rem 2rem; 265 | margin-bottom: 4rem; 266 | background-color: #222; 267 | color: #fff; 268 | transform: skewY(-7deg); 269 | box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3); 270 | } 271 | 272 | .employable-skills h2 { 273 | text-align: center; 274 | text-shadow: 0 2px 5px rgba(255, 255, 255, 0.1); 275 | } 276 | 277 | .employable-skills > * { 278 | transform: skewY(7deg); 279 | } 280 | 281 | .employable-skills ul { 282 | display: block; 283 | margin: 0 auto; 284 | list-style: none; 285 | width: 80%; 286 | } 287 | 288 | .employable-skills li { 289 | padding: 2rem; 290 | display: block; 291 | text-align: center; 292 | margin-bottom: 1rem; 293 | border-left: 2px solid transparent; 294 | transition: all 0.4s; 295 | } 296 | 297 | .employable-skills li:hover { 298 | border-left: 2px solid rgb(15, 64, 170); 299 | } 300 | 301 | .employable-skills li:nth-of-type(even) { 302 | background: rgba(255, 255, 255, 0.01); 303 | border-radius: 4px; 304 | } 305 | 306 | .employable-skills a:visited, 307 | .employable-skills a:link { 308 | text-decoration: none; 309 | color: inherit; 310 | } 311 | 312 | .icon { 313 | vertical-align: middle; 314 | display: inline-block; 315 | height: 2.5rem; 316 | margin-right: 1rem; 317 | } 318 | 319 | .icon img { 320 | height: 100%; 321 | } 322 | 323 | /************************************ 324 | *********FOOTER STYLES*************** 325 | ************************************/ 326 | footer { 327 | margin-top: 10rem; 328 | padding: 1rem; 329 | /* background: linear-gradient(to right, rgb(16, 109, 70), #1ccae9); */ 330 | background: #222; 331 | box-shadow: 3px -3px 5px rgba(0, 0, 0, 0.6), -3px 3px 5px rgba(0, 0, 0, 0.6); 332 | } 333 | 334 | footer a:link, 335 | footer a:visited { 336 | color: #f7f7f7; 337 | font-weight: 900; 338 | font-size: 1.2rem; 339 | text-decoration: none; 340 | text-shadow: 0px 0px 5px #111; 341 | } 342 | 343 | footer p { 344 | font-weight: 300; 345 | font-size: 1.2rem; 346 | text-align: center; 347 | text-transform: uppercase; 348 | color: #fff; 349 | text-shadow: 0px 0px 5px #111; 350 | } 351 | 352 | footer p span { 353 | display: block; 354 | margin: 1rem; 355 | } 356 | 357 | /* _________________________________________ 358 | ________________MEDIA QUERIES_______________ 359 | ____________________________________________*/ 360 | 361 | @media (min-width: 700px) { 362 | html { 363 | font-size: 75%; 364 | } 365 | 366 | .course-details p, 367 | .course-img { 368 | max-width: 80vw; 369 | display: block; 370 | margin: 2rem auto; 371 | } 372 | 373 | .employable-skills { 374 | padding: 6rem; 375 | transform: skewY(-5deg); 376 | } 377 | 378 | .employable-skills > * { 379 | transform: skewY(5deg); 380 | } 381 | } 382 | 383 | @media (min-width: 1024px) { 384 | html { 385 | font-size: 80%; 386 | } 387 | 388 | main { 389 | max-width: 90vw; 390 | margin: 6rem auto 0; 391 | display: flex; 392 | justify-content: space-around; 393 | align-items: stretch; 394 | } 395 | 396 | .course-details { 397 | width: 38vw; 398 | } 399 | 400 | .employable-skills { 401 | width: 45vw; 402 | } 403 | 404 | .employable-skills, 405 | .employable-skills > * { 406 | transform: skew(0); 407 | } 408 | 409 | .employable-skills { 410 | padding: 1.5rem; 411 | border-radius: 4px; 412 | text-align: center; 413 | } 414 | 415 | .employable-skills h2 { 416 | margin-bottom: 4rem; 417 | } 418 | 419 | .icon { 420 | display: block; 421 | margin: 0 auto 1rem; 422 | height: 3rem; 423 | } 424 | 425 | .employable-skills ul { 426 | margin-bottom: 3rem; 427 | font-size: 1.2rem; 428 | display: grid; 429 | grid-template-columns: 1fr 1fr 1fr; 430 | grid-gap: 3rem 2rem; 431 | font-weight: 100; 432 | } 433 | } 434 | 435 | @media (min-width: 2000px) { 436 | html { 437 | font-size: 90%; 438 | } 439 | 440 | main { 441 | max-width: 80%; 442 | margin-top: 4rem; 443 | } 444 | } 445 | -------------------------------------------------------------------------------- /Homepage-options/Landing-page-redesign/img/AndreiNeagoie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/Landing-page-redesign/img/AndreiNeagoie.jpg -------------------------------------------------------------------------------- /Homepage-options/Landing-page-redesign/img/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/Landing-page-redesign/img/Logo.png -------------------------------------------------------------------------------- /Homepage-options/Landing-page-redesign/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/Landing-page-redesign/img/favicon.png -------------------------------------------------------------------------------- /Homepage-options/Landing-page-redesign/img/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/Landing-page-redesign/img/hero.jpg -------------------------------------------------------------------------------- /Homepage-options/Landing-page-redesign/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | A Web Developer's Journey 8 | 14 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 25 | 26 | 27 |
28 |
29 |

30 | Web Development 31 | My journey so far 32 |

33 | Learn More 34 |
35 |
36 |
37 |
38 |

A summary of it all

39 |
40 |

41 | Hi there,

42 | My name is Ejiro Asiuwhu, I want to be a world class Web Developer / 43 | Software Engineer. I have an unusual passion for coding, software, 44 | && technlogy in general. 45 |

46 |

47 | I enrolled in The Complete Web Developer Zero to Mastery Course 48 | taught by Andrei Neagoie. 49 |

50 |

51 | Taking this course has helped improve my web development skill-set 52 | particularly in JavaScript. Andrei made me realise the core of being 53 | a web developer, which is JavaScript. 54 |

55 |

56 | By taking this course, I have learnt 57 | REAL industry skills necessary in 2019 and 58 | beyond. 59 |

60 |
61 |
62 | Andrei Neagoie Course Instructor 66 |

67 | Andrei Neagoie Course Developer / InstructorDeveloper. I can teach 68 | you to code 69 |

70 |
71 |
72 | Course image 76 |
77 |
78 | 79 |
80 |

Web Development Skills

81 | 82 | 260 |
261 |
262 | 263 | 278 | 280 | 281 | 282 | 283 | -------------------------------------------------------------------------------- /Homepage-options/Landing-page-redesign2/index6.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/Landing-page-redesign2/index6.html -------------------------------------------------------------------------------- /Homepage-options/index-redesign/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | ZTM Course Details 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

HTML5! A Beginning with Andrei

19 | 20 |
21 |
22 | 23 |
24 |

Why take this Course?

25 |

26 | I want to work as a web developer of the highest level..
There are many things that I know and know 27 | how to do perfectly,
but I want to expand my skills and do more..
I want to learn REAL industry 28 | skills that are necessary in 29 | 2019.. 30 |

Sooo hope that this course will help me to succeed .. 31 |

32 |
33 | Course image 35 |
36 |
37 | 38 |
39 |

Employable Skills in 2020:

40 | 41 | 140 | 141 |
142 | 143 | 144 | 145 | 146 |
147 | 148 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /Homepage-options/index-redesign/style.css: -------------------------------------------------------------------------------- 1 | /************************************ 2 | ********RESET STYLES***************** 3 | ************************************/ 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | margin: 0; 9 | padding: 0; 10 | box-sizing: border-box; 11 | } 12 | 13 | 14 | /************************************ 15 | *********BASE STYLES***************** 16 | ************************************/ 17 | 18 | html { 19 | font-size: 62.5%; 20 | /* This makes the default font size to 10px*/ 21 | background-color: #edeff3; 22 | } 23 | 24 | body { 25 | font-size: 1rem; 26 | font-family: 'Lato', sans-serif; 27 | color: #111; 28 | } 29 | 30 | 31 | /************************************ 32 | *********HEADER STYLES*************** 33 | ************************************/ 34 | 35 | header { 36 | background-color: #111; 37 | color: #fff; 38 | text-align: center; 39 | padding: 2rem; 40 | box-shadow: 0 .5rem 2rem rgba(0, 0, 0, 0.1); 41 | } 42 | 43 | header h1 { 44 | font-size: 2.8rem; 45 | text-transform: uppercase; 46 | font-weight: 300; 47 | text-shadow: 0 2px 5px rgba(255, 255, 255, 0.2); 48 | word-spacing: 1.4rem; 49 | } 50 | 51 | header h1 i { 52 | color: orange; 53 | text-shadow: none; 54 | } 55 | 56 | 57 | /************************************ 58 | ***********MAIN STYLES*************** 59 | ************************************/ 60 | 61 | main h2 { 62 | text-align: center; 63 | font-size: 2rem; 64 | margin: 2rem 0; 65 | } 66 | 67 | main { 68 | font-size: 1.4rem; 69 | line-height: 1.6; 70 | } 71 | 72 | 73 | /************************************ 74 | ********SECTION STYLES*************** 75 | ************************************/ 76 | 77 | 78 | /* course-details SECTION */ 79 | 80 | .course-details { 81 | margin: 2rem 0 4rem; 82 | padding: 1rem 2rem; 83 | } 84 | 85 | .course-details h2 { 86 | text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); 87 | } 88 | 89 | .course-img { 90 | margin-top: 2rem; 91 | max-width: 100%; 92 | } 93 | 94 | .course-img img { 95 | max-width: 100%; 96 | border-radius: 4px; 97 | box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1); 98 | transition: transform 0.3s, box-shadow .3s; 99 | } 100 | 101 | .course-img img:hover { 102 | box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); 103 | transform: scale(1.02); 104 | } 105 | 106 | 107 | /* employable-skills SECTION */ 108 | 109 | .employable-skills { 110 | padding: 4rem 2rem; 111 | margin-bottom: 4rem; 112 | background-color: #111; 113 | color: #fff; 114 | transform: skewY(-7deg); 115 | box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3); 116 | } 117 | 118 | .employable-skills h2 { 119 | text-align: center; 120 | text-shadow: 0 2px 5px rgba(255, 255, 255, 0.1); 121 | } 122 | 123 | .employable-skills>* { 124 | transform: skewY(7deg); 125 | } 126 | 127 | .employable-skills ul { 128 | display: block; 129 | margin: 0 auto; 130 | list-style: none; 131 | width: 80%; 132 | /* max-width: 15rem; */ 133 | } 134 | 135 | .employable-skills li { 136 | padding: 1rem; 137 | display: block; 138 | text-align: center; 139 | margin-bottom: 1rem; 140 | border-left: 2px solid transparent; 141 | transition: all .4s; 142 | } 143 | 144 | .employable-skills li:hover { 145 | border-left: 2px solid orangered; 146 | } 147 | 148 | .employable-skills li:nth-of-type(even) { 149 | background: rgba(255, 255, 255, 0.01); 150 | border-radius: 4px; 151 | } 152 | 153 | 154 | /* .employable-skills li:last-child { 155 | margin-bottom: 1rem; 156 | } */ 157 | 158 | .employable-skills a:visited, 159 | .employable-skills a:link { 160 | text-decoration: none; 161 | color: inherit; 162 | } 163 | 164 | .icon { 165 | vertical-align: middle; 166 | display: inline-block; 167 | height: 2.5rem; 168 | margin-right: 1rem; 169 | } 170 | 171 | .icon img { 172 | height: 100%; 173 | } 174 | 175 | h1 { 176 | text-align: center; 177 | } 178 | 179 | .course_outcome { 180 | font-size: 20px; 181 | word-spacing: 1.5px; 182 | text-align: center; 183 | } 184 | 185 | .blue { 186 | color: blue; 187 | } 188 | 189 | h3 { 190 | margin-top: 10rem; 191 | font-weight: bold; 192 | margin-left: 5px; 193 | } 194 | 195 | .form { 196 | padding: 2px; 197 | font-size: 15px; 198 | margin-top: 10px; 199 | margin-bottom: 10px; 200 | } 201 | 202 | .edit { 203 | padding: 0px; 204 | margin-top: 30px; 205 | bottom: 50px; 206 | padding-right: -80px; 207 | } 208 | 209 | .feedback { 210 | display: flex; 211 | justify-content: center; 212 | align-items: center; 213 | flex-direction: column; 214 | width: 800px; 215 | margin-top: 30px; 216 | margin-left: 300px; 217 | height: 300px; 218 | border-radius: 50px; 219 | background: #edeff3; 220 | box-shadow: -20px -20px 60px #c9cbcf, 20px 20px 60px #ffffff; 221 | padding-bottom: 80px; 222 | } 223 | 224 | .tex { 225 | font-size: 30px; 226 | } 227 | 228 | .main-div { 229 | transform: translate(-50%, -50%); 230 | } 231 | 232 | .btn { 233 | text-decoration: none; 234 | text-transform: uppercase; 235 | color: #000; 236 | background-color: #ddbea9; 237 | outline: none; 238 | border: 2px solid #000; 239 | padding: 10px; 240 | border-radius: 10%; 241 | margin-top: 30px; 242 | margin-left: 150px; 243 | font-weight: bold; 244 | box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.75); 245 | cursor: pointer; 246 | transition: box-shadow .2s ease-in-out, background .2s ease-in-out, color .2s ease-in; 247 | filter: drop-shadow(3px 10px 4px #eae2b7); 248 | } 249 | 250 | .btn:hover { 251 | background-color: #000; 252 | color: whitesmoke; 253 | } 254 | 255 | .btn:active { 256 | background-color: #cb997e; 257 | box-shadow: 0px -1px 0px -1px; 258 | transition: all .3s ease 259 | } 260 | 261 | .increase { 262 | padding: 5px; 263 | } 264 | 265 | #increasesize { 266 | padding: 10px; 267 | } 268 | 269 | 270 | /************************************ 271 | *********FOOTER STYLES*************** 272 | ************************************/ 273 | 274 | footer { 275 | margin-top: 50px; 276 | padding: 1rem; 277 | /* background: linear-gradient(#fff, #f3f3f3); */ 278 | background-color: #111; 279 | color: #fff; 280 | } 281 | 282 | footer a:link, 283 | footer a:visited { 284 | color: #fff; 285 | font-weight: 400; 286 | text-decoration: none; 287 | } 288 | 289 | footer p { 290 | font-weight: 300; 291 | font-size: 1.2rem; 292 | text-align: center; 293 | text-transform: uppercase; 294 | color: #999; 295 | } 296 | 297 | .name { 298 | color: #fff; 299 | } 300 | 301 | footer p span { 302 | display: block; 303 | margin: 1rem 0; 304 | } 305 | 306 | 307 | /* _________________________________________ 308 | ________________MEDIA QUERIES_______________ 309 | ____________________________________________*/ 310 | 311 | @media (min-width:700px) { 312 | html { 313 | font-size: 75%; 314 | } 315 | .course-details p, 316 | .course-img { 317 | max-width: 80vw; 318 | display: block; 319 | margin: 2rem auto; 320 | } 321 | .employable-skills { 322 | padding: 6rem; 323 | transform: skewY(-5deg); 324 | } 325 | .employable-skills>* { 326 | transform: skewY(5deg); 327 | } 328 | } 329 | 330 | @media (min-width: 1024px) { 331 | html { 332 | font-size: 80%; 333 | } 334 | main { 335 | max-width: 90vw; 336 | margin: 6rem auto 0; 337 | display: flex; 338 | justify-content: space-around; 339 | align-items: stretch; 340 | } 341 | .course-details { 342 | width: 38vw; 343 | } 344 | .employable-skills { 345 | width: 45vw; 346 | } 347 | .employable-skills, 348 | .employable-skills>* { 349 | transform: skew(0) 350 | } 351 | .employable-skills { 352 | padding: 1.5rem; 353 | border-radius: 4px; 354 | text-align: center; 355 | } 356 | .employable-skills h2 { 357 | margin-bottom: 4rem; 358 | } 359 | .icon { 360 | display: block; 361 | margin: 0 auto 1rem; 362 | height: 3rem; 363 | } 364 | .employable-skills ul { 365 | margin-bottom: 3rem; 366 | font-size: 1.2rem; 367 | display: grid; 368 | grid-template-columns: 1fr 1fr 1fr; 369 | grid-gap: 3rem 2rem; 370 | font-weight: 100; 371 | } 372 | } 373 | 374 | @media (min-width: 2000px) { 375 | html { 376 | font-size: 90%; 377 | } 378 | main { 379 | max-width: 80%; 380 | margin-top: 4rem; 381 | } 382 | } -------------------------------------------------------------------------------- /Homepage-options/index-redesign2/image/05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/index-redesign2/image/05.png -------------------------------------------------------------------------------- /Homepage-options/index-redesign2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML5 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |

HTML5! A Beginning with Andrei

17 | 18 | 25 |
26 |
27 |
28 |
29 |

Why I want to take this course?

30 |

I Want to be able to create a web applications...
31 | I have time, passion and consistancy to learn skills that are required...
32 | And it's just the beginning of my journey..
33 | I want to learn REAL industry skills that are necessary in 2019 .. 34 |

35 | 36 |

I am looking forward to absorbing as much as I can from this course!..

37 | 38 | 39 |
40 |
41 | 96 |
97 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /Homepage-options/index-redesign2/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 1em; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background-color: #B2BFC7; 8 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 9 | font-weight: 400; 10 | line-height: 1.45; 11 | color: black; 12 | } 13 | 14 | p { 15 | margin-bottom: 1.3em; 16 | } 17 | 18 | h1, 19 | h2, 20 | h3, 21 | h4 { 22 | margin: 1.414em 0 0.5em; 23 | font-weight: inherit; 24 | line-height: 1.2; 25 | } 26 | 27 | header > img { 28 | float: left; 29 | height: 55px; 30 | padding-right: 7px; 31 | } 32 | 33 | img { 34 | height: 48px; 35 | } 36 | 37 | h1 { 38 | margin-top: 0; 39 | font-size: 2.5em; 40 | } 41 | 42 | h2 { 43 | font-size: 1.2em; 44 | } 45 | 46 | h3 { 47 | font-size: 1em; 48 | } 49 | 50 | h4 { 51 | font-size: 0.8em; 52 | } 53 | 54 | small, 55 | .font_small { 56 | font-size: 0.707em; 57 | } 58 | 59 | .container { 60 | margin: 0 50px; 61 | display: grid; 62 | grid-template-columns: 2fr 1fr; 63 | } 64 | 65 | header { 66 | background: #457A9A; 67 | padding: 20px; 68 | margin: 0; 69 | } 70 | header h1 { 71 | float: left; 72 | color: rgb(255, 255, 255); 73 | margin: 0 auto; 74 | } 75 | 76 | .sidehead { 77 | padding-bottom: 15px; 78 | background-color: white; 79 | border-bottom: #e90043 solid; 80 | border-radius: 10px; 81 | border-right: #e90043 solid; 82 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 83 | } 84 | 85 | .flex { 86 | display: flex; 87 | flex-wrap: wrap; 88 | justify-content: flex-end; 89 | } 90 | 91 | nav a { 92 | text-decoration: none; 93 | color: #c70039; 94 | background-color: white; 95 | padding: 5px 10px; 96 | margin-right: 5px; 97 | border-radius: 5px; 98 | transition: 0.2s; 99 | } 100 | 101 | nav a:hover { 102 | /* box-shadow: inset 0 -26px 0 0 blue; */ 103 | color: black; 104 | background-color: yellow; 105 | } 106 | 107 | footer { 108 | padding: 20px 30px 20px; 109 | color: white; 110 | background-color: #457A9A; 111 | position: relative; 112 | right: 0; 113 | bottom: 0; 114 | left: 0; 115 | padding: 1rem; 116 | text-align: center; 117 | } 118 | 119 | footer span { 120 | font-weight: bold; 121 | } 122 | 123 | ul { 124 | list-style: none; 125 | } 126 | 127 | ul li { 128 | margin-bottom: 5px; 129 | } 130 | 131 | dd { 132 | margin-bottom: 20px; 133 | } 134 | 135 | .skills { 136 | margin-left: -10px; 137 | padding: 10px; 138 | } 139 | 140 | .skills a { 141 | font-size: 15px; 142 | display: block; 143 | text-decoration: none; 144 | color: #800025; 145 | } 146 | 147 | .skills:hover { 148 | /* box-shadow: inset 0 -26px 0 0 blue; */ 149 | background-color: white; 150 | border-radius: 10px; 151 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.10); 152 | transform: scale(2); 153 | transition: transform 1s; 154 | } 155 | 156 | #register { 157 | margin-bottom: 140px; 158 | } 159 | 160 | #descriptionimg { 161 | height: 80%; 162 | width: 80%; 163 | border-radius: 10px; 164 | } 165 | 166 | aside { 167 | text-align: center; 168 | } 169 | 170 | aside ul { 171 | float: left; 172 | text-align: center; 173 | } 174 | 175 | .ulone { 176 | float: left; 177 | margin-left: 10%; 178 | } 179 | 180 | .ultwo { 181 | float: right; 182 | margin-right: 10%; 183 | } 184 | 185 | main { 186 | text-align: justify; 187 | text-align: center; 188 | margin: 0; 189 | padding: 0; 190 | } 191 | 192 | #picbox { 193 | height: 473px; 194 | } 195 | .container1 { 196 | margin: auto; 197 | width: 60%; 198 | } 199 | .container1 h2 { 200 | font-size: 30px; 201 | font-weight: bolder; 202 | } 203 | 204 | #picbox > img { 205 | height: 400px; 206 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 207 | } 208 | 209 | @media screen and (max-width: 600px) { 210 | .container { 211 | margin: 0 10px; 212 | grid-template-columns: auto; 213 | } 214 | } 215 | @media (max-width: 1115px) { 216 | .container { 217 | display: block; 218 | } 219 | aside ul { 220 | margin: 0; 221 | padding: 0; 222 | } 223 | .ulone, 224 | .ultwo { 225 | float: none; 226 | margin: 0; 227 | } 228 | header { 229 | display: flex; 230 | flex-direction: column; 231 | justify-content: center; 232 | } 233 | ul.flex { 234 | justify-content: center; 235 | } 236 | #picbox { 237 | height: auto; 238 | } 239 | #picbox img { 240 | height: auto; 241 | } 242 | } 243 | 244 | @media (max-width: 778px) { 245 | header h1 img { 246 | display: block; 247 | margin: 0 auto; 248 | } 249 | 250 | header h1 { 251 | font-size: 2rem; 252 | padding: 10px; 253 | } 254 | } 255 | 256 | @media (max-width: 464px) { 257 | ul.flex { 258 | padding: 0; 259 | flex-direction: column; 260 | justify-content: center; 261 | align-items: center; 262 | } 263 | 264 | ul.flex li a { 265 | display: inline-block; 266 | width: 100%; 267 | text-align: center; 268 | } 269 | ul.flex li { 270 | width: 100%; 271 | } 272 | nav a { 273 | margin: 0; 274 | padding: 10px 0; 275 | } 276 | } 277 | -------------------------------------------------------------------------------- /Homepage-options/index-redesign3/img/java.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/index-redesign3/img/java.png -------------------------------------------------------------------------------- /Homepage-options/index-redesign3/img/programming.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/index-redesign3/img/programming.jpg -------------------------------------------------------------------------------- /Homepage-options/index-redesign3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Zero To Hero Course Details 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

The Complete Web Developer Bootcamp

18 | 19 |
20 |
21 | 22 |
23 |

Why take this Course?

24 |

25 | I wanted to increase my skill set beyond my undergraduate degree;
Studying Aerospace Engineering and coding websites as a hobby;
I want to learn REAL industry skills that are necessary in 2020 and beyond
Have also studied, 26 | Data Structures and Algorithms + Advanced JS from Andrei. Salute!
27 |

28 |
29 | Course image 30 |
31 |
32 | 33 |
34 |

Employable Skills in 2019:

35 | 36 | 131 | 132 |
133 | 134 |
135 | 136 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /Homepage-options/index-redesign3/style.css: -------------------------------------------------------------------------------- 1 | /************************************ 2 | ********RESET STYLES***************** 3 | ************************************/ 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | margin: 0; 9 | padding: 0; 10 | box-sizing: border-box; 11 | } 12 | 13 | 14 | /************************************ 15 | *********BASE STYLES***************** 16 | ************************************/ 17 | 18 | html { 19 | font-size: 62.5%; 20 | font-family: 'Oswald', sans-serif; 21 | /* This makes the default font size to 10px*/ 22 | } 23 | 24 | body { 25 | font-size: 1rem; 26 | background-color: #53b6f3; 27 | font-family: "Lato", sans-serif; 28 | color: black; 29 | } 30 | 31 | 32 | /************************************ 33 | *********HEADER STYLES*************** 34 | ************************************/ 35 | 36 | header { 37 | /* background-color: #53b6f3; */ 38 | color: #111; 39 | font-weight: bold; 40 | text-align: center; 41 | padding: 2rem; 42 | background: linear-gradient(145deg, #59c3ff, #4ba4db); 43 | box-shadow: 26px 26px 52px #3c83af, -26px -26px 52px #6ae9ff; 44 | } 45 | 46 | header h1 { 47 | font-size: 2.8rem; 48 | text-transform: uppercase; 49 | font-weight: 300; 50 | text-shadow: 0 2px 5px rgba(255, 255, 255, 0.2); 51 | word-spacing: 1.4rem; 52 | } 53 | 54 | header h1 i { 55 | color: orange; 56 | text-shadow: none; 57 | } 58 | 59 | 60 | /************************************ 61 | ***********MAIN STYLES*************** 62 | ************************************/ 63 | 64 | main h2 { 65 | text-align: center; 66 | font-size: 2rem; 67 | margin: 2rem 0; 68 | } 69 | 70 | main { 71 | font-size: 1.4rem; 72 | line-height: 1.6; 73 | } 74 | 75 | 76 | /************************************ 77 | ********SECTION STYLES*************** 78 | ************************************/ 79 | 80 | 81 | /* course-details SECTION */ 82 | 83 | .course-details { 84 | margin: 2rem 0 4rem; 85 | padding: 1rem 2rem; 86 | } 87 | 88 | .course-details h2 { 89 | text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); 90 | } 91 | 92 | .course-img { 93 | margin-top: 2rem; 94 | max-width: 100%; 95 | } 96 | 97 | .course-img img { 98 | max-width: 100%; 99 | border-radius: 4px; 100 | box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1); 101 | transition: transform 0.3s, box-shadow .3s; 102 | } 103 | 104 | .course-img img:hover { 105 | box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); 106 | transform: scale(1.02); 107 | } 108 | 109 | 110 | /* employable-skills SECTION */ 111 | 112 | .employable-skills { 113 | padding: 4rem 2rem; 114 | margin-bottom: 4rem; 115 | color: black; 116 | transform: skewY(-7deg); 117 | box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3); 118 | background: linear-gradient(145deg, #59c3ff, #4ba4db); 119 | box-shadow: 26px 26px 52px #3c83af, -26px -26px 52px #6ae9ff; 120 | } 121 | 122 | .employable-skills:hover { 123 | background: #53b6f3; 124 | box-shadow: inset 26px 26px 52px #3c83af, inset -26px -26px 52px #6ae9ff; 125 | } 126 | 127 | .employable-skills h2 { 128 | text-align: center; 129 | text-shadow: 0 2px 5px rgba(255, 255, 255, 0.1); 130 | } 131 | 132 | .employable-skills>* { 133 | transform: skewY(7deg); 134 | } 135 | 136 | .employable-skills ul { 137 | display: block; 138 | margin: 0 auto; 139 | list-style: none; 140 | width: 80%; 141 | /* max-width: 15rem; */ 142 | } 143 | 144 | .employable-skills li { 145 | padding: 1rem; 146 | display: block; 147 | text-align: center; 148 | margin-bottom: 1rem; 149 | border-left: 2px solid transparent; 150 | transition: all .4s; 151 | } 152 | 153 | .employable-skills li:hover { 154 | border-left: 2px solid orangered; 155 | } 156 | 157 | .employable-skills li:nth-of-type(even) { 158 | background: rgba(255, 255, 255, 0.01); 159 | border-radius: 4px; 160 | } 161 | 162 | 163 | /* .employable-skills li:last-child { 164 | margin-bottom: 1rem; 165 | } */ 166 | 167 | .employable-skills a:visited, 168 | .employable-skills a:link { 169 | text-decoration: none; 170 | color: inherit; 171 | } 172 | 173 | .icon { 174 | vertical-align: middle; 175 | display: inline-block; 176 | height: 2.5rem; 177 | margin-right: 1rem; 178 | } 179 | 180 | .icon img { 181 | height: 100%; 182 | } 183 | 184 | 185 | /************************************ 186 | *********FOOTER STYLES*************** 187 | ************************************/ 188 | 189 | footer { 190 | padding: 1rem; 191 | background-color: black; 192 | color: whitesmoke; 193 | } 194 | 195 | footer a:link, 196 | footer a:visited { 197 | /* color: black; */ 198 | font-weight: 400; 199 | text-decoration: none; 200 | } 201 | 202 | footer p { 203 | font-weight: 300; 204 | font-size: 1.2rem; 205 | text-align: center; 206 | text-transform: uppercase; 207 | color: #999; 208 | } 209 | 210 | footer p span { 211 | display: block; 212 | margin: 1rem 0; 213 | } 214 | 215 | .name { 216 | color: white; 217 | } 218 | 219 | .name:hover { 220 | -webkit-animation: glow 1s ease-in-out infinite alternate; 221 | -moz-animation: glow 1s ease-in-out infinite alternate; 222 | animation: glow 1s ease-in-out infinite alternate; 223 | } 224 | 225 | @-webkit-keyframes glow { 226 | from { 227 | text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; 228 | } 229 | to { 230 | text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6; 231 | } 232 | } 233 | 234 | 235 | /* _________________________________________ 236 | ________________MEDIA QUERIES_______________ 237 | ____________________________________________*/ 238 | 239 | @media (min-width:700px) { 240 | html { 241 | font-size: 75%; 242 | } 243 | .course-details p, 244 | .course-img { 245 | max-width: 80vw; 246 | display: block; 247 | margin: 2rem auto; 248 | } 249 | .employable-skills { 250 | padding: 6rem; 251 | transform: skewY(-5deg); 252 | } 253 | .employable-skills>* { 254 | transform: skewY(5deg); 255 | } 256 | } 257 | 258 | @media (min-width: 1024px) { 259 | html { 260 | font-size: 80%; 261 | } 262 | main { 263 | max-width: 90vw; 264 | margin: 6rem auto 0; 265 | display: flex; 266 | justify-content: space-around; 267 | align-items: stretch; 268 | } 269 | .course-details { 270 | width: 38vw; 271 | } 272 | .employable-skills { 273 | width: 45vw; 274 | } 275 | .employable-skills, 276 | .employable-skills>* { 277 | transform: skew(0) 278 | } 279 | .employable-skills { 280 | padding: 1.5rem; 281 | border-radius: 4px; 282 | text-align: center; 283 | } 284 | .employable-skills h2 { 285 | margin-bottom: 4rem; 286 | } 287 | .icon { 288 | display: block; 289 | margin: 0 auto 1rem; 290 | height: 3rem; 291 | } 292 | .employable-skills ul { 293 | margin-bottom: 3rem; 294 | font-size: 1.2rem; 295 | display: grid; 296 | grid-template-columns: 1fr 1fr 1fr; 297 | grid-gap: 3rem 2rem; 298 | font-weight: 100; 299 | } 300 | } 301 | 302 | @media (min-width: 2000px) { 303 | html { 304 | font-size: 90%; 305 | } 306 | main { 307 | max-width: 80%; 308 | margin-top: 4rem; 309 | } 310 | } -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Cinzel Decorative', cursive; 6 | } 7 | 8 | body { 9 | /*background-color: rgb(43, 43, 43); 10 | color: rgb(230, 248, 248);*/ 11 | background-color: #edeff3; 12 | } 13 | 14 | nav { 15 | margin-top: 10px; 16 | padding: 30px; 17 | background-color: rgb(225,225,225); 18 | } 19 | 20 | .logo img { 21 | height: 60px; 22 | width: 60px; 23 | border-radius: 50%; 24 | object-fit: cover; 25 | } 26 | 27 | .logo:hover { 28 | filter: drop-shadow(0 0 1rem crimson); 29 | } 30 | 31 | li a { 32 | text-decoration: none; 33 | font-size: 18px; 34 | color: white; 35 | } 36 | 37 | nav li { 38 | float: left; 39 | display: inline-flex; 40 | margin-top: -5.5%; 41 | margin-left: 100px; 42 | list-style-type: none; 43 | padding: 3%; 44 | } 45 | 46 | nav a:hover { 47 | color: rgb(253, 237, 9); 48 | } 49 | 50 | .contact_list { 51 | float: right; 52 | } 53 | 54 | #contact img { 55 | height: 30px; 56 | width: 30px; 57 | } 58 | 59 | #contact p { 60 | float: left; 61 | width: 80%; 62 | } 63 | 64 | #contact li { 65 | list-style: none; 66 | display: inline-block; 67 | } 68 | 69 | .bg-image img { 70 | width: 100%; 71 | height: 100%; 72 | background-position: center; 73 | background-repeat: no-repeat; 74 | background-size: 100%; 75 | background-color: black; 76 | filter: blur(4px); 77 | } 78 | 79 | .img-text { 80 | position: absolute; 81 | top: 70%; 82 | left: 35%; 83 | color: rgb(253, 237, 9); 84 | font-weight: bold; 85 | text-align: center; 86 | background-color: rgba(0, 0, 0, 0.5); 87 | z-index: 2; 88 | width: 35%; 89 | } 90 | 91 | .img-text button, 92 | .left_sec button, 93 | .right_sec button { 94 | background-color: #17A2B8; 95 | color: white; 96 | border-style: none; 97 | border-radius: 3%; 98 | padding: 2%; 99 | border-color: black; 100 | } 101 | 102 | .img-text button:hover, 103 | .left_sec button:hover, 104 | .right_sec button:hover { 105 | border-style: groove; 106 | background-color: white; 107 | color: #17A2B8; 108 | cursor: pointer; 109 | } 110 | 111 | .left_sec { 112 | border: 1px solid black; 113 | color: #FFC107; 114 | font-weight: bold; 115 | text-align: center; 116 | background-color: #343a40; 117 | margin-left: 30px; 118 | margin-top: 30px; 119 | width: 30%; 120 | float: left; 121 | /* border-radius: 50px; */ 122 | } 123 | 124 | .left_sec:hover { 125 | background: #343a40; 126 | box-shadow: 44px 44px 88px #2c3136, -44px -44px 88px #3c434a; 127 | border-radius: 2%; 128 | } 129 | 130 | .left_sec img { 131 | border-radius: 50%; 132 | width: 50%; 133 | height: 50%; 134 | } 135 | 136 | .right_sec { 137 | float: right; 138 | border: 1px solid black; 139 | color: #FFC107; 140 | font-weight: bold; 141 | text-align: center; 142 | background-color: #343a40; 143 | width: 60%; 144 | border-radius: 2%; 145 | } 146 | 147 | .right_sec img { 148 | float: left; 149 | border-radius: 10%; 150 | width: 25%; 151 | height: 30%; 152 | } 153 | 154 | .right_sec img:hover { 155 | cursor: pointer; 156 | } 157 | 158 | footer { 159 | color: #17A2B8; 160 | background-color: #343a40; 161 | margin-top: 70%; 162 | text-align: center; 163 | } 164 | 165 | a { 166 | text-decoration: none; 167 | } -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/AndreiNeagoie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/AndreiNeagoie.jpg -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/bg.jpg -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/dsa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/dsa.jpg -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/eh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/eh.jpg -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/faang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/faang.jpg -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/facebook.png -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/favicon.png -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/insta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/insta.png -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/joiner to senior web.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/joiner to senior web.jpg -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/logo.png -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/mail.png -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/ml.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/ml.jpg -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/python.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/python.jpg -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/react.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/react.jpg -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/twitter.png -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/web.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/web.jpg -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/images/whatsapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Homepage-options/redesigning-landing-page/images/whatsapp.png -------------------------------------------------------------------------------- /Homepage-options/redesigning-landing-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | RedesigningLandingPage 21 | 22 | 23 | 24 | 25 | 26 | 61 | 62 |
63 | 64 |
65 | background image 66 |
67 |
68 |

WEB DEVELOPEMENT

69 |
70 |

Zero = > Mastery

71 |

72 | 73 |
74 | 75 | 76 |
77 | 78 |
79 |

Instructor

80 | AndreiNeagoie 81 |

Andrei Neagoie

82 |

Senior Software Developer turned Instructor

83 | 84 |
85 | 86 | 87 | 88 | 89 | 90 |

91 |

92 |
93 | 94 | 95 |
96 |

Andrei Courses

97 |
98 | python course logo 99 |

Complete Python Developer in 2020: Zero to Mastery

100 |

101 |
102 | 103 |
104 | web dev course logo 105 |

The Complete Web Developer in 2020: Zero to Mastery

106 |

107 |
108 | 109 |
110 | DSA course logo 111 |

Master the Coding Interview: Data Structures + Algorithms

112 |

113 |
114 | 115 |
116 | react course logo 117 |

Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)

118 |

119 |
120 | 121 |
122 | python course logo 123 |

Complete Machine Learning and Data Science: Zero to Mastery

124 |

125 |
126 | 127 |
128 | python course logo 129 |

The Complete Junior to Senior Web Developer Roadmap (2020)

130 |

131 |
132 | 133 |
134 | ethical hacking course logo 135 |

Complete Ethical Hacking Bootcamp 2020: Zero to Mastery

136 |

137 |
138 | 139 |
140 | faang course logo 141 |

Master the Coding Interview: Big Tech (FAANG) Interviews

142 |

143 |
144 |
145 |
146 |

147 | 148 | 149 | 150 | 160 | 161 | 162 | 163 | -------------------------------------------------------------------------------- /Loader/Loader.css: -------------------------------------------------------------------------------- 1 | /* Made by sahil verma*/ 2 | 3 | 4 | #ner{ 5 | background: #DFF6FF; 6 | height:100vh; 7 | width:100vw; 8 | position:absolute; 9 | top:0; 10 | left:0; 11 | z-index:500; 12 | } 13 | 14 | .loader { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | 19 | } 20 | 21 | 22 | /* .loader span { 23 | font-family: arial; 24 | font-size: 20px; 25 | color: rgba(255,255,255,.1); 26 | display: inline-block; 27 | transition: all .5s; 28 | animation: animate 5s infinite; 29 | } */ 30 | /* .loader span:nth-child(1) { 31 | animation-delay: .1s; 32 | } 33 | .loader span:nth-child(2) { 34 | animation-delay: .2s; 35 | } 36 | .loader span:nth-child(3) { 37 | animation-delay: .3s; 38 | } 39 | .loader span:nth-child(4) { 40 | animation-delay: .4s; 41 | } 42 | .loader span:nth-child(5) { 43 | animation-delay: .5s; 44 | } 45 | .loader span:nth-child(6) { 46 | animation-delay: .6s; 47 | } 48 | .loader span:nth-child(7) { 49 | animation-delay: .7s; 50 | } */ 51 | /* @keyframes animate { 52 | 0% { 53 | color: rgba(0,0,0,.9); 54 | transform: translateY(0); 55 | margin-left: 0; 56 | } 57 | 25% { 58 | color: #ff0000; 59 | transform: translateY(-15px); 60 | margin-left: 10px; 61 | text-shadow: 0 15px 5px rgba(255,255,255,6); 62 | } 63 | 100% { 64 | color: rgba(255,255,255,.9); 65 | transform: translateY(0); 66 | margin-left: 0; 67 | } 68 | } */ 69 | 70 | /* THANKS FOR WISITING */ -------------------------------------------------------------------------------- /Loader/Loader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Page Title 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /No idea: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Profile Card 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

Hi, I have no idea what I'm doing :)

16 | Oops, it's not loading, sorry! 17 |
18 |
19 |
20 | 21 |
22 |

Enjoy this while you're as confused as I am ¯\_(ツ)_/¯ 23 | 24 |

27 | 28 |
29 | 30 | 31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /Pokedex/assets/bug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/bug.png -------------------------------------------------------------------------------- /Pokedex/assets/dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/dark.png -------------------------------------------------------------------------------- /Pokedex/assets/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/dragon.png -------------------------------------------------------------------------------- /Pokedex/assets/electric.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/electric.png -------------------------------------------------------------------------------- /Pokedex/assets/fairy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/fairy.png -------------------------------------------------------------------------------- /Pokedex/assets/fighting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/fighting.png -------------------------------------------------------------------------------- /Pokedex/assets/fire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/fire.png -------------------------------------------------------------------------------- /Pokedex/assets/flying.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/flying.png -------------------------------------------------------------------------------- /Pokedex/assets/ghost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/ghost.png -------------------------------------------------------------------------------- /Pokedex/assets/grass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/grass.png -------------------------------------------------------------------------------- /Pokedex/assets/ground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/ground.png -------------------------------------------------------------------------------- /Pokedex/assets/ice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/ice.png -------------------------------------------------------------------------------- /Pokedex/assets/normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/normal.png -------------------------------------------------------------------------------- /Pokedex/assets/poison.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/poison.png -------------------------------------------------------------------------------- /Pokedex/assets/psychic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/psychic.png -------------------------------------------------------------------------------- /Pokedex/assets/question_mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/question_mark.png -------------------------------------------------------------------------------- /Pokedex/assets/rock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/rock.png -------------------------------------------------------------------------------- /Pokedex/assets/steel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/steel.png -------------------------------------------------------------------------------- /Pokedex/assets/water.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/assets/water.png -------------------------------------------------------------------------------- /Pokedex/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/Pokedex/favicon.ico -------------------------------------------------------------------------------- /Pokedex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pokedex 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |

Type the pokemon name or number

13 |
14 | 15 | 16 |
17 |
18 | Unable to find request Pokemon, please insert a valid Pokemon name or number. 19 |
20 |
21 |
22 |

23 | 24 |
25 | 26 | 27 |
28 |
29 |
30 |
Name:
31 |
HP:
32 |
Attack:
33 |
Defense:
34 |
Sp.Attack:
35 |
Sp.Defense:
36 |
Speed:
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | 51 | -------------------------------------------------------------------------------- /Pokedex/index.js: -------------------------------------------------------------------------------- 1 | async function load(){ 2 | var pokemon = document.getElementById("input").value.toLowerCase(); 3 | const resp = await fetch("https://pokeapi.co/api/v2/pokemon/" + pokemon); 4 | if (resp.status == 404) { 5 | document.querySelector('#error').style.display = 'block'; 6 | return; 7 | } 8 | document.querySelector('#error').style.display = 'none'; 9 | const json = await resp.json(); 10 | 11 | document.querySelector('#image').src = json.sprites.front_default; 12 | document.querySelector('#type1').src = './assets/' + json.types[0].type.name + '.png'; 13 | document.querySelector('#type2').src = json.types.length > 1 ? 14 | './assets/' + json.types[1].type.name + '.png' : './assets/default.png'; 15 | document.querySelector('#id').innerHTML = 'Nº ' + json.id; 16 | 17 | document.querySelector('#name').innerHTML = json.name[0].toUpperCase() + json.name.slice(1); 18 | document.querySelector('#hp').innerHTML = json.stats[0].base_stat; 19 | document.querySelector('#at').innerHTML = json.stats[1].base_stat; 20 | document.querySelector('#df').innerHTML = json.stats[2].base_stat; 21 | document.querySelector('#spat').innerHTML = json.stats[3].base_stat; 22 | document.querySelector('#spdf').innerHTML = json.stats[4].base_stat; 23 | document.querySelector('#speed').innerHTML = json.stats[5].base_stat; 24 | 25 | document.querySelector('#card').style.color = "black"; 26 | switch (json.types[0].type.name){ 27 | case 'water': 28 | document.querySelector('#card').style.backgroundColor = "blue"; 29 | break; 30 | case 'grass': 31 | document.querySelector('#card').style.backgroundColor = "green"; 32 | break; 33 | case 'fire': 34 | document.querySelector('#card').style.backgroundColor = "#fe5e52"; 35 | break; 36 | case 'poison': 37 | document.querySelector('#card').style.backgroundColor = "purple"; 38 | break; 39 | case 'electric': 40 | document.querySelector('#card').style.backgroundColor = "yellow"; 41 | break; 42 | case 'normal': 43 | document.querySelector('#card').style.backgroundColor = "#e8a27f"; 44 | break; 45 | case 'fighting': 46 | document.querySelector('#card').style.backgroundColor = "orange"; 47 | break; 48 | case 'flying': 49 | document.querySelector('#card').style.backgroundColor = "#73c7ca"; 50 | break; 51 | case 'ground': 52 | document.querySelector('#card').style.backgroundColor = "#dc723f"; 53 | break; 54 | case 'rock': 55 | document.querySelector('#card').style.backgroundColor = "#90411b"; 56 | break; 57 | case 'bug': 58 | document.querySelector('#card').style.backgroundColor = "#bff01d"; 59 | break; 60 | case 'dragon': 61 | document.querySelector('#card').style.backgroundColor = "#6a21c6"; 62 | break; 63 | case 'dark': 64 | document.querySelector('#card').style.backgroundColor = "black"; 65 | document.querySelector('#card').style.color = "white"; 66 | break; 67 | case 'ghost': 68 | document.querySelector('#card').style.backgroundColor = "#3e1170"; 69 | document.querySelector('#card').style.color = "white"; 70 | break; 71 | case 'fairy': 72 | document.querySelector('#card').style.backgroundColor = "#e591e9"; 73 | break; 74 | case 'ice': 75 | document.querySelector('#card').style.backgroundColor = "#49c5ef"; 76 | break; 77 | case 'psychic': 78 | document.querySelector('#card').style.backgroundColor = "#e93ac7"; 79 | break; 80 | case 'steel': 81 | document.querySelector('#card').style.backgroundColor = "#979798"; 82 | break; 83 | } 84 | } -------------------------------------------------------------------------------- /Pokedex/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(31, 31, 31); 3 | } 4 | 5 | h2{ 6 | text-align: center; 7 | margin-bottom: .4em; 8 | } 9 | 10 | #flexbox { 11 | display:flex; 12 | height: 100%; 13 | justify-content:center; 14 | align-items: center; 15 | } 16 | 17 | #card { 18 | background-color:yellow; 19 | border: solid; 20 | padding: 1em; 21 | border-radius: 5px; 22 | width: 50%; 23 | min-height: 80%; 24 | } 25 | 26 | #form { 27 | display: flex; 28 | justify-content: space-around; 29 | margin-bottom: .4em; 30 | } 31 | 32 | #image{ 33 | display:block; 34 | margin: auto auto; 35 | width: 75%; 36 | height: auto; 37 | } 38 | 39 | input { 40 | width: 75%; 41 | } 42 | 43 | button { 44 | width: 20%; 45 | background-color: inherit; 46 | border-radius: 5px; 47 | border: solid 2px; 48 | color: inherit; 49 | } 50 | 51 | button:hover { 52 | background-color: rgb(238, 100, 20); 53 | } 54 | 55 | 56 | button:active { 57 | background-color: rgb(238, 27, 20); 58 | } 59 | 60 | 61 | div { 62 | padding:0.4em; 63 | } 64 | 65 | #id { 66 | font-weight: bold; 67 | font-size: 2em; 68 | margin-top: 0; 69 | } 70 | 71 | #types { 72 | display: flex; 73 | justify-content: space-between; 74 | width: 100%; 75 | } 76 | 77 | .type { 78 | width: 50%; 79 | margin-right: 1em; 80 | } 81 | 82 | #conteiner{ 83 | display: flex; 84 | justify-content: space-evenly; 85 | } 86 | 87 | #images{ 88 | width: 45%; 89 | } 90 | 91 | .stats{ 92 | display: flex; 93 | flex-direction: column; 94 | justify-content: space-between; 95 | font-weight: bold; 96 | font-size: 1.8em; 97 | width: 22%; 98 | } 99 | 100 | #error { 101 | border: solid 2px; 102 | border-radius: 5px; 103 | width: 94%; 104 | text-align: center; 105 | margin: 0 auto; 106 | background-color: rgb(165, 29, 29); 107 | display: none; 108 | } -------------------------------------------------------------------------------- /Profile Card/Profile_card.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat'); 2 | 3 | *{ 4 | margin: 0%; 5 | padding: 0; 6 | box-sizing: border-box; 7 | 8 | } 9 | html{ 10 | font-size: 10px; 11 | } 12 | body{ 13 | background: #28223F; 14 | font-family: 'Montserrat', sans-serif; 15 | padding: 3rem; 16 | } 17 | .main_container{ 18 | padding: 5rem; 19 | width: 80%; 20 | height: 70vh; 21 | border: 0.5rem solid #000; 22 | display: block; 23 | margin: auto; 24 | border-radius: 1rem; 25 | margin-top: 100px; 26 | } 27 | .profile{ 28 | background-color: #6f6894; 29 | border-radius: 5px; 30 | box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75); 31 | color: #B3B8CD; 32 | padding: 30px; 33 | padding-top: 8rem; 34 | /* position: relative; */ 35 | width: 350px; 36 | max-width: 100%; 37 | height: 100%; 38 | text-align: center; 39 | margin: auto; 40 | } 41 | .profile .profile_card h1{ 42 | color: #fff; 43 | text-align: center; 44 | margin-bottom: 2rem; 45 | } 46 | .profile_card img{ 47 | width: 100%; 48 | border: 0.1rem solid #03BFCB; 49 | border-radius: 1rem; 50 | box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75); 51 | transition: 0.5s ease-in-out; 52 | margin-bottom: 2rem; 53 | } 54 | .profile_card img:hover{ 55 | transform: scale(1.1); 56 | } 57 | #startButtonId a img{ 58 | width: 8rem; 59 | height: 8rem; 60 | } -------------------------------------------------------------------------------- /Profile Card/Profile_card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Profile Card 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

❄❄❄ It's Me ❄❄❄

16 | sorry it's not loading 17 |
18 |
19 |
20 | 21 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | Profile Card 38 | 39 | 40 | 41 | 42 |
43 |
44 |
45 |

Hi, I have no idea what I'm doing :)

46 | Oops, it's not loading, sorry! 48 |
49 |
50 |
51 | 52 |
53 |

Enjoy this while you're as confused as I am ¯\_(ツ)_/¯ 54 | 55 |

57 | 58 |
59 | 60 | 61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /Profile Card/images/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # HTML-Project from Ground Zero Level 3 | 4 | Hey there, welcome to our HTML open source project. Redesign the HTML landing page, learn and have fun doing it. Happy coding :) 5 | 6 | **Please note: We do not assign issues to contributors. If you see a bug or if there is a change you want to make, do not open a new issue. Simply follow the instructions below and submit your changes by opening a pull request.** 7 | 8 | # Contribution Guide 9 | 10 | - Fork the repository, create a clone and make sure that you are not working on the `MASTER BRANCH' repository! 11 | 12 | ```bash 13 | git clone https://github.com/{your-github-username-here}/HTML-project.git 14 | ``` 15 | 16 | ```bash 17 | cd HTML-project 18 | ``` 19 | 20 | - It is not good practice to work on the `master` branch. You can create a new branch by using this command 21 | 22 | ```bash 23 | git checkout -b {name-of-the-branch-here} 24 | ``` 25 | 26 | - Add a stream so you can sync your clone with the original repository (get the latest updates) 27 | 28 | ```bash 29 | git remote add upstream https://github.com/zero-to-mastery/HTML-project.git 30 | ``` 31 | 32 | - Use this command to stay up to date with the original repository (not the fork that you made) 33 | 34 | ```bash 35 | git pull upstream master 36 | ``` 37 | 38 | - Make your contribution too :) 39 | 40 | - Open a Pull Request also. 41 | 42 | - For demo click on this [link](https://zero-to-mastery.github.io/HTML-project/). 43 | 44 | - **Read [this](https://help.github.com/en/articles/creating-a-pull-request-from-a-fork) or watch [this](https://www.youtube.com/watch?v=G1I3HF4YWEw) for more help**. 45 | 46 | # Zero to Mastery Course 47 | 48 | - **Click [here](https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/) to buy the course on Udemy** 49 | 50 | - **Click [here](https://academy.zerotomastery.io/p/complete-web-developer-zero-to-mastery) to buy the course on the ZTM Academy** 51 | 52 | -------------------------------------------------------------------------------- /Responsive Navbar/Responsive_Navbar.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR_rULCgxJV4_821sMNFp56GPMInvkG3zW_14WQ6z0_BPfY1pkaHrJ4stu6"); 3 | background-size: 100vw 100vh; 4 | } 5 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap'); 6 | *{ 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | font-family: 'Montserrat',sans-serif; 11 | } 12 | nav{ 13 | background: #151515; 14 | padding: 5px 40px; 15 | } 16 | nav ul{ 17 | list-style: none; 18 | display: flex; 19 | flex-wrap: wrap; 20 | align-items: center; 21 | justify-content: center; 22 | } 23 | nav ul li{ 24 | padding: 15px 0; 25 | cursor: pointer; 26 | } 27 | nav ul li.items{ 28 | position: relative; 29 | width: auto; 30 | margin: 0 16px; 31 | text-align: center; 32 | order: 3; 33 | } 34 | nav ul li.items:after{ 35 | position: absolute; 36 | content: ''; 37 | left: 0; 38 | bottom: 5px; 39 | height: 2px; 40 | width: 100%; 41 | background: #33ffff; 42 | opacity: 0; 43 | transition: all 0.2s linear; 44 | } 45 | nav ul li.items:hover:after{ 46 | opacity: 1; 47 | bottom: 8px; 48 | } 49 | nav ul li.logo{ 50 | flex: 1; 51 | color: white; 52 | font-size: 23px; 53 | font-weight: 600; 54 | cursor: default; 55 | user-select: none; 56 | } 57 | nav ul li a{ 58 | color: white; 59 | font-size: 18px; 60 | text-decoration: none; 61 | transition: .4s; 62 | } 63 | nav ul li:hover a{ 64 | color: cyan; 65 | } 66 | nav ul li i{ 67 | font-size: 23px; 68 | } 69 | nav ul li.btn{ 70 | display: none; 71 | } 72 | nav ul li.btn.hide i:before{ 73 | content: '\f00d'; 74 | } 75 | @media all and (max-width: 900px){ 76 | nav{ 77 | padding: 5px 30px; 78 | } 79 | nav ul li.items{ 80 | width: 100%; 81 | display: none; 82 | } 83 | nav ul li.items.show{ 84 | display: block; 85 | } 86 | nav ul li.btn{ 87 | display: block; 88 | } 89 | nav ul li.items:hover{ 90 | border-radius: 5px; 91 | box-shadow: inset 0 0 5px #33ffff, 92 | inset 0 0 10px #66ffff; 93 | } 94 | nav ul li.items:hover:after{ 95 | opacity: 0; 96 | } 97 | } 98 | /* Created by Sahil Verma*/ -------------------------------------------------------------------------------- /Responsive Navbar/Responsive_Navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | Responsive Navigation Bar 10 | 11 | 12 | 13 | 14 | 15 | 16 | 27 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /RockPaperScissors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rock, Paper, Scissors 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
Rock, Paper, Scissors
16 |
17 |
18 |

Player

19 |

0

20 |
21 |
22 |

Computer

23 |
0
24 |
25 |
26 | 27 |
Select your choice:
28 |
Choices Remaining: 15
29 | 30 |
31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /RockPaperScissors/script.js: -------------------------------------------------------------------------------- 1 | const game = () => { 2 | let playerScore = 0 3 | let computerScore = 0 4 | let choices = 0 5 | 6 | const playTheGame = () => { 7 | const rock = document.querySelector('.rock') 8 | const paper = document.querySelector('.paper') 9 | const scissors = document.querySelector('.scissors') 10 | const playerChoices = [rock, paper, scissors] 11 | const computerChoices = ['rock', 'paper', 'scissors'] 12 | 13 | playerChoices.forEach(selection => { 14 | selection.addEventListener('click', function () { 15 | const choicesRemaining = document.querySelector('.choicesRemaining') 16 | choices++ 17 | choicesRemaining.innerText = `Choices Remaining: ${15 - choices}` 18 | const choiceNumber = Math.floor(Math.random() * 3) 19 | const computerChoice = computerChoices[choiceNumber] 20 | 21 | winner(this.innerText, computerChoice) 22 | 23 | if (choices == 15) { 24 | gameOver(playerChoices, choicesRemaining) 25 | } 26 | }) 27 | }) 28 | } 29 | 30 | const winner = (player, computer) => { 31 | const result = document.querySelector('.result') 32 | const playerScoreboard = document.querySelector('.player-count') 33 | const computerScoreboard = document.querySelector('.computer-count') 34 | player = player.toLowerCase() 35 | computer = computer.toLowerCase() 36 | if (player === computer) { 37 | result.textContent = 'Tie' 38 | } else if (player == 'rock') { 39 | if (computer == 'paper') { 40 | result.textContent = 'Computer wins!' 41 | computerScore++ 42 | computerScoreboard.textContent = computerScore 43 | } else { 44 | result.textContent = 'Player wins!' 45 | playerScore++ 46 | playerScoreboard.textContent = playerScore 47 | } 48 | } 49 | else if (player == 'scissors') { 50 | if (computer == 'rock') { 51 | result.textContent = 'Computer wins!' 52 | computerScore++ 53 | computerScoreboard.textContent = computerScore 54 | } else { 55 | result.textContent = 'Player wins!' 56 | playerScore++ 57 | playerScoreboard.textContent = playerScore 58 | } 59 | } 60 | else if (player == 'paper') { 61 | if (computer == 'scissors') { 62 | result.textContent = 'Computer wins!' 63 | computerScore++ 64 | computerScoreboard.textContent = computerScore 65 | } else { 66 | result.textContent = 'Player wins!' 67 | playerScore++ 68 | playerScoreboard.textContent = playerScore 69 | } 70 | } 71 | } 72 | 73 | const gameOver = (playerChoices, choicesRemaining) => { 74 | const makeSelection = document.querySelector('.choice') 75 | const result = document.querySelector('.result') 76 | const reload = document.querySelector('.reload') 77 | 78 | playerChoices.forEach(selection => { 79 | selection.style.display = 'none' 80 | }) 81 | 82 | makeSelection.innerText = 'Game Over!' 83 | choicesRemaining.style.display = 'none' 84 | 85 | if (playerScore > computerScore) { 86 | result.style.fontSize = '2rem' 87 | result.innerText = 'You Win!' 88 | result.style.color = '#308d46' 89 | } else if (playerScore < computerScore) { 90 | result.style.fontSize = '2rem' 91 | result.innerText = 'You lose!' 92 | result.style.color = '#f00' 93 | } else { 94 | result.style.fontSize = '2rem' 95 | result.innerText = 'Tied!' 96 | result.style.color = 'grey' 97 | } 98 | reload.innerText = 'Restart Game' 99 | reload.style.display = 'flex' 100 | reload.addEventListener('click', () => { 101 | window.location.reload() 102 | }) 103 | } 104 | 105 | playTheGame() 106 | } 107 | 108 | game() -------------------------------------------------------------------------------- /RockPaperScissors/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .gameArea { 8 | background: #00bf8f; 9 | /* fallback for old browsers */ 10 | background: -webkit-linear-gradient(to right, #001510, #00bf8f); 11 | /* Chrome 10-25, Safari 5.1-6 */ 12 | background: linear-gradient(to right, #001510, #00bf8f); 13 | /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 14 | color: #fff; 15 | font-family: 'Gemunu Libre', sans-serif; 16 | display: flex; 17 | flex-direction: column; 18 | height: 100vh; 19 | width: 100vw; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | .title { 25 | position: absolute; 26 | top: 0; 27 | font-size: 10rem; 28 | z-index: 3; 29 | } 30 | 31 | .scoreboard { 32 | margin: 10rem auto 30rem auto; 33 | display: flex; 34 | width: 30vw; 35 | justify-content: space-evenly; 36 | position: absolute; 37 | top: 70px; 38 | z-index: 1; 39 | } 40 | 41 | .player-count, 42 | .computer-count { 43 | text-align: center; 44 | font-size: 1.5rem; 45 | margin-top: 1rem; 46 | } 47 | 48 | .options { 49 | 50 | display: flex; 51 | width: 50vw; 52 | justify-content: space-evenly; 53 | margin-top: 3rem; 54 | } 55 | 56 | .rock, 57 | .paper, 58 | .scissors { 59 | padding: 0.8rem; 60 | width: 100px; 61 | border-radius: 10px; 62 | background-color: #00bf8f; 63 | outline: none; 64 | border-color: #00bf8f; 65 | border: none; 66 | cursor: pointer; 67 | } 68 | 69 | .choice { 70 | margin: 100px auto 0 auto; 71 | font-size: 2rem; 72 | font-weight: bold; 73 | } 74 | 75 | .reload { 76 | display: none; 77 | margin-top: 2rem; 78 | padding: 1rem; 79 | background-color: #00bf8f; 80 | outline: none; 81 | border: none; 82 | border-radius: 10px; 83 | cursor: pointer; 84 | } 85 | 86 | .result { 87 | margin-top: 20px; 88 | font-size: 1.2rem; 89 | } 90 | 91 | @media screen and (max-width: 612px) { 92 | .title { 93 | text-align: center; 94 | } 95 | 96 | .scoreboard { 97 | position: absolute; 98 | top: 180px; 99 | width: 90vw; 100 | } 101 | 102 | .options { 103 | width: 100vw; 104 | } 105 | } -------------------------------------------------------------------------------- /TO-Do list/TODO.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body { 11 | font-family: 'Courier New', Courier, monospace; 12 | background-color: #aa5585; 13 | } 14 | 15 | /* Utility Classes */ 16 | h1, 17 | h2, 18 | h3, 19 | h4, 20 | h5, 21 | h6 { 22 | margin: 0.5rem 0; 23 | } 24 | 25 | #page-title { 26 | font-size: 6rem; 27 | } 28 | 29 | .container { 30 | max-width: 75%; 31 | margin: 0 auto; 32 | overflow: hidden; 33 | border-radius: 60px; 34 | } 35 | 36 | /* margin (for all sides) */ 37 | .m-1 { 38 | margin: 1rem; 39 | } 40 | 41 | .m-2 { 42 | margin: 2rem; 43 | } 44 | 45 | .m-3 { 46 | margin: 3rem; 47 | } 48 | 49 | /* margin (for top and bottom) */ 50 | .my-1 { 51 | margin: 1rem 0; 52 | } 53 | 54 | .my-2 { 55 | margin: 2rem 0; 56 | } 57 | 58 | .my-3 { 59 | margin: 3rem 0; 60 | } 61 | 62 | /* margin (padding for all sides) */ 63 | .p-1 { 64 | padding: 1rem; 65 | } 66 | 67 | .p-2 { 68 | padding: 2rem; 69 | } 70 | 71 | .p-3 { 72 | padding: 3rem; 73 | } 74 | 75 | /* padding (padding for top and bottom) */ 76 | .py-1 { 77 | padding: 1rem 0; 78 | } 79 | 80 | .py-2 { 81 | padding: 2rem 0; 82 | 83 | } 84 | 85 | .py-3 { 86 | padding: 3rem 0; 87 | } 88 | 89 | .btn { 90 | text-decoration: none; 91 | outline: none; 92 | padding: 1rem 2rem; 93 | color: white; 94 | margin: 0.5rem; 95 | border-radius: 60px; 96 | } 97 | 98 | .btn:hover { 99 | background-color: #aa5585; 100 | cursor: pointer; 101 | } 102 | 103 | .btn-pink { 104 | background-color: palevioletred; 105 | color: white; 106 | } 107 | 108 | /* Style the header */ 109 | .header { 110 | background-color: #661141; 111 | padding: 30px 40px; 112 | color: white; 113 | text-align: center; 114 | } 115 | 116 | /* Clear floats after the header */ 117 | .header:after { 118 | content: ""; 119 | display: table; 120 | clear: both; 121 | } 122 | 123 | /* Style the list items */ 124 | ul li { 125 | cursor: pointer; 126 | position: relative; 127 | padding: 12px 8px 12px 40px; 128 | background: rgb(238, 238, 238); 129 | font-size: 18px; 130 | transition: 0.2s; 131 | 132 | /* make the list items unselectable */ 133 | -webkit-user-select: none; 134 | -moz-user-select: none; 135 | -ms-user-select: none; 136 | user-select: none; 137 | } 138 | 139 | /* Set all odd list items to a different color (zebra-stripes) */ 140 | ul li:nth-child(even) { 141 | background: #f9f9f9; 142 | } 143 | 144 | /* Darker background-color on hover */ 145 | ul li:hover { 146 | background: #ddd; 147 | } 148 | 149 | /* When clicked on, add a background color and strike out text */ 150 | ul li.checked { 151 | background: #cd88af; 152 | color: #fff; 153 | text-decoration: line-through; 154 | font-weight: bold; 155 | transition: 0.5s all; 156 | } 157 | 158 | /* Add a "checked" mark when clicked on */ 159 | ul li.checked::before { 160 | content: ''; 161 | position: absolute; 162 | border-color: #fff; 163 | border-style: solid; 164 | border-width: 0 2px 2px 0; 165 | top: 10px; 166 | left: 16px; 167 | transform: rotate(45deg); 168 | height: 15px; 169 | width: 7px; 170 | } 171 | 172 | /* Style the close button */ 173 | .close { 174 | position: absolute; 175 | right: 0; 176 | top: 0; 177 | padding: 12px 16px 12px 16px; 178 | } 179 | 180 | .close:hover { 181 | background-color: #661141; 182 | color: white; 183 | } 184 | 185 | 186 | 187 | .adding { 188 | display: inline-block; 189 | width: 100%; 190 | margin: auto; 191 | } 192 | 193 | /* Style the input */ 194 | input { 195 | margin-right: 10px; 196 | border: none; 197 | border-radius: 50px; 198 | padding: 10px; 199 | float: center; 200 | font-size: 16px; 201 | 202 | } 203 | 204 | /* Style the "Add" button */ 205 | .addBtn { 206 | padding: 10px; 207 | background: #d9d9d9; 208 | color: #555; 209 | text-align: center; 210 | font-size: 16px; 211 | cursor: pointer; 212 | transition: 0.3s; 213 | border-radius: 0; 214 | } 215 | 216 | .addBtn:hover { 217 | background-color: rgb(255, 255, 255); 218 | color: #f436db; 219 | font-weight: 600; 220 | } -------------------------------------------------------------------------------- /TO-Do list/TODO.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |

To-Do List

13 |
14 | 15 | Add 16 |
17 |
18 |
19 | 20 | 21 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /TO-Do list/TODO.js: -------------------------------------------------------------------------------- 1 | var myNodelist = document.getElementsByTagName("LI"); 2 | var i; 3 | for (i = 0; i < myNodelist.length; i++) { 4 | var span = document.createElement("SPAN"); 5 | var txt = document.createTextNode("\u00D7"); 6 | span.className = "close"; 7 | span.appendChild(txt); 8 | myNodelist[i].appendChild(span); 9 | } 10 | 11 | // Click on a close button to hide the current list item 12 | var close = document.getElementsByClassName("close"); 13 | var i; 14 | for (i = 0; i < close.length; i++) { 15 | close[i].onclick = function() { 16 | var div = this.parentElement; 17 | div.style.display = "none"; 18 | } 19 | } 20 | 21 | // Add a "checked" symbol when clicking on a list item 22 | var list = document.querySelector('ul'); 23 | list.addEventListener('click', function(ev) { 24 | if (ev.target.tagName === 'LI') { 25 | ev.target.classList.toggle('checked'); 26 | } 27 | }, false); 28 | function reusableInput() { 29 | var input = document.getElementById("myInput"); 30 | return [input, input.value] 31 | } 32 | reusableInput()[0].addEventListener("keypress", function(e) { 33 | if(e.keyCode === 13) { 34 | newElement(); 35 | } 36 | }) 37 | // Create a new list item when clicking on the "Add" button 38 | function newElement() { 39 | var li = document.createElement("li"); 40 | var inputValue = reusableInput()[1]; 41 | var t = document.createTextNode(inputValue); 42 | li.appendChild(t); 43 | if (inputValue === '') { 44 | alert("You must write something!"); 45 | } else { 46 | document.getElementById("myUL").appendChild(li); 47 | } 48 | document.getElementById("myInput").value = ""; 49 | 50 | var span = document.createElement("SPAN"); 51 | var txt = document.createTextNode("\u00D7"); 52 | span.className = "close"; 53 | span.appendChild(txt); 54 | li.appendChild(span); 55 | 56 | for (i = 0; i < close.length; i++) { 57 | close[i].onclick = function() { 58 | var div = this.parentElement; 59 | div.style.display = "none"; 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /TO-Do list/media-queries.css: -------------------------------------------------------------------------------- 1 | @media (max-width:660px) { 2 | #page-title { 3 | font-size: 3.3rem; 4 | } 5 | } 6 | 7 | @media (max-width: 450px) { 8 | #myDIV .btn { 9 | display: block; 10 | } 11 | 12 | #page-title { 13 | font-size: 1.5rem; 14 | } 15 | } 16 | 17 | @media (max-width: 360px) { 18 | .header input { 19 | width: 100%; 20 | } 21 | 22 | #myUL { 23 | margin: 0; 24 | } 25 | 26 | .container { 27 | margin-top: 3%; 28 | border-radius: 0; 29 | } 30 | } -------------------------------------------------------------------------------- /alwayschange.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Alwayschange 7 | 8 | 9 |
10 |

Trying my first pull request -- Iftee97

11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /angularInfoPage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular 5 | 6 | 7 | 8 |

The page is gonna be prepared in a couple of days

9 | 10 | 11 | -------------------------------------------------------------------------------- /architectureA.html: -------------------------------------------------------------------------------- 1 | doc 2 | 3 | 4 | Architectural Innovations 5 | 6 | 7 |

New Designs

8 |

Will start to build out this web page

9 |

Evolving Architecture

10 | 11 | 12 | -------------------------------------------------------------------------------- /beyondztm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Zero to Mastery: HTML Project 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 70 | 71 | 72 | 73 |
74 |
75 |
76 |
77 |

78 |

79 |
Web Development
82 |
83 | Junior to Senior Roadmap 84 |

85 |
86 |
Even after reaching mastery, sometimes, one is left with a taste of wanting more. 87 | This is where The Complete Junior to Senior Web Developer Roadmap (2020) comes in. While 88 | ZtM shapes you to become a master Junior Developer, JtS will take you to greater heights 89 | by guiding you step by step on your journey of going from Junior to Senior developer. 90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 |
98 |
99 |

100 |

101 |
Javascript Web Projects
104 |
105 | 20 Projects to Build Your Portfolio 106 |

107 |
108 |
EModern HTML5, CSS3, and JavaScript to build Responsive and Mobile Friendly 109 | projects for your dream portfolio and resume! 110 |
111 |
112 |
113 |
114 | 115 |
116 |
117 |
If you enjoyed the course like I did, share it so more people can enjoy it!
118 |
119 | 120 | 121 | 122 | 123 |
124 |
125 | 126 |
127 |
128 | 129 | Git Icon 131 | 132 |
133 | Made by CWD © All rights NOT reserved 134 |
135 |
136 |
137 |
138 |
139 |
140 | 141 | 142 | 143 | 146 | 149 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /contri.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Hey ho

11 |

just get some contributions training

12 | 13 | 14 | -------------------------------------------------------------------------------- /fun3d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 34 | 3D octopus page 35 | 36 | 37 |
38 |

My first open source contribution

39 |

Please give it a few seconds to load the octopus.

40 |
41 |
42 | 48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /jQueryInfoPage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery 5 | 6 | 7 | 8 |

The page is gonna be prepared in a couple of days

9 | 10 |

ohh i want to add this to the master

11 | 12 | 13 | -------------------------------------------------------------------------------- /javaScriptInfoPage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Pure JavaScript 4 | 5 | 6 |

The page is gonna be prepared in a couple of days

7 | 8 | -------------------------------------------------------------------------------- /loading-Bar/app.js: -------------------------------------------------------------------------------- 1 | const loadingBarEl = document.querySelector(".loading_inner"); 2 | 3 | let myWidth = 0; 4 | const loadingBar = setInterval(() => { 5 | myWidth++; 6 | if(myWidth === 100) { 7 | clearInterval(loadingBar) 8 | } 9 | loadingBarEl.style.width = `${myWidth}%` 10 | 11 | }, 100); 12 | 13 | 14 | -------------------------------------------------------------------------------- /loading-Bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Loading Bar 8 | 9 | 10 | 11 |
12 |

Loading Bar

13 |
14 |
15 |
16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /loading-Bar/styles.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | text-align: center; 3 | } 4 | .loading_outer { 5 | width: 600px; 6 | height: 50px; 7 | border: 1px solid black; 8 | margin: auto; 9 | } 10 | .loading_inner{ 11 | width: 800px; 12 | height: 50px; 13 | background-color: coral; 14 | } -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | .container-fluid{ 2 | max-width: 100vw !important; 3 | padding:0px !important 4 | } -------------------------------------------------------------------------------- /modified_homepage_css.css: -------------------------------------------------------------------------------- 1 | .navbar-collapse ul li{ 2 | padding: -10px; 3 | } 4 | @media (min-width: 992px) { 5 | .navbar-expand-lg .navbar-collapse { 6 | margin-left: 161px; 7 | } 8 | } 9 | .navbar-brand { 10 | display: inline-block; 11 | padding-top: 0.3125rem; 12 | margin-right: 1rem; 13 | margin-left: 10px; 14 | } 15 | .navbar-brand img { 16 | height: 55px; 17 | } 18 | .navbar-collapse ul li { 19 | padding: 0px 0rem; 20 | } 21 | .navbar-collapse ul li a{ 22 | color: white; 23 | } 24 | nav a { 25 | color: white !important; 26 | } 27 | nav { 28 | background-color: #00000000; 29 | } 30 | .theme-toggle-container span { 31 | font-size: 0.75rem; 32 | color: white; 33 | } 34 | #navbar__custom #headerText { 35 | font-size: 10px; 36 | margin-right: 21px; 37 | } 38 | .theme-toggle { 39 | position: relative; 40 | display: inline-block; 41 | width: 44px !important; 42 | height: 23px !important; 43 | } 44 | .theme-toggle-container span { 45 | font-size: 0.8rem !important; 46 | } 47 | 48 | .navv{ 49 | color: blue; 50 | font-family: 'Ubuntu', sans-serif; 51 | line-height: 55px; 52 | font-weight: 900; 53 | font-size: 8rem; 54 | } 55 | #course-button{ 56 | background: #e0cfb8; 57 | font-weight: bold; 58 | margin-top: 20px; 59 | } 60 | #course-button:hover { 61 | background-color: #081020c7; 62 | color: #fff; 63 | transform: scale(1.2); 64 | } -------------------------------------------------------------------------------- /new.html: -------------------------------------------------------------------------------- 1 | doc 2 | 3 | 4 | This is my name Web Page 5 | 6 | 7 |

This is my title

8 |

Will start to build out this web page

9 | 10 | 11 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1 3 | } 4 | -------------------------------------------------------------------------------- /particles.json: -------------------------------------------------------------------------------- 1 | { 2 | "particles": { 3 | "number": { 4 | "value": 80, 5 | "density": { 6 | "enable": true, 7 | "value_area": 800 8 | } 9 | }, 10 | "color": { 11 | "value": "#ffffff" 12 | }, 13 | "shape": { 14 | "type": "circle", 15 | "stroke": { 16 | "width": 0, 17 | "color": "#000000" 18 | }, 19 | "polygon": { 20 | "nb_sides": 5 21 | }, 22 | "image": { 23 | "src": "img/github.svg", 24 | "width": 100, 25 | "height": 100 26 | } 27 | }, 28 | "opacity": { 29 | "value": 0.5, 30 | "random": false, 31 | "anim": { 32 | "enable": false, 33 | "speed": 1, 34 | "opacity_min": 0.1, 35 | "sync": false 36 | } 37 | }, 38 | "size": { 39 | "value": 5, 40 | "random": true, 41 | "anim": { 42 | "enable": false, 43 | "speed": 40, 44 | "size_min": 0.1, 45 | "sync": false 46 | } 47 | }, 48 | "line_linked": { 49 | "enable": true, 50 | "distance": 150, 51 | "color": "#ffffff", 52 | "opacity": 0.4, 53 | "width": 1 54 | }, 55 | "move": { 56 | "enable": true, 57 | "speed": 6, 58 | "direction": "none", 59 | "random": false, 60 | "straight": false, 61 | "out_mode": "out", 62 | "attract": { 63 | "enable": false, 64 | "rotateX": 600, 65 | "rotateY": 1200 66 | } 67 | } 68 | }, 69 | "interactivity": { 70 | "detect_on": "canvas", 71 | "events": { 72 | "onhover": { 73 | "enable": true, 74 | "mode": "repulse" 75 | }, 76 | "onclick": { 77 | "enable": true, 78 | "mode": "push" 79 | }, 80 | "resize": true 81 | }, 82 | "modes": { 83 | "grab": { 84 | "distance": 400, 85 | "line_linked": { 86 | "opacity": 1 87 | } 88 | }, 89 | "bubble": { 90 | "distance": 400, 91 | "size": 40, 92 | "duration": 2, 93 | "opacity": 8, 94 | "speed": 3 95 | }, 96 | "repulse": { 97 | "distance": 200 98 | }, 99 | "push": { 100 | "particles_nb": 4 101 | }, 102 | "remove": { 103 | "particles_nb": 2 104 | } 105 | } 106 | }, 107 | "retina_detect": true, 108 | "config_demo": { 109 | "hide_card": false, 110 | "background_color": "#b61924", 111 | "background_image": "", 112 | "background_position": "50% 50%", 113 | "background_repeat": "no-repeat", 114 | "background_size": "cover" 115 | } 116 | } -------------------------------------------------------------------------------- /rash.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML Project 5 | 6 | 7 |

HTML PROJECT

8 | 9 | 10 | -------------------------------------------------------------------------------- /register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sign Up 9 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 29 | 30 | 31 | 32 | 73 | 74 | 75 | 76 |
77 |
78 |

Course Registration

79 | 80 |
81 |
82 |
83 |
84 |
85 | 86 | 87 |
88 |
89 |
90 |
91 | 92 | 93 |
94 |
95 |
96 |
97 | 98 | 99 |
100 |
101 | 102 | 103 |
104 |
105 | 106 |
107 | 109 | 110 |
111 |
112 | 114 | 115 |
116 |
117 | 119 | 120 |
121 |
122 | 123 |
124 |
125 |
126 | 127 |
128 |

Thank you for registering!

129 | pikachu_gif 130 |
131 |
132 |
133 |
134 | If you enjoyed the course like I did, share it so more people can 135 | enjoy it! 136 |
137 |
138 | 139 | 140 | 141 | 142 |
143 |
144 |
145 |
146 | 147 | Git Icon 148 | 149 |
150 | Made by Tatyana K. © All rights reserved ;) 151 |
152 |
153 |
154 | 157 | 160 | 163 | 164 | 165 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /resources/images/GB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/GB.png -------------------------------------------------------------------------------- /resources/images/Pikachu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/Pikachu.gif -------------------------------------------------------------------------------- /resources/images/ZTM_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/ZTM_logo.png -------------------------------------------------------------------------------- /resources/images/browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/browser.png -------------------------------------------------------------------------------- /resources/images/dollar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/dollar.jpg -------------------------------------------------------------------------------- /resources/images/express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/express.png -------------------------------------------------------------------------------- /resources/images/gb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/gb.jpg -------------------------------------------------------------------------------- /resources/images/git.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/images/html5-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/html5-new.png -------------------------------------------------------------------------------- /resources/images/html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/html5.png -------------------------------------------------------------------------------- /resources/images/indexPagePic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/indexPagePic.png -------------------------------------------------------------------------------- /resources/images/laptop-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/laptop-header.jpg -------------------------------------------------------------------------------- /resources/images/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/laptop.png -------------------------------------------------------------------------------- /resources/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/logo.png -------------------------------------------------------------------------------- /resources/images/moneyfall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/moneyfall.png -------------------------------------------------------------------------------- /resources/images/node.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/node.ico -------------------------------------------------------------------------------- /resources/images/paper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/paper.jpg -------------------------------------------------------------------------------- /resources/images/social-media.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/social-media.jpg -------------------------------------------------------------------------------- /resources/images/wallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/resources/images/wallet.png -------------------------------------------------------------------------------- /resources/scripts/app.js: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------------- 2 | /* How to use? : Check the GitHub README 3 | /* ----------------------------------------------- */ 4 | 5 | /* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */ 6 | /* 7 | particlesJS.load('particles-js', 'particles.json', function() { 8 | console.log('particles.js loaded - callback'); 9 | }); 10 | */ 11 | 12 | /* Otherwise just put the config content (json): */ 13 | 14 | particlesJS('particles-js', 15 | 16 | { 17 | "particles": { 18 | "number": { 19 | "value": 50, 20 | "density": { 21 | "enable": true, 22 | "value_area": 800 23 | } 24 | }, 25 | "color": { 26 | "value": "#ffffff" 27 | }, 28 | "shape": { 29 | "type": "circle", 30 | "stroke": { 31 | "width": 0, 32 | "color": "#000000" 33 | }, 34 | "polygon": { 35 | "nb_sides": 5 36 | }, 37 | "image": { 38 | "src": "img/github.svg", 39 | "width": 100, 40 | "height": 100 41 | } 42 | }, 43 | "opacity": { 44 | "value": 0.5, 45 | "random": false, 46 | "anim": { 47 | "enable": false, 48 | "speed": 1, 49 | "opacity_min": 0.1, 50 | "sync": false 51 | } 52 | }, 53 | "size": { 54 | "value": 5, 55 | "random": true, 56 | "anim": { 57 | "enable": false, 58 | "speed": 40, 59 | "size_min": 0.1, 60 | "sync": false 61 | } 62 | }, 63 | "line_linked": { 64 | "enable": true, 65 | "distance": 150, 66 | "color": "#ffffff", 67 | "opacity": 0.4, 68 | "width": 1 69 | }, 70 | "move": { 71 | "enable": true, 72 | "speed": 6, 73 | "direction": "none", 74 | "random": false, 75 | "straight": false, 76 | "out_mode": "out", 77 | "attract": { 78 | "enable": false, 79 | "rotateX": 600, 80 | "rotateY": 1200 81 | } 82 | } 83 | }, 84 | "interactivity": { 85 | "detect_on": "canvas", 86 | "events": { 87 | "onhover": { 88 | "enable": true, 89 | "mode": "repulse" 90 | }, 91 | "onclick": { 92 | "enable": true, 93 | "mode": "push" 94 | }, 95 | "resize": true 96 | }, 97 | "modes": { 98 | "grab": { 99 | "distance": 400, 100 | "line_linked": { 101 | "opacity": 1 102 | } 103 | }, 104 | "bubble": { 105 | "distance": 400, 106 | "size": 40, 107 | "duration": 2, 108 | "opacity": 8, 109 | "speed": 3 110 | }, 111 | "repulse": { 112 | "distance": 200 113 | }, 114 | "push": { 115 | "particles_nb": 4 116 | }, 117 | "remove": { 118 | "particles_nb": 2 119 | } 120 | } 121 | }, 122 | "retina_detect": true, 123 | "config_demo": { 124 | "hide_card": false, 125 | "background_color": "#b61924", 126 | "background_image": "", 127 | "background_position": "50% 50%", 128 | "background_repeat": "no-repeat", 129 | "background_size": "cover" 130 | } 131 | } 132 | 133 | ); -------------------------------------------------------------------------------- /resources/scripts/script.js: -------------------------------------------------------------------------------- 1 | const itemClicked4 = () => window.open('angularInfoPage.html', '_blank'); 2 | const itemClicked3 = () => window.open('VueInfoPage.html', '_blank'); 3 | const itemClicked2 = () => window.open('jQueryInfoPage.html', '_blank'); 4 | const itemClicked = () => window.open('javaScriptInfoPage.html', '_blank'); 5 | 6 | let clicked = 0; 7 | 8 | const javaScriptCategorySelected = () => { 9 | let selectedItem = document.getElementById("javascript"); 10 | selectedItem.style.cursor = "pointer"; 11 | const li = () => document.createElement("li"); 12 | 13 | if (clicked === 0) { 14 | let newItem4 = li(); 15 | newItem4.appendChild(document.createTextNode(" Angular.js")); 16 | newItem4.setAttribute("onclick", "itemClicked4()"); 17 | newItem4.style.cursor = "pointer"; 18 | selectedItem.insertAdjacentElement("afterend", newItem4); 19 | 20 | let newItem3 = li(); 21 | newItem3.appendChild(document.createTextNode(" Vue.js ")); 22 | newItem3.setAttribute("onclick", "itemClicked3()"); 23 | newItem3.style.cursor = "pointer"; 24 | selectedItem.insertAdjacentElement("afterend", newItem3); 25 | 26 | let newItem2 = li(); 27 | newItem2.appendChild(document.createTextNode(" jQuery ")); 28 | newItem2.setAttribute("onclick", "itemClicked2()"); 29 | newItem2.style.cursor = "pointer"; 30 | selectedItem.insertAdjacentElement("afterend", newItem2); 31 | 32 | let newItem = li(); 33 | newItem.appendChild(document.createTextNode(" Pure JavaScript ")); 34 | newItem.setAttribute("onclick", "itemClicked()"); 35 | newItem.style.cursor = "pointer" 36 | selectedItem.insertAdjacentElement("afterend", newItem); 37 | clicked = 1; 38 | } //end of if 39 | } 40 | 41 | $(function () { 42 | $(document).scroll(function () { 43 | const $nav = $(".navbar-light"); 44 | $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); 45 | }); 46 | }); 47 | 48 | // $(".card").hover( 49 | // function () { 50 | // $(this).filter(':not(:animated)').animate({ 51 | // zoom: '125%' 52 | // }, 500).css('background', '#eee'); 53 | // // This only fires if the row is not undergoing an animation when you mouseover it 54 | // }, 55 | // function () { 56 | // $(this).animate({ 57 | // zoom: '100%' 58 | // }, 500).css('background', 'transparent'); 59 | // }); 60 | 61 | //NAVBAR - Change opacity and colours on scroll 62 | 63 | const navbar = document.querySelector('.navbar'); 64 | const navlink = document.querySelectorAll('.nav-link'); 65 | const headertext = document.querySelector('#headerText'); 66 | 67 | const navScroll = () => { 68 | 69 | if (document.documentElement.scrollTop > 80) { 70 | navbar.classList.add('navbar-light'); 71 | navbar.classList.remove('navbar-dark'); 72 | } else { 73 | navbar.classList.remove('navbar-light'); 74 | navbar.classList.add('navbar-dark'); 75 | } 76 | } 77 | 78 | 79 | window.addEventListener('scroll', navScroll); 80 | 81 | /*Scroll to top when arrow up clicked BEGIN*/ 82 | // $(window).scroll(function() { 83 | // const height = $(window).scrollTop(); 84 | // if (height > 90) { 85 | // $('.gotopbtn').fadeIn(); 86 | // } else { 87 | // $('.gotopbtn').fadeOut(); 88 | // } 89 | // }); 90 | $(document).ready(function() { 91 | $(".gotopbtn").click(function(event) { 92 | event.preventDefault(); 93 | $("html, body").animate({ scrollTop: 0 }, "fast"); 94 | return false; 95 | }); 96 | 97 | }); 98 | /*Scroll to top when arrow up clicked END*/ 99 | -------------------------------------------------------------------------------- /resources/scripts/themeToggle.js: -------------------------------------------------------------------------------- 1 | // Dark Theme Global JS (by Yusuf) 2 | 3 | const html = document.querySelector('html'); 4 | // const images = document.querySelectorAll('img'); 5 | // const pictures = document.querySelectorAll('pictures'); 6 | // const videos = document.querySelectorAll('video'); 7 | 8 | const themeToggle = document.querySelector('.theme-toggle'); 9 | const themeToggleText = document.querySelector('.theme-toggle-text'); 10 | 11 | let darkMode = false; 12 | 13 | // function inverter(elements) { 14 | // if (darkMode) { 15 | // elements.forEach(element => element.classList.add('invert')); 16 | // } else { 17 | // elements.forEach(element => element.classList.remove('invert')); 18 | // } 19 | // }; 20 | 21 | function toggleTheme() { 22 | darkMode = !darkMode; 23 | 24 | if (darkMode) { 25 | html.setAttribute('theme', 'dark'); 26 | themeToggleText.textContent = 'Dark Mode'; 27 | // themeToggleText.style.color = 'white'; 28 | } else { 29 | html.setAttribute('theme', 'light'); 30 | themeToggleText.textContent = 'Light Mode'; 31 | // themeToggleText.style.color = 'black'; 32 | }; 33 | }; 34 | 35 | themeToggle.addEventListener('change', toggleTheme); -------------------------------------------------------------------------------- /resources/style/about-page.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font: 75% Arial, Helvetica, sans-serif; 5 | } 6 | 7 | #instructor_container { 8 | max-width: 1250px; 9 | margin: 0 auto; 10 | } 11 | .navbar{ 12 | background-color: #009999; 13 | position: fixed; 14 | } 15 | /* .navbar-collapse { 16 | color: #000 !important; 17 | } */ 18 | .navbar a { 19 | font-size: 16px; 20 | } 21 | div ul{ 22 | font-size: 20px; 23 | } 24 | 25 | .navbar a:hover { 26 | transform: scale(1.1); 27 | color: #000; 28 | /* background-color: rgb(219, 255, 255); */ 29 | } 30 | 31 | .theme-toggle-text{ 32 | color: black; 33 | } 34 | .theme-toggle-text a:hover { 35 | color: black; 36 | } 37 | 38 | #instructor-title { 39 | padding-right: 20px; 40 | transition: all 1s; 41 | } 42 | 43 | #instructor-img { 44 | border-radius: 50%; 45 | margin-left: auto; 46 | width: 200px; 47 | height: 200px; 48 | transition: all 1s; 49 | } 50 | 51 | #myBtn { 52 | border: 0; 53 | background-color: #91308e; 54 | padding: 0.45rem 0.9rem; 55 | color: #fff; 56 | border-radius: 8px; 57 | cursor: pointer; 58 | } 59 | 60 | /* 61 | 62 | #instructor-img:hover, #instructor-title:hover { 63 | transform: scale(1.1); 64 | } 65 | 66 | removed unnecessary scale 67 | 68 | */ 69 | 70 | .about-container { 71 | padding: 100px 10% 20px; 72 | font-family: 'Montserrat', sans-serif; 73 | /* display: flex; issue with heading and page layout */ 74 | display: block; 75 | max-width: 1800px; 76 | margin-top: 5rem; 77 | text-align: center; 78 | } 79 | 80 | .info { 81 | border-left: 1px solid #000; 82 | text-align: left; 83 | } 84 | 85 | .about-container h2 { 86 | margin-bottom: 2%; 87 | border-bottom: 1px dotted #000; 88 | padding: 0 0 15px; 89 | /* display: flex; */ 90 | } 91 | .list-group { 92 | margin: 2.5% auto; 93 | font-family: 'Montserrat', sans-serif; 94 | } 95 | /* .list-group-item:first-child { 96 | border-top: none; 97 | } */ 98 | 99 | .list-group-item { 100 | background-color: transparent !important; 101 | transition: all 0.2s ease-in-out; 102 | margin: 8px; 103 | display: flex; 104 | justify-content: center; 105 | align-items: center; 106 | } 107 | 108 | .about-instructor { 109 | margin: 0px 5vw; 110 | text-align: justify; 111 | } 112 | 113 | #about-title { 114 | text-align: center; 115 | padding: 10px; 116 | } 117 | #about-title:hover { 118 | transform: scale(1.1); 119 | transition: all 0.3s ease-out; 120 | } 121 | 122 | #myBtn:hover { 123 | transform: scale(1.1); 124 | transition: all 0.3s ease-out; 125 | box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, 0.3); 126 | } 127 | 128 | .card { 129 | margin-right: 2%; 130 | box-shadow: none; 131 | } 132 | 133 | .card:hover { 134 | box-shadow: 0px 0px 18px 2px rgba(0, 0, 0, 0.288); 135 | } 136 | 137 | .card-desc { 138 | padding: 10%; 139 | } 140 | 141 | .buttons { 142 | display: flex; 143 | flex-wrap: wrap; 144 | justify-content: center; 145 | align-items: center; 146 | } 147 | 148 | @media (min-width: 768px) and (max-width: 991px) { 149 | .info { 150 | border-left: 1px solid #000; 151 | } 152 | } 153 | 154 | @media (min-width: 992px) and (max-width: 1024px) { 155 | .about-container h3 { 156 | font-size: 1.5rem; 157 | } 158 | 159 | .info { 160 | border-left: none; 161 | } 162 | 163 | .about-container h2 { 164 | border-bottom: 1px solid #000; 165 | } 166 | } 167 | 168 | @media (max-width: 767px) { 169 | .info { 170 | border-left: none; 171 | } 172 | .about-container h3 { 173 | font-size: 1.2rem; 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /resources/style/carousel-style.css: -------------------------------------------------------------------------------- 1 | img { 2 | display: block; 3 | max-width: 100%; 4 | } 5 | .navbar{ 6 | background-color: #009999; 7 | position: fixed; 8 | } 9 | .wrapper { 10 | overflow: hidden; 11 | height: 100vh; 12 | display: grid; 13 | grid-template-rows: 2fr 1fr; 14 | grid-gap: 10px; 15 | } 16 | @media screen and (min-width: 1200px) { 17 | .wrapper { 18 | grid-template-columns: 1fr 5fr; 19 | grid-template-rows: auto; 20 | } 21 | } 22 | 23 | .gallery { 24 | overflow-x: scroll; 25 | overflow-y: hidden; 26 | -ms-scroll-snap-type: x mandatory; 27 | scroll-snap-type: x mandatory; 28 | scroll-behavior: smooth; 29 | display: -webkit-box; 30 | display: flex; 31 | } 32 | @media screen and (min-width: 1200px) { 33 | .gallery { 34 | display: block; 35 | overflow-y: scroll; 36 | overflow-x: hidden; 37 | -ms-scroll-snap-type: y mandatory; 38 | scroll-snap-type: y mandatory; 39 | } 40 | } 41 | 42 | .gallery__img { 43 | scroll-snap-align: start; 44 | margin-bottom: 10px; 45 | min-width: 100vw; 46 | -o-object-fit: cover; 47 | object-fit: cover; 48 | } 49 | @media screen and (min-width: 1200px) { 50 | .gallery__img { 51 | min-width: auto; 52 | min-height: 100vh; 53 | } 54 | } 55 | 56 | .lil-nav { 57 | overflow-x: scroll; 58 | overflow-y: hidden; 59 | display: -webkit-box; 60 | display: flex; 61 | grid-row-start: 2; 62 | } 63 | @media screen and (min-width: 1200px) { 64 | .lil-nav { 65 | overflow-y: scroll; 66 | overflow-x: hidden; 67 | display: block; 68 | grid-row-start: auto; 69 | } 70 | } 71 | .lil-nav a { 72 | display: -webkit-box; 73 | display: flex; 74 | min-width: 45vw; 75 | margin-right: 10px; 76 | } 77 | @media screen and (min-width: 1200px) { 78 | .lil-nav a { 79 | margin-bottom: 10px; 80 | min-height: 200px; 81 | min-width: 100%; 82 | } 83 | } 84 | 85 | .lil-nav__img { 86 | -o-object-fit: cover; 87 | object-fit: cover; 88 | -webkit-filter: saturate(0); 89 | filter: saturate(0); 90 | -webkit-transition: 0.3s ease all; 91 | transition: 0.3s ease all; 92 | } 93 | .lil-nav__img:hover { 94 | -webkit-transform: scale(1.05); 95 | transform: scale(1.05); 96 | -webkit-filter: saturate(1); 97 | filter: saturate(1); 98 | } -------------------------------------------------------------------------------- /resources/style/glitch.css: -------------------------------------------------------------------------------- 1 | /* This is something that a friend showed me, and I thought it was pretty cool. */ 2 | .glitch { 3 | display: flex; 4 | font-size: 96px; 5 | letter-spacing: -7px; 6 | width: 100%; 7 | height: 100%; 8 | align-items: center; 9 | justify-content: center; 10 | margin: 0; 11 | color: darkblue; 12 | } 13 | .glitch{ 14 | animation: glitch 1s linear infinite; 15 | } 16 | 17 | @keyframes glitch { 18 | 2%, 64% { 19 | transform: translate(2px, 0) skew(0deg); 20 | } 21 | 4%, 60% { 22 | transform: translate(-2px, 0) skew(0deg); 23 | } 24 | 62% { 25 | transform: translate(0,0) skew(5deg); 26 | } 27 | } 28 | 29 | .glitch:before, 30 | .glitch::after{ 31 | content: attr(glitch); 32 | position: absolute; 33 | left: 0; 34 | } 35 | 36 | .glitch:before{ 37 | animation: glitchTop 1s linear infinite; 38 | clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); 39 | -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); 40 | } 41 | 42 | @keyframes glitchTop{ 43 | 2%, 64%{ 44 | transform: translate(2px, -2px); 45 | } 46 | 4%, 60%{ 47 | transform: translate(-2px, 2px); 48 | } 49 | 62%{ 50 | transform: translate(13px, -1px) skew(-12deg); 51 | } 52 | } 53 | 54 | .glitch:after{ 55 | animation: glitchBottom 1.5s linear infinite; 56 | clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); 57 | -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%); 58 | } 59 | 60 | @keyframes glitchBottom{ 61 | 2%, 64%{ 62 | transform: translate(2px, 0); 63 | } 64 | 4%, 60%{ 65 | transform: translate(-2px, 0); 66 | } 67 | 62%{ 68 | transform: translate(-22px, 5px) skew(21deg); 69 | } 70 | } -------------------------------------------------------------------------------- /resources/style/particles.css: -------------------------------------------------------------------------------- 1 | /* ============================================================================= 2 | HTML5 CSS Reset Minified - Eric Meyer 3 | ========================================================================== */ 4 | 5 | html, 6 | body, 7 | div, 8 | span, 9 | object, 10 | iframe, 11 | h1, 12 | h2, 13 | h3, 14 | h4, 15 | h5, 16 | h6, 17 | p, 18 | blockquote, 19 | pre, 20 | abbr, 21 | address, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | samp, 32 | small, 33 | strong, 34 | sub, 35 | sup, 36 | var, 37 | b, 38 | i, 39 | dl, 40 | dt, 41 | dd, 42 | ol, 43 | ul, 44 | li, 45 | fieldset, 46 | form, 47 | label, 48 | legend, 49 | table, 50 | caption, 51 | tbody, 52 | tfoot, 53 | thead, 54 | tr, 55 | th, 56 | td, 57 | article, 58 | aside, 59 | canvas, 60 | details, 61 | figcaption, 62 | figure, 63 | footer, 64 | header, 65 | hgroup, 66 | menu, 67 | nav, 68 | section, 69 | summary, 70 | time, 71 | mark, 72 | audio, 73 | video { 74 | margin: 0; 75 | padding: 0; 76 | border: none; 77 | outline: none; 78 | font-size: 100%; 79 | vertical-align: baseline; 80 | background: transparent; 81 | } 82 | body { 83 | line-height: 1; 84 | } 85 | article, 86 | aside, 87 | details, 88 | figcaption, 89 | figure, 90 | footer, 91 | header, 92 | hgroup, 93 | menu, 94 | nav, 95 | section { 96 | display: block; 97 | } 98 | nav ul { 99 | list-style: none; 100 | } 101 | blockquote, 102 | q { 103 | quotes: none; 104 | } 105 | blockquote:before, 106 | blockquote:after, 107 | q:before, 108 | q:after { 109 | content: none; 110 | } 111 | a { 112 | margin: 0; 113 | padding: 0; 114 | font-size: 100%; 115 | vertical-align: baseline; 116 | background: transparent; 117 | text-decoration: none; 118 | } 119 | mark { 120 | background-color: #ff9; 121 | color: #000; 122 | font-style: italic; 123 | font-weight: bold; 124 | } 125 | del { 126 | text-decoration: line-through; 127 | } 128 | abbr[title], 129 | dfn[title] { 130 | border-bottom: 1px dotted; 131 | cursor: help; 132 | } 133 | table { 134 | border-collapse: collapse; 135 | border-spacing: 0; 136 | } 137 | hr { 138 | display: block; 139 | height: 1px; 140 | border: 0; 141 | border-top: 1px solid #ccc; 142 | margin: 1em 0; 143 | padding: 0; 144 | } 145 | input, 146 | select { 147 | vertical-align: middle; 148 | } 149 | li { 150 | list-style: none; 151 | } 152 | 153 | /* ============================================================================= 154 | My CSS 155 | ========================================================================== */ 156 | 157 | /* ---- base ---- */ 158 | 159 | html, 160 | body { 161 | width: 100%; 162 | height: 100%; 163 | -webkit-background-size: cover; 164 | -moz-background-size: cover; 165 | -o-background-size: cover; 166 | background-size: cover; 167 | /* background:#111; */ 168 | } 169 | 170 | body { 171 | font: normal 75% Arial, Helvetica, sans-serif; 172 | } 173 | 174 | canvas { 175 | display: block; 176 | vertical-align: bottom; 177 | } 178 | 179 | /* ---- stats.js ---- */ 180 | 181 | .count-particles { 182 | background: #000022; 183 | position: absolute; 184 | top: 48px; 185 | left: 0; 186 | width: 80px; 187 | color: #fff; 188 | font-size: 0.8em; 189 | text-align: left; 190 | text-indent: 4px; 191 | line-height: 14px; 192 | padding-bottom: 2px; 193 | font-family: Helvetica, Arial, sans-serif; 194 | font-weight: bold; 195 | } 196 | 197 | .js-count-particles { 198 | font-size: 1.1em; 199 | } 200 | 201 | #stats, 202 | .count-particles { 203 | -webkit-user-select: none; 204 | margin-top: 5px; 205 | /* margin-left: 5px; caused overflow on x */ 206 | } 207 | 208 | #stats { 209 | border-radius: 3px 3px 0 0; 210 | overflow: hidden; 211 | } 212 | 213 | .count-particles { 214 | border-radius: 0 0 3px 3px; 215 | } 216 | 217 | /* ---- particles.js container ---- */ 218 | 219 | #particles-js { 220 | width: 100%; 221 | height: 100%; 222 | /* background-color: #b61924; */ 223 | background-size: cover; 224 | background-position: 50% 50%; 225 | background-repeat: no-repeat; 226 | } 227 | -------------------------------------------------------------------------------- /resources/style/register-page.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | max-width: 100%; 3 | overflow-x: hidden; 4 | } 5 | 6 | .navbar-collapse { 7 | /* color: #000 !important; */ 8 | } 9 | .navbar a{ 10 | /* color: black !important; */ 11 | } 12 | .register-container{ 13 | min-height: calc(100vh - 280px); 14 | max-width: 1500px; 15 | padding: 100px 100px 0px 100px; 16 | font-family: 'Montserrat', sans-serif; 17 | } 18 | .register-container h1{ 19 | text-align: center; 20 | margin-bottom: 50px; 21 | text-shadow: 2px 2px gray; 22 | } 23 | 24 | .focus:focus{ 25 | border: 2px solid black; 26 | } 27 | 28 | #submit-btn { 29 | box-shadow: 5px 3px transparent; 30 | margin: 3px; 31 | } 32 | 33 | #submit-btn:hover{ 34 | box-shadow: 5px 3px 5px rgb(128, 128, 128, 0.5); 35 | 36 | } 37 | /* Added Pikachu animation */ 38 | .running_pikachu img{ 39 | padding-left: 50px; 40 | filter: drop-shadow(0px 15px 8px rgb(82, 82, 82, 0.5)); 41 | } 42 | .running_pikachu p{ 43 | filter: drop-shadow(0px 15px 8px rgb(82, 82, 82, 0.5)); 44 | font-size: 2.5em; 45 | font-style: italic ; 46 | } 47 | .running_pikachu { 48 | display: flex; 49 | align-items: center; 50 | position: relative; 51 | animation: mymove 10s ease-in infinite; 52 | } 53 | @keyframes mymove { 54 | from {left: -550px;} 55 | to {left: 1900px;} 56 | } -------------------------------------------------------------------------------- /resources/style/scrollbar.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar-track { 2 | box-shadow: inset; 3 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 4 | background-color: #F5F5F5; 5 | border-radius: 10px; 6 | } 7 | 8 | ::-webkit-scrollbar { 9 | width: 15px; 10 | background-color: #F5F5F5; 11 | } 12 | 13 | ::-webkit-scrollbar-thumb { 14 | border-radius: 15px; 15 | background-image: -webkit-gradient(linear, 16 | left bottom, 17 | left top, 18 | color-stop(0.86, rgb(60, 94, 196))); 19 | } -------------------------------------------------------------------------------- /resources/style/style6.css: -------------------------------------------------------------------------------- 1 | html, body 2 | { 3 | height: 100%; 4 | } 5 | 6 | body 7 | { 8 | margin: 0; 9 | background: rgb(2,0,36); 10 | background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,79,121,1) 50%, rgba(0,212,255,1) 100%); 11 | overflow: hidden; 12 | } 13 | 14 | .container{ 15 | position:absolute; 16 | top:50%; 17 | left:0; 18 | right:0; 19 | } 20 | nav{ 21 | width:319px; 22 | display:table; 23 | margin: 0 auto; 24 | transform: translateY(-50%); 25 | } 26 | 27 | nav a{ 28 | position:relative; 29 | width:33.333%; 30 | display:table-cell; 31 | text-align:center; 32 | color:#949494; 33 | text-decoration:none; 34 | font-size:20px; 35 | font-family:Verdana, Geneva, Tahoma, sans-serif; 36 | } 37 | nav a:before, nav a:after{ 38 | content:""; 39 | position: absolute; 40 | border-radius: 50%; 41 | transform: scale(0); 42 | transition: 0.5s ease transform; 43 | } 44 | nav a:before 45 | { 46 | top: 0; 47 | left: 10px; 48 | width: 6px; 49 | height: 6px; 50 | } 51 | 52 | nav a:after 53 | { 54 | top: 5px; 55 | left: 18px; 56 | width: 4px; 57 | height: 4px 58 | } 59 | 60 | nav a:nth-child(1):before 61 | { 62 | left:12px; 63 | background-color: yellow; 64 | } 65 | 66 | nav a:nth-child(1):after 67 | { 68 | left:20px; 69 | background-color: red; 70 | } 71 | 72 | nav a:nth-child(2):before 73 | { 74 | background-color: #00e2ff; 75 | } 76 | 77 | nav a:nth-child(2):after 78 | { 79 | background-color: #89ff00; 80 | } 81 | 82 | nav a:nth-child(3):before 83 | { 84 | left:2px; 85 | background-color: purple; 86 | } 87 | 88 | nav a:nth-child(3):after 89 | { 90 | left:8px; 91 | background-color: palevioletred; 92 | } 93 | 94 | #indicator{ 95 | position:absolute; 96 | left:5px; 97 | bottom:0; 98 | width:30px; 99 | height: 3px; 100 | background-color: #fff; 101 | border-radius: 5px; 102 | transition: 0.2s ease left; 103 | } 104 | 105 | nav a:hover{ 106 | color:#fff; 107 | } 108 | 109 | nav a:hover:before, nav a:hover:after{ 110 | transform:scale(2); 111 | } 112 | 113 | nav a:nth-child(1):hover ~ #indicator{ 114 | background: linear-gradient(130deg, yellow, red); 115 | } 116 | 117 | nav a:nth-child(2):hover ~ #indicator{ 118 | left: 34%; 119 | background: linear-gradient(130deg, #00e2ff, #89ff00); 120 | } 121 | nav a:nth-child(3):hover ~ #indicator{ 122 | left: 64%; 123 | background: linear-gradient(130deg, purple, palevioletred); 124 | } 125 | 126 | #ytd_link{ 127 | position:absolute; 128 | right:0; 129 | left:0; 130 | bottom: -200px; 131 | display:block; 132 | width: 160px; 133 | text-align: center; 134 | color: #fff; 135 | font-size: 15px; 136 | text-decoration: none; 137 | font-family: Verdana, Geneva, Tahoma, sans-serif; 138 | padding: 10px; 139 | margin: 0 auto; 140 | background-color: red; 141 | border-radius: 2px; 142 | animation: showYTDlink 1.5s ease 1s forwards; 143 | 144 | } 145 | 146 | @keyframes showYTDlink 147 | { 148 | 0%{ bottom: -200px; } 149 | 100%{ bottom: 20px; } 150 | } -------------------------------------------------------------------------------- /resources/style/themeToggle.css: -------------------------------------------------------------------------------- 1 | /* Dark Theme Global CSS (by Yusuf) */ 2 | 3 | html[theme='dark'] { 4 | filter: invert(1) hue-rotate(180deg); 5 | } 6 | 7 | html[theme='dark'] { 8 | filter: invert(1) hue-rotate(180deg); 9 | } 10 | 11 | .invert { 12 | filter: invert(1) hue-rotate(180deg); 13 | } 14 | 15 | 16 | /* Container */ 17 | 18 | .theme-toggle-container { 19 | z-index: 100; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | width: 85px; 24 | } 25 | 26 | .theme-toggle-container span { 27 | font-size: 1rem; 28 | /* color: black; */ 29 | } 30 | 31 | /* Box Around Slider */ 32 | 33 | .theme-toggle { 34 | position: relative; 35 | display: inline-block; 36 | width: 60px; 37 | height: 24px; 38 | } 39 | 40 | /* Hide Default HTML Checkbox */ 41 | 42 | .theme-toggle input { 43 | display: none; 44 | } 45 | 46 | /* Slider */ 47 | 48 | .slider { 49 | position: absolute; 50 | top: 0; 51 | right: 0; 52 | bottom: 0; 53 | left: 0; 54 | background-color: #CCCCCC; 55 | transition: 0.4s; 56 | cursor: pointer; 57 | } 58 | 59 | .slider::before { 60 | position: absolute; 61 | bottom: 3px; 62 | left: 4px; 63 | width: 18px; 64 | height: 18px; 65 | background-color: white; 66 | content: ''; 67 | transition: 0.4s; 68 | -webkit-transition: 0.4s; 69 | } 70 | 71 | input:checked + .slider { 72 | background-color: rgb(150, 65, 255); 73 | } 74 | 75 | input:focus + .slider { 76 | box-shadow: 0 0 1px #2196F3; 77 | } 78 | 79 | input:checked + .slider::before { 80 | transform: translateX(35px); 81 | } 82 | 83 | /* Rounded Slider */ 84 | 85 | .slider.round { 86 | border-radius: 34px; 87 | } 88 | 89 | .slider.round::before { 90 | border-radius: 50%; 91 | } -------------------------------------------------------------------------------- /simple-folio/css/styles.css: -------------------------------------------------------------------------------- 1 | body { background-color: #DEFCF9; } 2 | 3 | h1, h2, h4 { color: #3C84AB; } 4 | 5 | img { height: 12rem; } 6 | 7 | hr { 8 | width: 10%; 9 | border-style: none; 10 | border-top-style: dotted; 11 | color: grey; 12 | border-width: 7px; 13 | } -------------------------------------------------------------------------------- /simple-folio/hobbies/hobbies.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hobbies 7 | 8 | 9 | 10 | 11 |

Hobbies:

12 |
    13 |
  1. 14 | Playing Video games 15 |
    2. 16 |
  2. 17 | Learning new tech 18 |
    3. 19 |
  3. 20 | Reading books 21 |
    4. 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /simple-folio/img/bunny-cropped-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/HTML-project/7319bf824f01df4250fe0e7c35608ca0f6f66629/simple-folio/img/bunny-cropped-img.png -------------------------------------------------------------------------------- /simple-folio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PureHtml 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 20 | 21 |
bunny-image 15 |

Bunny Bites

16 |

Future entrepreneur

17 |

I am a web developer and I ❤ UI

18 |
19 |
22 | 23 | 24 |

Books I read

25 | 30 | 31 |

Work Experience

32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
DateName of organization
2015 - 2019Sara
2019 - 2022Relevantz
50 | 51 | 52 |

Skill Section

53 | 54 | 55 | 71 | 83 | 84 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
HTML⭐⭐⭐⭐⭐
React⭐⭐⭐⭐
Bootstrap⭐⭐⭐⭐
70 | 		72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
CSS⭐⭐⭐
Javascript⭐⭐⭐
82 |
85 |
86 | 87 | Hobbies 88 | 89 | 90 | -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | test 8 | 9 | 10 |

Will try to add a new feature for the website

11 | 12 | -------------------------------------------------------------------------------- /thanks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Thank You - Web Development Zero to Mastery 9 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |

28 | HTML 5 29 | Web Development - Zero to Mastery 30 |

31 | 32 | 33 | 34 | 40 |

HTML 5

41 | 42 | 52 |
53 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /todo_list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ToDo List 8 | 9 | 10 | 11 | 13 | 14 | ToDo List 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 77 | 78 | 79 | 80 | 81 | 122 | 123 |
124 |

To Do List

125 |
126 | 127 | 128 |
129 | 130 |

131 |

List :

132 | 133 | 134 |
135 | 136 | 137 | 138 | 139 | 140 | 141 | 177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /vueInfoPage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Vue 4 | 5 | 6 |

The page is gonna be prepared in a couple of days

7 | 8 | 9 | --------------------------------------------------------------------------------