WELLCOME BACK
H
ello guys. How are you all? I hope you are all well. I came again with a post. Let’s go..
তো এই পোস্টে শেয়ার করো একটি Responsive Foote। যাতে HTML & CSS ব্যবহার করা হয়েছে। Responsive বলার কারণ ডেমো দেখেলেই বুঝবেন তো চলুন তো শুরু করা যাক।
সব কোড একসাথে .html এ Download করুন।
index.html
Responsive Footer HTML and CSS
style.css
/* Importing Google font - Open Sans */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; } .footer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1280px; width: 95%; background: #10182F; border-radius: 6px; } .footer .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3.5rem; padding: 60px; } .footer-row .footer-col h4 { color: #fff; font-size: 1.2rem; font-weight: 400; } .footer-col .links { margin-top: 20px; } .footer-col .links li { list-style: none; margin-bottom: 10px; } .footer-col .links li a { text-decoration: none; color: #bfbfbf; } .footer-col .links li a:hover { color: #fff; } .footer-col p { margin: 20px 0; color: #bfbfbf; max-width: 300px; } .footer-col form { display: flex; gap: 5px; } .footer-col input { height: 40px; border-radius: 6px; background: none; width: 100%; outline: none; border: 1px solid #7489C6 ; caret-color: #fff; color: #fff; padding-left: 10px; } .footer-col input::placeholder { color: #ccc; } .footer-col form button { background: #fff; outline: none; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: 500; transition: 0.2s ease; } .footer-col form button:hover { background: #cecccc; } .footer-col .icons { display: flex; margin-top: 30px; gap: 30px; cursor: pointer; } .footer-col .icons i { color: #afb6c7; } .footer-col .icons i:hover { color: #fff; } @media (max-width: 768px) { .footer { position: relative; bottom: 0; left: 0; transform: none; width: 100%; border-radius: 0; } .footer .footer-row { padding: 20px; gap: 1rem; } .footer-col form { display: block; } .footer-col form :where(input, button) { width: 100%; } .footer-col form button { margin: 10px 0 0 0; } }
আমি সব সময় কোডিং বিষয়ক পোস্ট করি তাই কোডিং নিয়ে কোনো কিছু লাগলে কমেন্ট এ বলবেন।
THE END
S
o friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.
