Summary
Keywords
Full Transcript
Responsive lamp website design using HTML CSS & JavaScript. With CSS animations when scrolling. Includes a light and dark theme. And deployment of website to the internet. Developed first with the mobile first methodology, then for desktop. π Subscribe for more! https://www.youtube.com/@Bedimcode - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - β€οΈ Get source code https://buymeacoffee.com/bedimcode/e/136181 π Get source code by PayPal https://ko-fi.com/s/fd8719e586 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - π¨βπ» Build the project from scratch https://github.com/bedimcode/responsive-lamp-website π Download (files + images) - Click on the GitHub link - Click the green button (code) - Click Download ZIP πAssets Icons: https://remixicon.com/ Fonts: https://fonts.google.com/ JS Functions: https://github.com/bedimcode/responsive-watches-website Swiper: https://swiperjs.com/ ScrollReveal: https://scrollrevealjs.org/ Netlify: https://www.netlify.com/ β± Timestamps 0:00 Intro Responsive Lamp Website 5:32 Project Setup 7:25 Variables CSS 7:34 Reset HTML & Reusable CSS 10:46 Header & Nav 21:45 Section Home 34:39 Buttons 36:50 Change Background Header 38:52 Section Popular 55:12 Section Choose 1:13:35 Section Features 1:22:06 Section Products 1:29:16 Section Join 1:36:06 Footer 1:46:20 Scroll Bar 1:47:27 Scroll Up 1:50:16 Scroll Sections Active Link 1:52:00 Dark/Light Theme 2:05:40 Breakpoints 2:45:18 ScrollReveal Animation 2:49:12 Final Project 2:50:35 Website Deployment (Uploading to the internet) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - βοΈ Inspirate https://dribbble.com/shots/16555124-Sulight-Light-Company-Landing-Page-Website πΈ Original Images https://unsplash.com/ π¬ Doubts in the project send a DM to Facebook β I answer at 6:00 PM (PerΓΊ time) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - βοΈ Support me https://www.buymeacoffee.com/bedimcode https://ko-fi.com/bedimcode π Thanks for watching! Make sure to like + Subscribe for more! π #responsivewebsite #websitehtmlcss #bedimcode
