🏢 RESPONSIVE Landing Page using HTML CSS & JavaScript
🧠 Knowledge
Hello Everyone, once again we are bringing a new video on Responsive Landing Page using HTML & CSS, and JavaScript 🏢, So in this video, we design a responsive landing page design very simply with the help of CSS grid & Flex box layout system & will also use the one of the powerful JavaScript animation library called as GSAP from Greensock so stay tuned.
I hope you might like this video ❤️
📂 Assets used in the video 👇
Free Icons: https: https://www.boxicons.com
Free Fonts: https: https://www.fonts.google.com/
1) Javascript Animation library : https://greensock.com/gsap/
2) Javascript Animation library :https://scrollrevealjs.org/
👨💻 Want the Source Code 👇
📋 Download (Files & images)
Click on the below link for source code 👇
https://github.com/ananikets18/Real-Estate-RESPONSIVE-Landing-Page
🧑🎨 Credit for the design 👇
https://dribbble.com/shots/16972523-Serumah-Real-Estate-Market-Landing-Page
🧑 Credit for the images 👇
https://unsplash.com/@radoslavbali
https://unsplash.com/@ronnyrondonph
https://unsplash.com/@alex_andrews
https://unsplash.com/@apriiil
⏱ Timestamps in the video
0:00 – Intro
1:31 – Folder Structure
3:00 – CSS Variables
6:19 – Root Reset
6:43 – HTML Reset🏛️
08:09 – Header HTML🏛️
9:33 – Navbar CSS🎨
10:54 – Mobile Nav menu
12:34 – Toggle Nav menu()
13:21 – Hero HTML 🏛️
14:51 – Hero CSS🎨
18:03 – Featured HTML🏛️
18:47 – Featured CSS🎨
20:14 – Features HTML🏛️
22:29 – Features CSS🎨
27:26 – Blog HTML🏛️
29:11 – Blog CSS🎨
33:06 – Testimonials HTML🏛️
35:15 – Testimonials CSS🎨
36:25 – Questions HTML🏛️
38:09 – Questions CSS🎨
43:19 – Get Started CTA HTML🏛️
43:50 – Get Started CTA CSS🎨
45:54 – Footer Menu HTML🏛️
48:09 – Footer menu CSS🎨
50:07 – Footer Copyright HTML🏛️
50:23 – Footer Copyright CSS🎨
50:49 – Responsive Media quries
55:09 – GSAP Animations
57:14 – ScrollReveal Animations
🔔 Subscribe For More!
https://www.youtube.com/@UCQ-Ina14_fEZIRMCYFTlImw
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – — — – – – – — – – – – – – –
🎵 Music used in the video
Song: Balynt – No Gravity
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/28ASX3Ng4N8
Song: Balynt – Sundown
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/KvmIXRHYaOA
Song: Tinora – Feel The Wind
Music provided by Vlog No Copyright Music.
Video Link : https://youtu.be/zJyigsQOCcM
Song: VDGL – Interstellar
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/G5r6CoJY6aU
Song: TVARI – Saga
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/mQchtEpJHcQ
Song: TVARI – Way
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/3h5b5QpPxzs
Song : DayFox – Welcome To Bali
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/wZPRpOCje-c
Song: Lichu & DayFox – Tropical Bali
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/pf5Is-T5fGE
Song : Fredji – Happy Life (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/KzQiRABVARk
Song: Waesto – Home
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/sn-HC7nSRKc
#responsivelandingpage #responsivewebsite #annicode
Related :
responsive landing page,
responsive landing page HTML CSS,
responsive landing page HTML CSS JavaScript,
responsive landing page design,
responsive landing page using HTML CSS JavaScript,
landing page using HTML and CSS,
responsive website HTML CSS,