Hướng dẫn footer đẹp html css
/*Thiết Lập Cho Thành Phần Nội Dung Giới Thiệu*/
footer .container .noi-dung{
margin-right: 30px;
}
footer .container .noi-dung.about{
width:75%;
}
footer .container .noi-dung.about h2{
position: relative;
color: #fff;
font-weight: 500;
margin-bottom: 15px;
}
footer .container .noi-dung.about h2:before{
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: #f00;
}
footer .container .noi-dung.about p{
color: #999;
}
/*Thiết Lập Cho Thành Phần Icon Mạng Xã Hội*/
.social-icon{
margin-top: 20px;
display: flex;
}
.social-icon li {
list-style: none;
}
.social-icon li a{
display: inline-block;
width: 40px;
height: 40px;
background: #222;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
text-decoration: none;
border-radius: 4px;
}
.social-icon li a:hover{
background: #f00;
}
.social-icon li a .fa{
color: #fff;
font-size: 20px;
}
.links h2{
position: relative;
color: #fff;
font-weight: 500;
margin-bottom: 15px;
}
* Lưu ý: Để phù hợp hơn với blog thì bạn xem các phần mình
highlight và thay đổi.
Home page
About me
Contact
Terms & Conditions
.links h2{
position: relative;
color: #fff;
font-weight: 500;
margin-bottom: 15px;
}
.links h2::before{
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: #f00;
}
.links{
position: relative;
width: 60%;
}
.links ul li{
list-style: none;
}
.links ul li a{
color: #999;
text-decoration: none;
margin-bottom: 10px;
display: inline-block;
}
.links ul li a:hover{
color: #fff;
}
* Lưu ý: Để phù hợp hơn với blog thì bạn xem các phần mình highlight và thay đổi.
+84 917813359
SEND
.contact h2{
position: relative;
color: #fff;
font-weight: 500;
margin-bottom: 15px;
}
.contact h2::before{
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: #f00;
}
.contact{
width: calc[130% - 60px];
margin-right: 0 !important;
.btn {
display: inline-block;
background: transparent;
color: inherit;
font: inherit;
border: 0;
outline: 0;
padding: 0;
margin-top:16px;
transition: all 200ms ease-in;
cursor: pointer;
}
.btn--primary {
background: #222;
color: #fff;
box-shadow: 0 0 10px 2px rgba[0, 0, 0, .1];
border-radius: 2px;
padding: 8px 24px;
}
.btn--primary:hover {
background: #f00;
}
.btn--primary:active {
background: #f00;
box-shadow: inset 0 0 10px 2px rgba[0, 0, 0, .2];
}
.form__field {
width: 90%;
background: #fff;
color: #a3a3a3;
font: inherit;
box-shadow: 0 6px 10px 0 rgba[0, 0, 0, .1];
border: 0;
outline: 0;
padding: 8px 4px;
}
* Lưu ý: Để phù hợp hơn với blog thì bạn xem các phần mình highlight và thay đổi.
Kết quả sau khi áp dụng code cho cột thứ 3
- Vậy là xong xuôi nội dung & tùy chỉnh cho 3 cột rồi. Tuy nhiên, có thể background của bạn có màu khác nên cần tùy chỉnh
lại màu background của Footer cho phù hợp. Chúng ta tiến hành Bước 3.
* BƯỚC 3: Tùy chỉnh background và kích thước Footer
- Tại Footer, bạn add thêm 1 gadget ngang bằng cách click ADD A GADGET => Chọn HTML/JAVASCRIPT sau đó paste code bên dưới đây và SAVE lại.
Tạo thêm gadget để tùy chỉnh footer
footer{
background: rgba[0,0,0,0.5];
justify-content: space-between;
flex-wrap: wrap;
}
footer .container{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
}
- Như vậy là DONE việc thay bố trí nội dung và làm đẹp Footer. Như mình đã nói, tùy
vào nhu cầu và tình trạng thực tế của blog mà bạn có những tùy chỉnh cho phù hợp nhé!
- Đây là kết quả của mình:
Chúc các bạn thành công!
[* Lưu ý: Code này mình cũng tham khảo trên mạng, tùy chỉnh lại cho phù hợp và chia sẻ lại cho mọi người thôi nhé!]