Responsive Footer Section Design using only HTML & CSS
HTML-код
- Опубликовано: 8 апр 2020
- Responsive Footer Section Design using only HTML & CSS
In this video, I have shown you how you can create a responsive footer section using HTML and CSS only. Don't forget to watch the full video.
NOTE: Nowadays that font awesome link I provided not support so your icon may not be showing. Please use the latest CDN link which you can easily find on Google.
Download Codes From Here - www.codingnepalweb.com
Responsive Footer Section (Part - 2) [HTML] [CSS]
➤ • Responsive Footer Sect...
Second Channel - bit.ly/3aHNkru
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • BEAUZ & JVNA - Crazy |...
Track: Cartoon - Howling (Ft. Asena) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Cartoon, Jéja - Howlin...
![Sean Rii, Karyon, Sharzkii - Taungule [My Love] (Official Music Video)](http://i.ytimg.com/vi/eJoMuypbSzQ/mqdefault.jpg)
Nowadays font awesome CDN link/script that I provided not support so your icons may not be showing. Just replace that script tag with this
please give the php file for this html form
i love your work
i have a request
can you create any card than can turnover when onclick and can show informations
merci
@@hirunatechlk you gotta go to a form tutorial for that.
If you are having issues with the footer being fixed, just change the footer position property to 'relative' and it will work.
footer{
position: relative;
bottom: 0px;
width: 100%;
background: rgb(85, 83, 83);
}
dude.u saved my life!.thank you so much
Thank you code Nepal, i was in a hurry to complete my project just downloaded the source code for the footer section, thanks much code Nepal. cheers from Hyderabad India.
Happy to see this kind of Nepali Channel.
Thank you so much :)
muito obrigada, tentei com vários mas o teu tutorial foi o melhor.
You just earned a subscriber and a like♥ buddy .Awesome work keep going
Thank you bro 💙
Very good work and useful dude. Got your code and cartoon howling song too.
Thank you 💙
thank alot brother....
i will wait your videos soon
You're welcome bro 💙
Please never delete any of your videos. All of them are at the next level.
Ok.. Keep watching 😁
@@CodingNepal Thanks!
the best video I have watched today.
Hi, I dont know, but before this song a smile appears on my face! Didn't you think of changing the song? I recomend NEFFEX!
Yes I'll change it.
@@CodingNepal please I’ve tried adding the footer to the other responsive drop down video but I’ve tried everything and it doesn’t work fine. Please what can I do?
when i have finished coding i notice that when the size of the window is reduced everything is fine but in full screen the black back background disappears and the elements written in the footer are found at the top
Just add position fixed and bottom 0
Ótimo vídeo parabéns 👏.
nice content keep it up bro best of luck
Thank you bro 💙
Thank you so much ... byiya be bright
A very wonderful tutorial thank very much
You're welcome... Stay tuned 😁
thank you so much for this video :)
You're welcome 💙
Very good. SUPER. 👍👍👍
Thank you 💙
Thanks man you are the best coder
You're welcome 💙
please I’ve tried adding the footer to the other responsive drop down video but I’ve tried everything and it doesn’t work fine. Please what can I do?
You can contact me on Instagram for this
Hey man, what's the first line in your css file? didn't see it all cause of the other tab was blocking it
Here is the codes.. Please visit - www.codingnepalweb.com/2020/04/responsive-footer-section-design-html-css.html
@@CodingNepal thank you!
bro i want to remove Category from URL in WordPress. Can you help?
Hello there! Why my footer position appear at the top of my page
Thank you so much
muy elegante tu footer como se dice en ingles ... Thanks you very much..
English please
Nice Footer section
Thank you 💙
Sir ur code is awesome.But when I attached to it on my homepage then all addresses n contact us details got overlapped.What should I do?
i have no knowledge of css whatsoever can i implement that on my footer? its in the middle of the page and i cant seem to put it down. i dont know if i have any tech issues that i need to adjust cause i just started wordpress 2 weeks ago and i really need top finish my website in order to start my business... is there any wordpress video about the tech stuff we should adjust?
No I haven't any videos on WordPress and you have to basic or little bit knowledge of html and css to implement this footer according to your site. Otherwise you may have problems.
@@CodingNepal what can i do brother? this is the foundation of my business i cant do anything else unless i finish the website... where can i get help about this?
Good job 🙌
Thank you 💙
thank you
very much
You are welcome
Thanks for the video.
You're welcome.. Stay tuned 😁
Can I add the footer to my website and change something? I ask that because I think you own the copyrights.
You can use!
Plz tell me whats that url link written in css stylesheet??
It's a font url and here is the all codes of this footer www.codingnepalweb.com/responsive-footer-section-html-css/
Than you.....😊
why when i write something in another section looks transparent?
byiya except header nd footer center mai content kaise lgaye ??
videos are great ...meanwhile the sound level of the backgrounded music is too high , not possible to focus with the css learning ...thank you
Mute music while watching..
@@CodingNepal great solution bro
Thanku for the code sir, it really worked so well😇...but I am facing some problems with the responsiveness of the page...I m working on a simple notepad,and when I inspect the page it isn't changing its size according to the size of the screen.
I have included meta tag as well as the @media rule..
What can be the possible reasons
Did you check on chrome?
@@CodingNepal yes sir
On Google chrome
very good and your video but I wanted to know or if you can show how to append it to an already made html page
Just change some codes according your website.
Hello, I'm your new fan. How will the footer stays at the bottom? I've tried to add content between the nav and footer. Thanks
It's already on bottom
@@CodingNepal Thank you for response. I set the footer to relative when I'm going to add divs. I am rooting for your future videos
Bro can u make a video for connecting our webpage to server (not localhost)
u can upload your web in github. Its free
tqs bro
Thank you
You're welcome
Is this codes are compatible for all browsers?
Yes
we need a face reveal bro love from india👍👍
I'll do if possible...Stay tuned
excellent video. thank you... sourcecode link please
Please go to our website and search title then you'll get source codes there www.codingnepalweb.com
tnx
Bro, you're doing great.
Can you create tutorial for position property on css, i get confused always about it. Help me to understand like when to use
Thank you bro 💙😁
This article help you to understand - developer.mozilla.org/en-US/docs/Web/CSS/position
Thanks, lemme check out
Bro the please make a video on how to post this code in blogger, it's too difficult 🙏
No it's simple.. Just go to blogger dashboard>theme>edit html
Then find the footer code of your recent blogger template then remove it and paste this tutorial codes. You have to do it very carefully and I do not recommend you to do it if you don't know basic html and css.
@@CodingNepal can you please make a video on it... I really wanna add the footer that you showed.. it's looks damn attractive
Dai where do I paste these codes in the blogger template?
If you want this footer on a home page then go to the theme > edit html and paste the html codes inside the tag and then paste the css codes inside the tag of tag. I do not suggest you to go and edit html file of your site if you're a beginner and don't know about what you're doing because small mistake can break your whole site.
Thank you Dai. Im'a beginner, indeed and enthusiastic to learn coding.
Why can't add logo picture in about us?😓can you help?
When i add picture it was not showing
Img path must be correct and give the height and width to img.
@@CodingNepal iI have given height and width to the picture. But for some reason it was not showing.which size you prefer for picture?let me know
great job , sir can you tell me where did you find that kind of pictures please ?,
Pixaby, pexels, unsplash I used these 3 websites for free images.
Please a complete e-commerce website
Ok
Ramro ra kaam lagdo
thank you what was the size of the paragraphe
Hey there! I've got some trouble with the code, the footer is in the middle of my page instead of at the bottom. Do you know a fix for that? margin-bottom: 0; or margin-top: auto; both didn't work
Contact me on Instagram
I did a tutorial on how to make a custom form like materialize css
Already I've created many login form designs.. Watch my login form playlist.
@@CodingNepal Got it, I'll see the playlist, thanks
What about the php Form how can i make contact us work? Please help
Please check our PHP playlist.
hello sir every thing is best and thanks a lot but the icons are not working even i am coped your code still it not working and the textarea is not working also so kindly fix this..
Nowadays font awesome CDN link/script that I provided not support so your icons may not be showing. Just replace that script tag with this
Yes text area will definitely not working because I may have replaced textarea tag name with changeit in the html for some reason. Please change changeit to textarea. But I recommend you to download source files because you'll not get this problem if you download.
@@CodingNepal wow bro you it's working...but bro what about the message space.. thanx a lot bro for your reply
@@CodingNepal I'm replace with textarea but it's not working but i will download the file 🤗🤗
brother,can you please make a "date of birth select option" for registration like facebook,using java script...
Watch this - ruclips.net/video/jcuKUSWENos/видео.html
Bro can i use this footer for my web , i have taken a permission for profotile web, you guve me that permission, so can you give me for this
Yes you can use bro
Sir please make a SEARCH BAR and its backend code
Sure.. Stay tuned
@@CodingNepal thank you sir ...........you are really a best teacher
😍😍😍
Thank you 💙
please make the same footer with bootstarp v 5.1
wow
You used the tag center in the copyright, it isn't even supported in html5
You can add some css codes to take it center.
My background color does not turn on what can I do?
"
my english is not so good sorry"
Color doesn't turn on means?
@@CodingNepal
yes colors do not change
@@CodingNepal After a long wait, the color changes, what could be the problem?
Which color.?
@@CodingNepal all colors
bro i could'nt find the code plese send me link
Here is the link - www.codingnepalweb.com/2020/04/responsive-footer-section-design-html-css.html
*Sir, How to Use HTML Code in WordPress Website. Please Create a New Video.....*
Contact here - instagram.com/coding.np
Plz give link of your video song..
All links are in the description
@@CodingNepal ok thanks
Is part two published??
Yes...check description
@@CodingNepal thanks buddy, saved my day.
Need html & bootstrap tutorial
Ok..
Bhai css me sabse upar Bali line me kya likha hai
@media bali css me hai jo
Description pe link diya he.. Usme jaoo mene apne website par full code upload kiya he...
Woh Google font ka link he.
Bro part 2 link?
Here is the link - ruclips.net/video/9l16a0jJeoE/видео.html
please tell me background music name😊😊😊😊
It's in the description
Copyright ko kura ta aayenata sir antim ma pani 😛😁
😅😅 Aayenw aayenw
Where is the footer source code... pls send me
Check description link
hey superstar my contact form is not moving
What song name ???
Songs links are in the description
Please Bhai
see later ...
Ok
No me funciono no se por que :'(
Icon is working online
Yes these icons appear only when you're online because I've linked fontawesome in my html file.
Kata ho ni hajur ko ghar
Surkhet ho
where is the responsive coding
Check description link... You'll redirect to my website and then search the title of this video there.. You'll easily get.
hi , you code works perfect but the contact form doesnt work can?
It's was created only for design purpose so it not work.
Hii Bro
Source Code Milega
Contact here - instagram.com/coding.np
plz provide code
Download from here - www.codingnepalweb.com/responsive-footer-section-html-css/
this code is so garbage