Phần thông tin liên hệ trên một trang web là khá quan trọng. Vì vậy việc làm đẹp cho phần liên hệ được đánh giá là cần thiết, từ đó sẽ giúp khác hàng của bạn cảm thấy yên tâm và tin tưởng hơn.
Hôm nay, Code Pro sẽ hướng dẫn các bạn tạo một khung liên hệ đơn giản mà lại khá nổi bật, cùng đón xem nào!
Các bước thực hiện tạo khung liên hệ
Bước 1: Thêm CSS cho khung liên hệ
<link rel="stylesheet" href="//cdn.leanhduc.pro.vn/font-awesome/pro-5.15.3/css/all.css"/>
<style>
.codepro-contacts.codepro-contacts-info {
border: 2px dashed #17a2b8;
background: #eef9fa;
border-radius: 10px!important;
}
.codepro-contacts {
color: #222222;
overflow: hidden;
position: relative;
margin: 10px 0!important;
padding: 15px;
line-height: 26px!important;
word-break: break-word;
}
.codepro-contacts svg {
height: 15px;
margin-right: 10px;
display: flex;
}
.codepro-contacts i {
margin-right: 10px;
}
</style>Bước 2: Chỉnh sửa nội dung và chèn code dưới đây vào vị trí cần hiển thị.
<p class="codepro-contacts codepro-contacts-info">
<i class="fab fa-facebook-square"></i><b>Facebook: </b><a href="https://www.facebook.com/leanhduc.pro.vn/" rel="nofollow" target="_blank">Lê Anh Đức</a><br />
<i class="fas fa-sms"></i><b>Zalo: </b><a href="https://zalo.me/0386897757" target="_blank">0386.897.757</a><br />
<i class="fas fa-phone-alt"></i><b>Phone: </b><a href="tel:0386897757" target="_blank">0386.897.757</a><br />
<i class="fas fa-envelope"></i><b>Gmail: </b><a href="mailto:contacts.codepro@gmail.com" target="_blank">contacts.codepro@gmail.com</a><br />
<i class="fas fa-sack-dollar"></i><b>Thanh toán: </b> Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 35% phí,...
</p>Bước 3: Lưu lại và tận hưởng thành quả!
Lời kết
Trên đây là bộ code và hướng dẫn tạo khung liên hệ đơn giản cho blog/website.
Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả.
Xin chào và hẹn gặp lại!