How to create responsive landing page with dark mode

Описание: #landingpage #responsive #css #javascript #html

💡 In this video, I showcase my latest project, a website landing page for a shoe company. The landing page features a stunning header section, eye-catching hero section, and a beautifully designed product section. The design is fully responsive and looks great on both mobile and desktop screens. To add to the user experience, I've included a custom scroll bar and animated elements using scroller reveal. Users can also switch between a dark and light mode. This project is a great example of my skills in web design and development using HTML, CSS, and JS. Watch the video to see a demo of the website in action.

⏳ Timestamp

00:00 - Demo
01:47 - project files
02:35 - Header section
17:00 - Hero section
23:00 - Hero image
24:00 - Product section
32:35 - Breakpoints
34:00 - Scroll bar
36:00 - Dark theme
39:30 - Scroll reveal Animation
41:30 - Preview

📂 Source Code:
➡️ https://github.com/Dinil-Thilakarathn...

🚀 Live Demo :
➡️ https://dinil-thilakarathne.github.io...

📚 Assets :
Code editor :[https://code.visualstudio.com/
Icons : https://boxicons.com/
Scroll reveal : https://scrollrevealjs.org/
Source Code : https://github.com/Dinil-Thilakarathn...

💡 Don't forget to check out my previous videos on Youtube :

➡️ The Complete Guide to Building a Responsive Landing Page with HTML, CSS, & JS | Frontend Mentor :
   • The Complete Guide to Building a Responsiv...  

➡️ Learn JavaScript: Day 1 - Build a Color Generator from Scratch :
   • Learn JavaScript: Day 1 - Build a Color Ge...  

➡️ Responsive Portfolio Landing page with Dark Theme using HTML , CSS & JS :
   • Responsive Portfolio Landing page with Dar...  

➡️ Responsive Product Card Using HTML, CSS & JS :
   • Responsive Product Card Using HTML, CSS & JS  

➡️ Responsive Landing Page using ChatGPT AI Plugin on VS Code | Create Your Website in Minutes! :
   • Responsive Landing Page using ChatGPT AI P...  

➡️ Portfolio landing page with dark mode using HTML , CSS & JavaScript | Template :
   • Portfolio landing page with dark mode usin...  

➡️ Animated Card using HTML and CSS :
   • Animated Card using HTML and CSS  

➡️ Portfolio landing page using HTML and CSS | Template :
   • Portfolio landing page using HTML  and CSS...  

➡️ Modern Product Card using HTML and CSS | Sona Code :
   • Modern Product Card using HTML and CSS | S...  

🗨️ Contact Me

Instagram :   / sona_code  
Youtube :    / @sonacode  

🎵 Music:

Song: AERØHEAD - Leaving
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution-ShareAlike 3.0 Unported
Video Link: [   • AERØHEAD - Leaving (Vlog No Copyright Music)  ](   • AERØHEAD - Leaving (Vlog No Copyright Music)  )

Song: Hotham - Find
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported
Video Link: [   • Hotham - Find (Vlog No Copyright Music)  ](   • Hotham - Find (Vlog No Copyright Music)  )

Thank you so much for watching my video! I hope you found it informative and enjoyable. Don't forget to subscribe to my channel for more content like this. Stay tuned for my next video and keep in touch with my channel for updates and new tutorials. Let's continue learning and growing together!

#webdesign #webdevelopment #frontend #react #moderndesign #sonacode