Footer Html Css | website footer design
HTML-код
- Опубликовано: 9 ноя 2024
- Using HTML and CSS, I show you how to make simple footer that always sticks to the bottom of the webpage.
Website footer design.
Join our fb group:
Like our page:
/ alpha.code.0
Source code:
opacitycode.bl...
Blog:
codeopacitysou...
Subscribe my channel..
cutt.ly/ff5wXQU
_--_--------------------------------------_--_
landing page design: • How To Design A Simple...
simple website homepage : • How to Create a Websit...
Basic parallax effect: • Simple Parallax Effect...
Simple navbar using flex: • Website Navbar using H...
Mouse move animation: • Mouse Scroll Animation...
Website preloader : • Simple Website Preload...
--------------------music credits:----------------
Song
Fly Away feat. Anjulie
•TheFatRat
•Licensed to RUclips by
•LatinAutor, BMI - Broadcast Music Inc., ASCAP, Kobalt Music Publishing, and 4 Music Rights Societies
[NCS]
• / nocopyrightsounds
• / nocopyrightsounds
• / nocopyrightsounds
• / ncsounds
• / nocopyrightsounds
--------------------tags--------------------------------
#footerdesign
#footer
#websitefooter
~-~~-~~~-~~-~
Please watch: "Creative Landing Page Design using Html Css "
• Creative Landing Page ...
~-~~-~~~-~~-~
For those, who are looking for source code:
drive.google.com/drive/folders/1XNs_jJJnfs4GMn_cTSSCR3fY_mg-Vd5p
THANKS
it doesnt work smh
😅😅😂😂😂😂
Thank you man for sharing your code for the footer man, I have an assignment that is due tomorrow, lol you spared my life. thanks a lot, you got my like and subscribed already.
Thanks 🤩
ruclips.net/video/5wo6SEFqw0o/видео.html
Thank you for this! Simple, sleek, exactly what I needed. Ignored the last few items so that it doesn’t block my content on longer pages. Thank you!
xz?
Glad it helped!🎉
I was commenting about the social media icons not working in a column form but I already saw the problem. Thanks for this awesome vid CO.
Welcome @Ozeki ♥
How do you fix it then
@@johnsuperhist5219 just insert this between tag :
@@CodeOpacity thx
Man, you can't believe how much you've helped me! Thanks!
Glad to hear it! Take love.
Thank you🙏
From Africa.
Most welcome!
Hey man thank you for this code about the footer of pages.
Good jobs.
Happy to help
Well illustrated thanks Code Opacity
Thanks Fabian 🤍. I am requesting you to explore my other tutorials, too.
Regards,
CodeOpacity
How to make these icon bigger? @Code Opacity
.socials a i{
font-size: 3rem;
transition: color .4s ease;
}
change font-size to whatever you like
Thank you sir for your knowledge
It's my pleasure
Thanks for valuable information
So nice of you
{
position: absolute;
bottom: 0;
}
doesn't work properly if I have I long page
Add width:100%;left:0;
i used the awesome link but the icons don't appear in my page how can i fix that ?
Use online fontawesome cdn for icons.
hey bro, you just did not helped to make a footer, you also helped how to code css faster! Thanks Bro!
Glad to hear that!
Thank you for your video.
You're welcome 💗
why i'm nostalgic with this sound
Subbed for music
Then, Special thanks to @FatRat Music. 😍
If you don’t see the social icons, make a font awesome account and use your own link!
What extension are you using in vs code for the web page live update?
live server.
Source: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
omg thanks a lot didnt know how to make it stay at the bottom of the page, I just skiped the 4 last properties just liked you said in the comments thank you so much for sharing,
here some more words for algorithm:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam repellat aliquam natus quas, quasi officiis rem, quisquam doloremque amet obcaecati veritatis facilis ea perspiciatis aliquid dolorum ipsa! Ipsum provident ea deserunt quasi eum placeat nisi, voluptates error atque molestiae doloribus magnam, quos quis totam eaque architecto nam dignissimos suscipit rerum vero! Quasi quaerat eum veritatis iure, voluptate ipsa ipsum quas! Dicta dolor sequi officia accusantium eaque officiis repellat ad excepturi, assumenda iste commodi atque nostrum adipisci corporis totam sunt debitis cum reprehenderit. Hic cumque quo dolore veritatis sint sequi eveniet unde facere, sed maiores inventore nisi delectus excepturi aperiam eaque cupiditate rem possimus aspernatur quidem accusantium expedita dicta, deserunt culpa voluptas. Eos velit nulla harum, nihil dicta quam modi qui aspernatur sint incidunt consequatur ratione unde minus, architecto, doloribus corrupti blanditiis eum enim quisquam fuga libero! Suscipit veritatis explicabo quae voluptate molestias laudantium quasi facere nesciunt nisi pariatur rerum, natus ipsam qui minima, tempora itaque maxime ea hic porro a magni exercitationem. Beatae perferendis consectetur perspiciatis qui alias quos odit numquam nam, aliquid sit, maxime harum iusto, minima sint. Pariatur qui ipsam nostrum sit atque neque saepe possimus mollitia nihil. Maiores delectus assumenda praesentium rerum voluptatem suscipit laboriosam ad totam quidem aliquam, autem possimus nulla beatae, reiciendis nemo inventore accusamus aliquid perspiciatis sint deleniti dicta molestias! Vitae quod a debitis reprehenderit cupiditate quisquam commodi, similique, sequi officiis aliquam vero. Magnam, sed nesciunt. Provident animi vel dicta aspernatur dolores sit accusamus, quam sed nesciunt ipsam voluptates quod quaerat tenetur magni exercitationem molestias saepe eveniet porro sint repellat, delectus optio iste beatae voluptas! Ullam sint corporis amet cumque saepe autem architecto cupiditate nulla eligendi quod ducimus consequatur beatae officiis reprehenderit totam alias, corrupti libero sed. Quidem sapiente omnis soluta vero asperiores reprehenderit ea porro molestiae. Doloribus aspernatur cumque aliquid pariatur maiores quasi harum, accusamus soluta dolor laudantium voluptatibus unde, reiciendis earum impedit enim porro quia! Placeat ad quasi commodi culpa, dolorum similique consequuntur blanditiis accusantium veniam enim quibusdam. Provident pariatur nesciunt officiis quibusdam quisquam aliquid, rerum labore dolor deserunt distinctio quod voluptas delectus ipsa sint placeat? Doloremque atque in, ex quaerat non rem veritatis ullam eum et, ad, illo quibusdam reiciendis! Voluptate suscipit possimus
Thanks for your valuable opinion.🎉
Eu quero colocar uma section antes do footer mas quando coloco o footer nao via para baixo oque faço? // I want to put a section before the footer but when I put the footer I don't see down what do I do?
tenta mudar o position do footer pra relative
Bem no final do vídeo mostra a parte que desce o footer
@@priscilamelo7849 skip that part to get your expected result. The author also says that in pinned comment
When you open "inspect", the footer is attached to this panel, and when you enlarge the panel, it goes up, is that normal?
vs code auto-save issues. And it's normal
Why we would attach bootstrap any specific reason
I didn't use bootstrap here. I just used fontawesome CDN for the webicon fonts, provided by Stackpath aka bootstrap.
Thank you so much I've been struggling 🤦🏿♀️
Your not Gina. My name is copyrighted
@@unnamedownerofgoogle if you went to Italy you'd go crazy then because there's lots of Gina's and no gina is short for ginasta... which is gymnast in Italian
I'm certain that there only me Gina in the whole world in fact I am also very certain that is the truth.
Thanks for your src.
Always welcome💖. Keep watching @codeopacity.
I can't open the source code anymore, I didn't found the source code on the link you put in desc.. :(
For those, who are looking for source code:
drive.google.com/drive/folders/1XNs_jJJnfs4GMn_cTSSCR3fY_mg-Vd5p
I need different social icons. For instance, how to I get "Discord" and "Telegram" icons?
Sorry, I didn't find the 'Discord Icon' on Fontawesome Documentation. But here is the Telegram one :
this really helped thanks
Glad it helped!
Ok so now their are minor changed the icons will not shown ok the facebook e.t.c so what you have to done
Instead of wrirting this
Write this
Remeber to make changes to below lines too change the first fa to fab ok each line ok
Yeah, Fontaweaome changed their documentation 1year back. Since then, this tutorial seems outdated. That's why many people complaining in the comment section.
@@CodeOpacity yes i downloaded the video 😂 when the icons mot worked i was like what the fck something is happening wrong then i figure it out also you don't apply the style on
.footer-bottom {
text-align: center;
}
But thanks for the tutorials these iam from another coding background (C#,Java, Python) I basically code in python and iam learning a little of this to familiar with the code actually django iam using as a backend hmm btw ❤️ for all the tutorials iam learning so much ❤️
start ma fun acha tha😂
I have permission to copy for my assignment, thank you. sorry i'm late permission
Yes, you have.
thanks bro, br here
Thank you too🤩
Thank you so much ! This was very helpfull ♥
Thank you.
thanks bro
Welcome @Madan maddy edits.
#bewithop
hi can we use this any website
Yes, of course
why my tweet, Facebook,google,is there not
Use fontawesome cdn.
Thanks man!
Happy to help!🤩
my footer is responive help plssss
Not responsive ?
Thanks for the footer
Any time!🖤
Thank you sir
Welcome
You are the best, thank you
Thanks, mate.
Thanks For Footer
Welcome @krinn
on moblie view the footer doesn't seem to down as it was suppose to... any ideas?
use media query and change bottom margines to -20 px for example or just place another div in container with flex displaying and this should work
or just use oerflow hidden so it will keep the footer in the parent
@@popoga4462 thanks
De dónde sacas ese link de arriba ?
CDN from StackPath
My website is long and the footer sticks at the first section of my website.
If your site is long enough, Then skip the video from 10:28 to end.
@@CodeOpacity I've tried that method it works only on mobile but for me it's still not at the bottom
@@showcaserv4209 change footer position to relative?
hey, the footer is a little bit too long for my website that it has sliders at the bottom, how do i minimize the width so that the slider is eliminated?
overflow-x: hidden;
@@CodeOpacity thanks my guy
@@CodeOpacity bro where should I add that
@@adagenlik in body tag or footer tag. Both will work.
@@CodeOpacity didn't work on footer but I added in HTML and body that worked thank you appreciate your work
where are the link of fontaawesome?
See pinned comment!
can anyone help me it didn't work for me !!
Which types of issues you're facing?
But I don't know how to add this this footer code :(
Your website's platform?
Fontawesome CDN : (insert this code in head tag)
I can't see the icon
How to make these icon bigger?
@@arunavadas7296 increase 'font-size'
How to doenload tge source code?
From my blog rebrand.ly/footerhtml
downlaod link isnt working
For those, who are looking for source code:
drive.google.com/drive/folders/1XNs_jJJnfs4GMn_cTSSCR3fY_mg-Vd5p
excuse me sir, its blocking my body content. Any solution? I skipped 10:28 to the end but nothing happens.
It should probably work. if you skipped that part.
@@CodeOpacity I'll play your vid later and see where I missed. Thank you for replying.
Thank you so much❤️
You’re welcome 😊
I've followed your instructions but now the footer is blocking my background for my website also some features too.
Ignore or skip the tutorial from 10:28 to the end.
try position:relative;
Thanks
Welcome
#Excelent!
where code
Please, check pinned comments. Thank you
@@CodeOpacity please help me i want it for my website but this code css or html dont work i dont understand why please help me about this
bhai apke website pr download button work nhi kar rha hai
For those, who are looking for source code:
drive.google.com/drive/folders/1XNs_jJJnfs4GMn_cTSSCR3fY_mg-Vd5p
No source code?
Please, check pinned comments. Thank you.
1:53 where can i found the link?
It's fontawesome cdn by stackpath. You can search in google.
After getting it you'll able to use font icons
Can I get source code
@@techysoul2153 Google Font Awesome W3Schools Intro
Yeah sure. on my blog.
echo 'terimakasih';
Terima kasih kembali
Thx bro🫶🏻
Any time. You can check my others videos too.
I tried this code but my footer does not stick to the bottom I don't know what I'm doing wrong....
Body should give position:relative;
For any query dm on fb page.
@@CodeOpacity I changed to display: inline-block in the footer and then the footer went down
. Mydiv (
Thanks
)
Nice
Thanks
bro this is not working for mobile view (please help)
Whats the problem?
@@CodeOpacity problem's solved. Thanks 😊
@@yashkale7519 👍
@@yashkale7519 what did you do?
wow :O thanks a lot!
Thank you, too.
não funcionou aqui mas aprendi umas coisas novas obg
Obrigada. Mas não sei por que o código não funciona para eles.
Saudações,
pls codes :(
Codes: opacitycode.blogspot.com/2020/10/footer-html-css-website-footer-design.html
My honorable brother didn't show me the icons of social media.
Font awesome icon. Sorry my bad😔
@@CodeOpacity thanks ♥️
@@CodeOpacity it dint show me for me also what to do?
@@srilekhya4125 same
Name music please
Fly Away feat. Anjulie
•By TheFatRat
Doesn't work 100% no icons. I will never understand why people make partially complete how to vids.
For those, who are looking for source code:
drive.google.com/drive/folders/1XNs_jJJnfs4GMn_cTSSCR3fY_mg-Vd5p
Thanks
welcome.
Nice
Thanks