Responsive Website Landing Page | With Full-Screen Draggable Image Slider - Html, Css & Javascript
HTML-код
- Опубликовано: 16 май 2024
- Responsive Website Landing Page Example | With Full-Screen Draggable Image Slider - Html, CSS & Javascript
In this video, you will learn how to design a website landing page with a modern draggable image slider with thumbs view using HTML, CSS, and Javascript.
∎ Get This Project Source Codes - www.buymeacoffee.com/codingsn...
∎ Get Access To All Source Codes - / codingsnow
✔️ Clear Coding
✔️ Easy to Follow
Project Features -
✔️ Responsive
✔️ Draggable Image Slider With Thumbs Navigation View
✔️ Reveal Element On Sliding
✔️ Sticky Navigation Menu (Glassmorphism)
✔️ Popup Navigation Menu (Mobile View)
✔️ Customized Scrollbar
📚 Chapters
-------------------------
0:00 - Project Demo
3:22 - Files setup
3:49 - Link Unicons
4:11 - Header (Html)
6:38 - Google fonts
7:22 - CSS Variables
8:30 - Main Css
8:59 - Header (Css)
12:54 - Home (Html, Css with Swiper Js)
38:02 - About section (Html, Css)
40:32 - Sticky navigation bar (Css, Javascript)
43:25 - Webkit Scrollbar
44:22 - Media queries (All)
+ Like and Subscribe 🔔 for More! ❤
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsn...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsn...
∎ View Source Code & Download File Setup - codingsnow.com
∎ Download Source Files On Patreon - / 62278974
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - / codingsnow
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
🔗External Sources
------------------------------------
∎ Image Source - pexels.com
∎ Unicons Library - iconscout.com/unicons
∎ SwiperJS - swiperjs.com
#CodingSnow #WebDesign #ImageSlider
____________________
Copyright Disclaimer under section 107 of the Copyright Act of 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing.
Amazing! I want to say thank you for show your knowledge.
Thank you for your teaching, it has been very helpful to me.
Beautiful, thankyou bro❤
you have got a new subscriber. Thanks Brother. ❤️
Thanks guys, this is very helpful. Success
thanks brother...much appreciated
Hey Snow not sure why but can't get the nav bar in mobile view to work from the files downloaded on your site {and copy pasting the html / css obviously}.
isA sa malupet na landing website... 1k likes to pomis...keep up the good work !
hi can i use the vue instead of core?
Thanks dude... Your contents is worth a lot to me for study... I hope a lot and massive people come to watch and studying how to developing a web from your content
Is this possible to do without any buncle folders? I want to make my own but that bundle folder is messing things up.
haii. in love with your videos!! just one question. how do i include a proper logo
Amazing work brother 😍👌
God bless you!
Thank you brother ❤
Thank you brother
Keep it up ♥️
beautiful
I like your intro too
Brother Which Theme are you using!
Awesome design congratulation. Guys what is the music genre?
thank you
ගොඩක් හොදයි
thanks man! completed the video!
Anytime! ❤️
Is this possible to do without any buncle folders? I want to make my own but that bundle folder is messing things up.
How do you add a logo image to fit in html
Great!!!... can we make this slide automatically without draggable so it can slides automatically one by one...
What's the size of the image used??
How if i use sublime text,What i can sir?
My webpage is biiig with scrollbars💔
And am using a 1920 1080p image.. Need help
hi really nice video, the coding is clean. but coould you added vo or text in the video for exmaple, why u use calc for the height, it really helpful for a beginner like me.
Greetings! There is no specific reason to use calc for the height of the navigation bar. You can use only the px/em value if you want.
you`ve done a great job but what is the point of having that read-more button that i never see that you link that to anything . It is the same issue to your previous videos as well.
It’s wonderful! Thank u so much!❤️ Please, can u create a Spotify clone Website?🙏🏻🥺
ruclips.net/video/o2kYyvxtAAQ/видео.html
ruclips.net/video/ivcwK6j1xZs/видео.html
Is this possible to do without any buncle folders? I want to make my own but that bundle folder is messing things up.
Awesome ❤️
Thank you ❤
Which software😁
why u adding transition everywhere??
hello, nice work but is it normal to be able to move the thumbs-container to the left and right?
Yes, It is because of the swiper default css styles
@@CodingSnow Ah okay, problem is only when I drag it to the left it does not automatically go back to the original position
47:44
I followed your steps but dragging is not working for me other than webpage occupied big space with scroll bars
I think you've done something wrong or something missed. Check your codes again.
Update the main.js file as shown in the video (copy paste)
.
can to you plz share this code
What the hell is that bundle folder? It just ruins everything.