Box liên hệ Đẹp – Chia sẽ box liên hệ 14 -Box liên hệ là một tính năng hoặc một phần tử trong giao diện người dùng (UI) của một ứng dụng hoặc trang web. Thông thường, box liên hệ chứa thông tin cần thiết để người dùng có thể liên lạc với chủ sở hữu ứng dụng hoặc trang web đó. Box liên hệ thường bao gồm các trường nhập thông tin như tên, địa chỉ email và nội dung tin nhắn. Khi người dùng điền đầy đủ thông tin và nhấn nút “Gửi”, ứng dụng hoặc trang web sẽ gửi thông tin đã nhập tới chủ sở hữu để tiếp tục xử lý hoặc phản hồi yêu cầu của người dùng.
Nay Flatsome.xyz Chia sẽ cho bạn Box liên hệ đẹp được mà tớ mới làm cho khách 🙂 , thấy đẹp nên share lại cho anh em luôn cho nóng nhé
Box liên hệ Đẹp – Chia sẽ box liên hệ 14
OK vào việc luôn nhé bạn ,Để dễ hình dung cái liên hệ đó như thế nào gửi Anh em demo https://zlife.vn/ qua bên đó Sờ phát 🙂 Nếu OK thì xem tiếp nhé
Box liên hệ này mình làm theo Yêu Cầu của khách hàng .
OK Nếu như bạn đọc tiếp nghĩa là có tý chấm Phẩy rồi đúng ko, Khi add code tớ share lên được các bảng liên hệ như hinh bên dưới nhé
và đây là giao diện mobile
OK như bao lần trước bạn chỉ cần bỏ Code vô là chạy nhé
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<div class="nav-social PC d-md-block d-none"> <ul> <li><a href="tel:0814621462" target=""><img src="https://zulihome.vn/wp-content/uploads/2022/12/Call.png"><br>Tổng đài</a></li> <li><a href="https://www.facebook.com/messages/t/zulihome.com.vn" target="_blank"><img src="https://zulihome.vn/wp-content/uploads/2022/12/messenger-2.png"><br>Messenger</a></li> <li><a href="https://zalo.me/2421753075440149504" target="_blank"><img src="https://zulihome.vn/wp-content/uploads/2022/12/Zalo.png"><br>Zalo</a></li> <li class="register"> <a href="#lepopup-Form-dk-1" rel="nofollow"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/envelope.svg"><br>Đăng ký</a> </li> <li class="to-top-pc"> <a href="#" id="back-top" rel="nofollow" style="display: none;"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/BackOnTop.png"><br>Back top</a> </li> </ul> </div> <!-- mobile--> <div class="bottom-contact-mobile mobile d-md-none"> <ul> <li><a href="tel:0814621462"> <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-phone-mobile.png"><br> <span>Gọi điện </span></a></li> <li><a href="sms:0974713186"> <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-sms-mobile.png"><br> <span>Nhắn tin</span></a></li> <li><a href="https://zalo.me/2421753075440149504"> <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-zalo-mobile.png"><br> <span>Chat zalo</span></a></li> <li><a href="https://m.me/zulihome.com.vn"> <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-mesenger-mobile.png"><br> <span>Messenger</span></a></li> <li class="to-top-pc"> <a href="#" id="back-to-top" rel="nofollow"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/BackOnTop.png"><br><span>Back top</span></a> </li> </ul> </div> <style> .d-md-none { display: none; } .nav-social { position: fixed; right: 5px; background: #fff; border-radius: 5px; width: auto; z-index: 150; top: 220px; padding: 10px 0; border: 1px solid #f2f2f2; } .nav-social ul { margin: 0; padding: 0; list-style: none; } .nav-social ul li { border-bottom: 1px solid #d6d6d6; padding-bottom: calc( .6em - 5px ); margin-bottom: .6em; list-style: none; text-align: center; } .nav-social ul li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .nav-social ul li img { max-width: 25px; max-height: 20px; object-position: center; object-fit: contain; } .nav-social ul li a { padding: 5px 12px 5px 12px; display: block; text-align: center; font-size: 11px; line-height: 15px; color: #000; font-weight: 400; max-width: 80px; max-height: 60px; text-decoration: none; } .nav-social ul li img { margin-bottom: 10px; } @media only screen and (max-width: 48em) { /*************** ADD MOBILE ONLY CSS HERE ***************/ .PC { display: none; } .bottom-contact-mobile { display: block; position: fixed; bottom: 0; background: white; width: 100%; z-index: 99; box-shadow: 2px 1px 9px #dedede; border-top: 1px solid #eaeaea;} .bottom-contact-mobile ul { display: flex; justify-content: center; margin: 0; padding: 0; } .bottom-contact-mobile ul li { width: 20%; flex-basis: 20%; list-style: none; text-align: center; font-size: 13.5px; } .bottom-contact-mobile ul li img { width: 25px; height: 20px; object-position: center; object-fit: contain; margin-top: 10px; margin-bottom: 3px; } .bottom-contact-mobile ul li span { color: #000; font-size: 12px; } } </style> |
bạn có thể tham khảo Full Code tại đây https://codepen.io/Infotech-ng-Nam/pen/PoxzRXL
Ngoài Code liên hệ trên , Flatsome còn Share rất nhiều liên hệ , bạn có thể quan tâm 1 vài mẫu liên hệ bên dưới nhé
Chúc bạn thành công !
