diff --git a/103-halloween-landing-page/README.MD b/103-halloween-landing-page/README.MD new file mode 100644 index 0000000..bb70f7f --- /dev/null +++ b/103-halloween-landing-page/README.MD @@ -0,0 +1,15 @@ +# HALLOWEEN LANDING PAGE + +A funny and cool landing page for halloween with animated elements + +## Screenshots + +![alt text](images/hero.png) + +## TECHNOLOGIES + +- HTML AND CSS + +- [Bootstrap](https://getbootstrap.com/) + +- [cursor effect](https://github.com/tholman/cursor-effects) diff --git a/103-halloween-landing-page/images/bat.png b/103-halloween-landing-page/images/bat.png new file mode 100644 index 0000000..4237e69 Binary files /dev/null and b/103-halloween-landing-page/images/bat.png differ diff --git a/103-halloween-landing-page/images/ghost.png b/103-halloween-landing-page/images/ghost.png new file mode 100644 index 0000000..d2d8f0f Binary files /dev/null and b/103-halloween-landing-page/images/ghost.png differ diff --git a/103-halloween-landing-page/images/hero.png b/103-halloween-landing-page/images/hero.png new file mode 100644 index 0000000..6a4024a Binary files /dev/null and b/103-halloween-landing-page/images/hero.png differ diff --git a/103-halloween-landing-page/images/illustration.png b/103-halloween-landing-page/images/illustration.png new file mode 100644 index 0000000..4f1c2c1 Binary files /dev/null and b/103-halloween-landing-page/images/illustration.png differ diff --git a/103-halloween-landing-page/images/shape-bg.png b/103-halloween-landing-page/images/shape-bg.png new file mode 100644 index 0000000..f0285aa Binary files /dev/null and b/103-halloween-landing-page/images/shape-bg.png differ diff --git a/103-halloween-landing-page/images/side-ghost.png b/103-halloween-landing-page/images/side-ghost.png new file mode 100644 index 0000000..f34cd15 Binary files /dev/null and b/103-halloween-landing-page/images/side-ghost.png differ diff --git a/103-halloween-landing-page/index.html b/103-halloween-landing-page/index.html new file mode 100644 index 0000000..d8b9eeb --- /dev/null +++ b/103-halloween-landing-page/index.html @@ -0,0 +1,100 @@ + + + + + + + Happy Halloween 👻 + + + + + + + +
+
+ + ghost icon +
+ +
+ +
+ +
+

Halloween Products for your party + + bat icon + +

+

Search anything for your party and get fast and fast!

+
+ + +
+ +
+ +

Rewards & bonus + +

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem repellendus + possimus odio iusto id, sint doloribus tenetur.

+
+
+ + +
+
halloween icons +
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/103-halloween-landing-page/style.css b/103-halloween-landing-page/style.css new file mode 100644 index 0000000..642dbbe --- /dev/null +++ b/103-halloween-landing-page/style.css @@ -0,0 +1,45 @@ +.btn-danger { + background-color: #ea6623; +} +.btn-outline-danger { + border-color: #ea6623; + color: #ea6623; +} + +@media (min-width: 920px) { + main { + min-height: 100vh; + background: url(./images/shape-bg.png) -100px -100px / cover no-repeat; + } +} +.animated-logo { + animation: anime1 5s linear infinite; +} +@keyframes anime1 { + 0% { + transform: translate(40px, 18px); + } + 25% { + transform: translate(20px, 20px); + } + 50% { + transform: translate(0px, 5px); + } + 100% { + transform: translate(40px, 18px); + } +} +.animated-text { + animation: anime2 3s ease-in-out; +} +@keyframes anime2 { + from { + translate: 150vw 0; + scale: 200% 1; + } + + to { + translate: 0 0; + scale: 100% 1; + } +} diff --git a/README.md b/README.md index 6c4a163..de1e97e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,10 @@ # 100 Projects In 100 Days - HTML, CSS & JavaScript -Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaScript. This collection serves as a comprehensive resource for developers of all levels to practice their skills, explore new techniques, and get inspired by a wide range of web projects. Consider this as the ideal companion if you want to embark on the 100 Days of Code journey and challenge yourself. +Welcome to the repository for 100+ mini web projects using HTML, CSS, and +JavaScript. This collection serves as a comprehensive resource for developers of +all levels to practice their skills, explore new techniques, and get inspired by +a wide range of web projects. Consider this as the ideal companion if you want +to embark on the 100 Days of Code journey and challenge yourself. [View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id) @@ -8,136 +12,153 @@ Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaSc Explore each project individually and view live demos to see them in action: -| # | Project | Live Demo | -| :-: | ---------------------------------------------------------------------- | -------------------------------------------------------- | -| 001 | [Expanding Cards](001-expanding%20cards) | [Live Demo](https://codepen.io/solygambas/full/qBaMWjE) | -| 002 | [Progress Steps](002-progress%20steps) | [Live Demo](https://codepen.io/solygambas/full/VwKGzzg) | -| 003 | [Rotating Navigation Animation](003-rotating%20navigation) | [Live Demo](https://codepen.io/solygambas/full/jOMvZqY) | -| 004 | [Hidden Search Widget](004-hidden%20search%20widget) | [Live Demo](https://codepen.io/solygambas/full/mdrzdPB) | -| 005 | [Blurry Loading](005-blurry%20loading) | [Live Demo](https://codepen.io/solygambas/full/WNGaNgB) | -| 006 | [Scroll Animation](006-scroll%20animation) | [Live Demo](https://codepen.io/solygambas/full/JjRmoWL) | -| 007 | [Split Landing Page](007-split%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/KKgGdmY) | -| 008 | [Form Wave](008-form%20wave%20animation) | [Live Demo](https://codepen.io/solygambas/full/Exgdegm) | -| 009 | [Sound Board](009-sound%20board) | [Live Demo](https://codepen.io/solygambas/full/oNzaPQa) | -| 010 | [Dad Jokes](010-dad%20jokes) | [Live Demo](https://codepen.io/solygambas/full/gOwBQZK) | -| 011 | [Event Keycodes](011-event%20KeyCodes) | [Live Demo](https://codepen.io/solygambas/full/zYKmypd) | -| 012 | [FAQ Collapse](012-FAQ%20collapse) | [Live Demo](https://codepen.io/solygambas/full/ExgdqWm) | -| 013 | [Random Choice Picker](013-random%20choice%20picker) | [Live Demo](https://codepen.io/solygambas/full/eYdQgqN) | -| 014 | [Animated Navigation](014-animated%20navigation) | [Live Demo](https://codepen.io/solygambas/full/KKgrWGz) | -| 015 | [Incrementing Counter](015-incrementing%20counter) | [Live Demo](https://codepen.io/solygambas/full/qBaQmeW) | -| 016 | [Drink Water](016-drink%20water) | [Live Demo](https://codepen.io/solygambas/full/yLaQoJy) | -| 017 | [Movie App](017-movie%20app) | [Live Demo](https://codepen.io/solygambas/full/mdrabXd) | -| 018 | [Background Slider](018-background%20slider) | [Live Demo](https://codepen.io/solygambas/full/OJRrVbJ) | -| 019 | [Theme Clock](019-theme%20clock) | [Live Demo](https://codepen.io/solygambas/full/MWjZrZy) | -| 020 | [Button Ripple Effect](020-button%20ripple%20effect) | [Live Demo](https://codepen.io/solygambas/full/oNzJdWw) | -| 021 | [Drag N Drop](021-drag%20n%20drop) | [Live Demo](https://codepen.io/solygambas/full/RwGEyme) | -| 022 | [Drawing App](022-drawing%20app) | [Live Demo](https://codepen.io/solygambas/full/wvzREMx) | -| 023 | [Kinetic Loader](023-kinetic%20loader) | [Live Demo](https://codepen.io/solygambas/full/JjRwVLW) | -| 024 | [Content Placeholder](024-content%20placeholder) | [Live Demo](https://codepen.io/solygambas/full/ExgGzaX) | -| 025 | [Sticky Navbar](025-sticky%20navigation) | [Live Demo](https://codepen.io/solygambas/full/VwKqJmw/) | -| 026 | [Double Vertical Slider](026-double%20vertical%20slider) | [Live Demo](https://codepen.io/solygambas/full/wvzNwqB) | -| 027 | [Toast Notification](027-toast%20notification) | [Live Demo](https://codepen.io/solygambas/full/YzGBNgW) | -| 028 | [GitHub Profiles](028-github%20profiles) | [Live Demo](https://codepen.io/solygambas/full/GRjzmVR) | -| 029 | [Double Click Heart](029-double%20click%20heart) | [Live Demo](https://codepen.io/solygambas/full/XWjOaOK) | -| 030 | [Auto Text Effect](030-auto%20text%20effect) | [Live Demo](https://codepen.io/solygambas/full/JjRxrbM) | -| 031 | [Password Generator](031-password%20generator) | [Live Demo](https://codepen.io/solygambas/full/rNMRvWb) | -| 032 | [Good Cheap Fast](032-good%20cheap%20fast) | [Live Demo](https://codepen.io/solygambas/full/QWKoxwP) | -| 033 | [Notes App](033-notes%20app) | [Live Demo](https://codepen.io/solygambas/full/qBavQog) | -| 034 | [Animated Countdown](034-animated%20countdown) | [Live Demo](https://codepen.io/solygambas/full/vYXPbYW) | -| 035 | [Image Carousel](035-image%20carousel) | [Live Demo](https://codepen.io/solygambas/full/zYKbQZK) | -| 036 | [Hoverboard](036-hoverboard) | [Live Demo](https://codepen.io/solygambas/full/OJRqYKK) | -| 037 | [Pokedex](037-pokedex) | [Live Demo](https://codepen.io/solygambas/full/gOwygyP) | -| 038 | [Mobile Tab Navigation](038-mobile%20tab%20navigation) | [Live Demo](https://codepen.io/solygambas/full/eYdoexM) | -| 039 | [Password Strength Background](039-password%20strength%20background) | [Live Demo](https://codepen.io/solygambas/full/YzGMYzz) | -| 040 | [3D Background Boxes](040-3d%20boxes%20background) | [Live Demo](https://codepen.io/solygambas/full/zYKXpBe) | -| 041 | [Verify Account UI](041-verify%20account%20UI) | [Live Demo](https://codepen.io/solygambas/full/KKgYZWR) | -| 042 | [Live User Filter](042-live%20user%20filter) | [Live Demo](https://codepen.io/solygambas/full/OJRGzjg) | -| 043 | [Feedback UI Design](043-feedback%20UI%20design) | [Live Demo](https://codepen.io/solygambas/full/PoGgEOm) | -| 044 | [Custom Range Slider](044-custom%20range%20slider) | [Live Demo](https://codepen.io/solygambas/full/WNGBrjZ) | -| 045 | [Netflix Mobile Navigation](045-netflix%20mobile%20navigation) | [Live Demo](https://codepen.io/solygambas/full/NWRVxgv) | -| 046 | [Quiz App](046-quiz%20app) | [Live Demo](https://codepen.io/solygambas/full/PoGvZEW) | -| 047 | [Testimonial Box Switcher](047-testimonial%20box%20switcher) | [Live Demo](https://codepen.io/solygambas/full/ExgzPRz) | -| 048 | [Random Image Feed](048-random%20image%20generator) | [Live Demo](https://codepen.io/solygambas/full/eYdaJQx) | -| 049 | [Todo List](049-todo%20list) | [Live Demo](https://codepen.io/solygambas/full/eYdaJoo) | -| 050 | [Insect Catch Game](050-insect%20catch%20game) | [Live Demo](https://codepen.io/solygambas/full/oNzRbKx) | -| 051 | [Video Background](051-video%20background) | [Live Demo](https://codepen.io/solygambas/full/oNYNLwL) | -| 052 | [Portfolio with CSS Grid](052-portfolio%20grid) | [Live Demo](https://codepen.io/solygambas/full/MWbKzzO) | -| 053 | [Touch Slider](053-touch%20slider) | [Live Demo](https://codepen.io/solygambas/full/QWGEyLK) | -| 054 | [CSS Loaders](054-css%20loaders) | [Live Demo](https://codepen.io/solygambas/full/QWGdgaZ) | -| 055 | [Glass Dashboard](055-glass%20dashboard) | [Live Demo](https://codepen.io/solygambas/full/oNYpQMo) | -| 056 | [Image Comparison Slider](056-image%20comparison%20slider) | [Live Demo](https://codepen.io/solygambas/full/RwoMLYW) | -| 057 | [Parallax Background with SVG](057-parallax%20background%20svg) | [Live Demo](https://codepen.io/solygambas/full/vYyjjbz) | -| 058 | [3D Product Card](058-3D%20product%20card) | [Live Demo](https://codepen.io/solygambas/full/wvoXWPq) | -| 059 | [Form Validator](059-form%20validator) | [Live Demo](https://codepen.io/solygambas/full/MWbPJjb) | -| 060 | [Movie Seat Booking](060-movie%20seat%20booking) | [Live Demo](https://codepen.io/solygambas/full/xxRQEOy) | -| 061 | [Custom Video Player](061-custom%20video%20player) | [Live Demo](https://codepen.io/solygambas/full/mdOQadY) | -| 062 | [Exchange Rate Calculator](062-exchange%20rate%20calculator) | [Live Demo](https://codepen.io/solygambas/full/abBPJBG) | -| 063 | [DOM Array Methods](063-DOM%20array%20methods) | [Live Demo](https://codepen.io/solygambas/full/NWbeXYR) | -| 064 | [Menu Slider & Modal](064-menu%20slider%20modal) | [Live Demo](https://codepen.io/solygambas/full/MWbLeKd) | -| 065 | [Hangman Game](065-hangman%20game) | [Live Demo](https://codepen.io/solygambas/full/MWbLEYr) | -| 066 | [Meal Finder](066-meal%20finder) | [Live Demo](https://codepen.io/solygambas/full/dyOagYE) | -| 067 | [Expense Tracker](067-expense%20tracker) | [Live Demo](https://codepen.io/solygambas/full/OJbqyro) | -| 068 | [Music Player](068-music%20player) | [Live Demo](https://codepen.io/solygambas/full/LYbaZNG) | -| 069 | [Infinite Scroll Posts](069-infinite%20scroll%20posts) | [Live Demo](https://codepen.io/solygambas/full/qBqvyEB) | -| 070 | [Typing Game](070-typing%20game) | [Live Demo](https://codepen.io/solygambas/full/wvoOQvq) | -| 071 | [Speech Text Reader](071-speech%20text%20reader) | [Live Demo](https://codepen.io/solygambas/full/QWGPLVM) | -| 072 | [Memory Cards](072-memory%20cards) | [Live Demo](https://codepen.io/solygambas/full/oNYOqjv) | -| 073 | [Lyrics Search App](073-lyrics%20search%20app) | [Live Demo](https://codepen.io/solygambas/full/ExNzPKV) | -| 074 | [Relaxer App](074-relaxer%20app) | [Live Demo](https://codepen.io/solygambas/full/wvobMzE) | -| 075 | [Breakout Game](075-breakout%20game) | [Live Demo](https://codepen.io/solygambas/full/oNYrNKj) | -| 076 | [New Year Countdown](076-new%20year%20countdown) | [Live Demo](https://codepen.io/solygambas/full/rNWEaBb) | -| 077 | [Sortable List](077-sortable%20list) | [Live Demo](https://codepen.io/solygambas/full/qBqzEdO) | -| 078 | [Speak Number Guessing Game](078-speak%20number%20guessing%20game) | [Live Demo](https://codepen.io/solygambas/full/jOVjEre) | -| 079 | [Creative Agency Website](079-creative%20agency%20website) | [Live Demo](https://codepen.io/solygambas/full/LYbKoRj) | -| 080 | [Health Dashboard](080-health%20dashboard) | [Live Demo](https://codepen.io/solygambas/full/XWNvEKz) | -| 081 | [Animated SVG](081-animated%20SVG) | [Live Demo](https://codepen.io/solygambas/full/vYyoVWR) | -| 082 | [Parallax Landing Page](082-parallax%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/ExZxxRo) | -| 083 | [Full-Screen Image Slider](083-full%20screen%20image%20slider) | [Live Demo](https://codepen.io/solygambas/full/JjEoEdb) | -| 084 | [Fluid Image Lightbox](084-fluid%20image%20lightbox) | [Live Demo](https://codepen.io/solygambas/full/MWJKpwg) | -| 085 | [Sneaker Shop](085-sneaker%20shop) | [Live Demo](https://codepen.io/solygambas/full/KKazqNZ) | -| 086 | [Coming Soon Page](086-coming%20soon%20page) | [Live Demo](https://codepen.io/solygambas/full/bGgwNaM) | -| 087 | [Sliding Sign In & Sign Up Form](087-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm) | -| 088 | [Promo Code](088-promo%20code) | [Live Demo](https://codepen.io/solygambas/full/wvggBXe) | -| 089 | [One Color UI](089-one%20color%20UI) | [Live Demo](https://codepen.io/solygambas/full/NWdpPqx) | -| 090 | [Tooltip](090-tooltip) | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb) | -| 091 | [Chat Interface](091-chat%20interface) | [Live Demo](https://codepen.io/solygambas/full/MWJxaOJ) | -| 092 | [Music Streaming Service](092-music%20streaming%20service) | [Live Demo](https://codepen.io/solygambas/full/qBRvLmg) | -| 093 | [Creative Portfolio](093-creative%20portfolio) | [Live Demo](https://codepen.io/solygambas/full/zYNbgxR) | -| 094 | [Laptop UI](094-laptop%20UI) | [Live Demo](https://codepen.io/solygambas/full/eYgoxMo) | -| 095 | [Headphones Product Page](095-headphones%20product%20page) | [Live Demo](https://codepen.io/solygambas/full/KKaLmEr) | -| 096 | [Cloud Hosting Service](096-cloud%20hosting%20service) | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr) | -| 097 | [Terminal Style Landing Page](097-terminal%20style%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/BaWvXLG) | -| 098 | [Magazine Layout](098-magazine%20layout) | [Live Demo](https://codepen.io/solygambas/full/OJpGMyj) | -| 099 | [Parallax Website](099-parallax%20website) | [Live Demo](https://codepen.io/solygambas/full/poeBdPr) | -| 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone) | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy) | -| 101 | [Cascade Layers](101-cascade%20layers) | [Live Demo](https://codepen.io/solygambas/full/poYaZmv) | -| 102 | [Container queries](102-container%20queries) | [Live Demo](https://codepen.io/solygambas/full/abMqPNy) | +| # | Project | Live Demo | +| :-: | ---------------------------------------------------------------------- | -------------------------------------------------------------- | +| 001 | [Expanding Cards](001-expanding%20cards) | [Live Demo](https://codepen.io/solygambas/full/qBaMWjE) | +| 002 | [Progress Steps](002-progress%20steps) | [Live Demo](https://codepen.io/solygambas/full/VwKGzzg) | +| 003 | [Rotating Navigation Animation](003-rotating%20navigation) | [Live Demo](https://codepen.io/solygambas/full/jOMvZqY) | +| 004 | [Hidden Search Widget](004-hidden%20search%20widget) | [Live Demo](https://codepen.io/solygambas/full/mdrzdPB) | +| 005 | [Blurry Loading](005-blurry%20loading) | [Live Demo](https://codepen.io/solygambas/full/WNGaNgB) | +| 006 | [Scroll Animation](006-scroll%20animation) | [Live Demo](https://codepen.io/solygambas/full/JjRmoWL) | +| 007 | [Split Landing Page](007-split%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/KKgGdmY) | +| 008 | [Form Wave](008-form%20wave%20animation) | [Live Demo](https://codepen.io/solygambas/full/Exgdegm) | +| 009 | [Sound Board](009-sound%20board) | [Live Demo](https://codepen.io/solygambas/full/oNzaPQa) | +| 010 | [Dad Jokes](010-dad%20jokes) | [Live Demo](https://codepen.io/solygambas/full/gOwBQZK) | +| 011 | [Event Keycodes](011-event%20KeyCodes) | [Live Demo](https://codepen.io/solygambas/full/zYKmypd) | +| 012 | [FAQ Collapse](012-FAQ%20collapse) | [Live Demo](https://codepen.io/solygambas/full/ExgdqWm) | +| 013 | [Random Choice Picker](013-random%20choice%20picker) | [Live Demo](https://codepen.io/solygambas/full/eYdQgqN) | +| 014 | [Animated Navigation](014-animated%20navigation) | [Live Demo](https://codepen.io/solygambas/full/KKgrWGz) | +| 015 | [Incrementing Counter](015-incrementing%20counter) | [Live Demo](https://codepen.io/solygambas/full/qBaQmeW) | +| 016 | [Drink Water](016-drink%20water) | [Live Demo](https://codepen.io/solygambas/full/yLaQoJy) | +| 017 | [Movie App](017-movie%20app) | [Live Demo](https://codepen.io/solygambas/full/mdrabXd) | +| 018 | [Background Slider](018-background%20slider) | [Live Demo](https://codepen.io/solygambas/full/OJRrVbJ) | +| 019 | [Theme Clock](019-theme%20clock) | [Live Demo](https://codepen.io/solygambas/full/MWjZrZy) | +| 020 | [Button Ripple Effect](020-button%20ripple%20effect) | [Live Demo](https://codepen.io/solygambas/full/oNzJdWw) | +| 021 | [Drag N Drop](021-drag%20n%20drop) | [Live Demo](https://codepen.io/solygambas/full/RwGEyme) | +| 022 | [Drawing App](022-drawing%20app) | [Live Demo](https://codepen.io/solygambas/full/wvzREMx) | +| 023 | [Kinetic Loader](023-kinetic%20loader) | [Live Demo](https://codepen.io/solygambas/full/JjRwVLW) | +| 024 | [Content Placeholder](024-content%20placeholder) | [Live Demo](https://codepen.io/solygambas/full/ExgGzaX) | +| 025 | [Sticky Navbar](025-sticky%20navigation) | [Live Demo](https://codepen.io/solygambas/full/VwKqJmw/) | +| 026 | [Double Vertical Slider](026-double%20vertical%20slider) | [Live Demo](https://codepen.io/solygambas/full/wvzNwqB) | +| 027 | [Toast Notification](027-toast%20notification) | [Live Demo](https://codepen.io/solygambas/full/YzGBNgW) | +| 028 | [GitHub Profiles](028-github%20profiles) | [Live Demo](https://codepen.io/solygambas/full/GRjzmVR) | +| 029 | [Double Click Heart](029-double%20click%20heart) | [Live Demo](https://codepen.io/solygambas/full/XWjOaOK) | +| 030 | [Auto Text Effect](030-auto%20text%20effect) | [Live Demo](https://codepen.io/solygambas/full/JjRxrbM) | +| 031 | [Password Generator](031-password%20generator) | [Live Demo](https://codepen.io/solygambas/full/rNMRvWb) | +| 032 | [Good Cheap Fast](032-good%20cheap%20fast) | [Live Demo](https://codepen.io/solygambas/full/QWKoxwP) | +| 033 | [Notes App](033-notes%20app) | [Live Demo](https://codepen.io/solygambas/full/qBavQog) | +| 034 | [Animated Countdown](034-animated%20countdown) | [Live Demo](https://codepen.io/solygambas/full/vYXPbYW) | +| 035 | [Image Carousel](035-image%20carousel) | [Live Demo](https://codepen.io/solygambas/full/zYKbQZK) | +| 036 | [Hoverboard](036-hoverboard) | [Live Demo](https://codepen.io/solygambas/full/OJRqYKK) | +| 037 | [Pokedex](037-pokedex) | [Live Demo](https://codepen.io/solygambas/full/gOwygyP) | +| 038 | [Mobile Tab Navigation](038-mobile%20tab%20navigation) | [Live Demo](https://codepen.io/solygambas/full/eYdoexM) | +| 039 | [Password Strength Background](039-password%20strength%20background) | [Live Demo](https://codepen.io/solygambas/full/YzGMYzz) | +| 040 | [3D Background Boxes](040-3d%20boxes%20background) | [Live Demo](https://codepen.io/solygambas/full/zYKXpBe) | +| 041 | [Verify Account UI](041-verify%20account%20UI) | [Live Demo](https://codepen.io/solygambas/full/KKgYZWR) | +| 042 | [Live User Filter](042-live%20user%20filter) | [Live Demo](https://codepen.io/solygambas/full/OJRGzjg) | +| 043 | [Feedback UI Design](043-feedback%20UI%20design) | [Live Demo](https://codepen.io/solygambas/full/PoGgEOm) | +| 044 | [Custom Range Slider](044-custom%20range%20slider) | [Live Demo](https://codepen.io/solygambas/full/WNGBrjZ) | +| 045 | [Netflix Mobile Navigation](045-netflix%20mobile%20navigation) | [Live Demo](https://codepen.io/solygambas/full/NWRVxgv) | +| 046 | [Quiz App](046-quiz%20app) | [Live Demo](https://codepen.io/solygambas/full/PoGvZEW) | +| 047 | [Testimonial Box Switcher](047-testimonial%20box%20switcher) | [Live Demo](https://codepen.io/solygambas/full/ExgzPRz) | +| 048 | [Random Image Feed](048-random%20image%20generator) | [Live Demo](https://codepen.io/solygambas/full/eYdaJQx) | +| 049 | [Todo List](049-todo%20list) | [Live Demo](https://codepen.io/solygambas/full/eYdaJoo) | +| 050 | [Insect Catch Game](050-insect%20catch%20game) | [Live Demo](https://codepen.io/solygambas/full/oNzRbKx) | +| 051 | [Video Background](051-video%20background) | [Live Demo](https://codepen.io/solygambas/full/oNYNLwL) | +| 052 | [Portfolio with CSS Grid](052-portfolio%20grid) | [Live Demo](https://codepen.io/solygambas/full/MWbKzzO) | +| 053 | [Touch Slider](053-touch%20slider) | [Live Demo](https://codepen.io/solygambas/full/QWGEyLK) | +| 054 | [CSS Loaders](054-css%20loaders) | [Live Demo](https://codepen.io/solygambas/full/QWGdgaZ) | +| 055 | [Glass Dashboard](055-glass%20dashboard) | [Live Demo](https://codepen.io/solygambas/full/oNYpQMo) | +| 056 | [Image Comparison Slider](056-image%20comparison%20slider) | [Live Demo](https://codepen.io/solygambas/full/RwoMLYW) | +| 057 | [Parallax Background with SVG](057-parallax%20background%20svg) | [Live Demo](https://codepen.io/solygambas/full/vYyjjbz) | +| 058 | [3D Product Card](058-3D%20product%20card) | [Live Demo](https://codepen.io/solygambas/full/wvoXWPq) | +| 059 | [Form Validator](059-form%20validator) | [Live Demo](https://codepen.io/solygambas/full/MWbPJjb) | +| 060 | [Movie Seat Booking](060-movie%20seat%20booking) | [Live Demo](https://codepen.io/solygambas/full/xxRQEOy) | +| 061 | [Custom Video Player](061-custom%20video%20player) | [Live Demo](https://codepen.io/solygambas/full/mdOQadY) | +| 062 | [Exchange Rate Calculator](062-exchange%20rate%20calculator) | [Live Demo](https://codepen.io/solygambas/full/abBPJBG) | +| 063 | [DOM Array Methods](063-DOM%20array%20methods) | [Live Demo](https://codepen.io/solygambas/full/NWbeXYR) | +| 064 | [Menu Slider & Modal](064-menu%20slider%20modal) | [Live Demo](https://codepen.io/solygambas/full/MWbLeKd) | +| 065 | [Hangman Game](065-hangman%20game) | [Live Demo](https://codepen.io/solygambas/full/MWbLEYr) | +| 066 | [Meal Finder](066-meal%20finder) | [Live Demo](https://codepen.io/solygambas/full/dyOagYE) | +| 067 | [Expense Tracker](067-expense%20tracker) | [Live Demo](https://codepen.io/solygambas/full/OJbqyro) | +| 068 | [Music Player](068-music%20player) | [Live Demo](https://codepen.io/solygambas/full/LYbaZNG) | +| 069 | [Infinite Scroll Posts](069-infinite%20scroll%20posts) | [Live Demo](https://codepen.io/solygambas/full/qBqvyEB) | +| 070 | [Typing Game](070-typing%20game) | [Live Demo](https://codepen.io/solygambas/full/wvoOQvq) | +| 071 | [Speech Text Reader](071-speech%20text%20reader) | [Live Demo](https://codepen.io/solygambas/full/QWGPLVM) | +| 072 | [Memory Cards](072-memory%20cards) | [Live Demo](https://codepen.io/solygambas/full/oNYOqjv) | +| 073 | [Lyrics Search App](073-lyrics%20search%20app) | [Live Demo](https://codepen.io/solygambas/full/ExNzPKV) | +| 074 | [Relaxer App](074-relaxer%20app) | [Live Demo](https://codepen.io/solygambas/full/wvobMzE) | +| 075 | [Breakout Game](075-breakout%20game) | [Live Demo](https://codepen.io/solygambas/full/oNYrNKj) | +| 076 | [New Year Countdown](076-new%20year%20countdown) | [Live Demo](https://codepen.io/solygambas/full/rNWEaBb) | +| 077 | [Sortable List](077-sortable%20list) | [Live Demo](https://codepen.io/solygambas/full/qBqzEdO) | +| 078 | [Speak Number Guessing Game](078-speak%20number%20guessing%20game) | [Live Demo](https://codepen.io/solygambas/full/jOVjEre) | +| 079 | [Creative Agency Website](079-creative%20agency%20website) | [Live Demo](https://codepen.io/solygambas/full/LYbKoRj) | +| 080 | [Health Dashboard](080-health%20dashboard) | [Live Demo](https://codepen.io/solygambas/full/XWNvEKz) | +| 081 | [Animated SVG](081-animated%20SVG) | [Live Demo](https://codepen.io/solygambas/full/vYyoVWR) | +| 082 | [Parallax Landing Page](082-parallax%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/ExZxxRo) | +| 083 | [Full-Screen Image Slider](083-full%20screen%20image%20slider) | [Live Demo](https://codepen.io/solygambas/full/JjEoEdb) | +| 084 | [Fluid Image Lightbox](084-fluid%20image%20lightbox) | [Live Demo](https://codepen.io/solygambas/full/MWJKpwg) | +| 085 | [Sneaker Shop](085-sneaker%20shop) | [Live Demo](https://codepen.io/solygambas/full/KKazqNZ) | +| 086 | [Coming Soon Page](086-coming%20soon%20page) | [Live Demo](https://codepen.io/solygambas/full/bGgwNaM) | +| 087 | [Sliding Sign In & Sign Up Form](087-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm) | +| 088 | [Promo Code](088-promo%20code) | [Live Demo](https://codepen.io/solygambas/full/wvggBXe) | +| 089 | [One Color UI](089-one%20color%20UI) | [Live Demo](https://codepen.io/solygambas/full/NWdpPqx) | +| 090 | [Tooltip](090-tooltip) | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb) | +| 091 | [Chat Interface](091-chat%20interface) | [Live Demo](https://codepen.io/solygambas/full/MWJxaOJ) | +| 092 | [Music Streaming Service](092-music%20streaming%20service) | [Live Demo](https://codepen.io/solygambas/full/qBRvLmg) | +| 093 | [Creative Portfolio](093-creative%20portfolio) | [Live Demo](https://codepen.io/solygambas/full/zYNbgxR) | +| 094 | [Laptop UI](094-laptop%20UI) | [Live Demo](https://codepen.io/solygambas/full/eYgoxMo) | +| 095 | [Headphones Product Page](095-headphones%20product%20page) | [Live Demo](https://codepen.io/solygambas/full/KKaLmEr) | +| 096 | [Cloud Hosting Service](096-cloud%20hosting%20service) | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr) | +| 097 | [Terminal Style Landing Page](097-terminal%20style%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/BaWvXLG) | +| 098 | [Magazine Layout](098-magazine%20layout) | [Live Demo](https://codepen.io/solygambas/full/OJpGMyj) | +| 099 | [Parallax Website](099-parallax%20website) | [Live Demo](https://codepen.io/solygambas/full/poeBdPr) | +| 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone) | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy) | +| 101 | [Cascade Layers](101-cascade%20layers) | [Live Demo](https://codepen.io/solygambas/full/poYaZmv) | +| 102 | [Container queries](102-container%20queries) | [Live Demo](https://codepen.io/solygambas/full/abMqPNy) | +| 103 | [Halloween landing page](102-halloween%20landing%20page) | [Live Demo](https://jeff-mz.github.io/Halloween-landing-page/) | ## Get Inspired -Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process. +Check out our [**collection of articles**](https://www.onbusinessplan.com/) for +those beginning their web development journey. Find tips, tricks, and +motivational content to keep you engaged and motivated throughout your learning +process. ## Share Your Insights -We want to hear from you! Help us tailor our content to better meet your needs by participating in our brief survey. Your feedback is invaluable in guiding us to create the most relevant and useful resources for developers and freelancers. [**Take the survey here**](https://forms.gle/sSWJ4uAcTdFJu6W76). +We want to hear from you! Help us tailor our content to better meet your needs +by participating in our brief survey. Your feedback is invaluable in guiding us +to create the most relevant and useful resources for developers and freelancers. +[**Take the survey here**](https://forms.gle/sSWJ4uAcTdFJu6W76). ## Setup Instructions To get started with these projects, follow these simple steps: -1. **Fork the Repository**: Click on the "Fork" button at the top-right corner of this page to create a copy of the repository in your GitHub account. +1. **Fork the Repository**: Click on the "Fork" button at the top-right corner + of this page to create a copy of the repository in your GitHub account. -2. **Clone the Repository**: Clone the forked repository to your local machine using the following command in your terminal: +2. **Clone the Repository**: Clone the forked repository to your local machine + using the following command in your terminal: ```bash git clone https://github.com/Your-Username/html-css-javascript-projects.git ``` -3. **Open with VS Code**: Open the cloned repository in [Visual Studio Code](https://code.visualstudio.com/) (VS Code) or your preferred code editor. +3. **Open with VS Code**: Open the cloned repository in + [Visual Studio Code](https://code.visualstudio.com/) (VS Code) or your + preferred code editor. -4. **Install Live Server Extension**: If you haven't already, install the Live Server extension for VS Code. This extension allows you to launch a local development server and automatically refresh your browser whenever you make changes to your HTML, CSS, or JavaScript files. You can install it from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). +4. **Install Live Server Extension**: If you haven't already, install the Live + Server extension for VS Code. This extension allows you to launch a local + development server and automatically refresh your browser whenever you make + changes to your HTML, CSS, or JavaScript files. You can install it from the + [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). -5. **Start Coding**: Start exploring the projects, make changes, experiment with different ideas, and unleash your creativity! Use Live Server to preview your changes in real-time and see how they affect the project. +5. **Start Coding**: Start exploring the projects, make changes, experiment with + different ideas, and unleash your creativity! Use Live Server to preview your + changes in real-time and see how they affect the project. ## Acknowledgments @@ -148,14 +169,24 @@ This repository is mostly based on two courses by Brad Traversy (2020): In addition, other projects are adapted from various YouTube channels: -- Brad Traversy - [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA) -- Shaun Pelling - [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg) -- Simo Edwin - [Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q) -- Gary Simon - [DesignCourse](https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow) -- Kyle Cook - [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw) +- Brad Traversy - + [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA) +- Shaun Pelling - + [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg) +- Simo Edwin - + [Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q) +- Gary Simon - + [DesignCourse](https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow) +- Kyle Cook - + [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw) - [Kevin Powell](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw) - [Florin Pop](https://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA) ## Show Your Support -If you find these projects helpful or interesting, please consider starring the repository. It's a simple gesture that helps to boost the visibility of the project and show appreciation for the effort put into creating it. Additionally, if you'd like to support my work further, you can [**become a sponsor**](https://github.com/sponsors/solygambas). Your support is greatly appreciated. Thank you! +If you find these projects helpful or interesting, please consider starring the +repository. It's a simple gesture that helps to boost the visibility of the +project and show appreciation for the effort put into creating it. Additionally, +if you'd like to support my work further, you can +[**become a sponsor**](https://github.com/sponsors/solygambas). Your support is +greatly appreciated. Thank you!