rifikaru/python-data-structures-explorer
0
1class CustomFooter extends HTMLElement {2 connectedCallback() {3 this.attachShadow({ mode: 'open' });4 this.shadowRoot.innerHTML = `5 <style>6 footer {7 background-color: #1f2937;8 color: white;9 padding: 2rem 0;10 }11 .container {12 max-width: 1200px;13 margin: 0 auto;14 padding: 0 1rem;15 }16 .footer-content {17 display: grid;18 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));19 gap: 2rem;20 }21 .footer-section h3 {22 color: #f59e0b;23 margin-bottom: 1rem;24 font-size: 1.1rem;25 }26 .footer-section p, .footer-section a {27 color: #d1d5db;28 margin-bottom: 0.5rem;29 display: block;30 text-decoration: none;31 }32 .footer-section a:hover {33 color: #f59e0b;34 }35 .copyright {36 text-align: center;37 margin-top: 2rem;38 padding-top: 1rem;39 border-top: 1px solid #374151;40 color: #9ca3af;41 }42 .social-icons {43 display: flex;44 gap: 1rem;45 margin-top: 1rem;46 }47 .social-icons a {48 color: white;49 transition: color 0.2s;50 }51 .social-icons a:hover {52 color: #f59e0b;53 }54 </style>55 <footer>56 <div class="container">57 <div class="footer-content">58 <div class="footer-section">59 <h3>Cấu Trúc Dữ Liệu Python</h3>60 <p>Tìm hiểu về các cấu trúc dữ liệu cơ bản trong Python với ví dụ minh họa và giải thích chi tiết.</p>61</div>62 <div class="footer-section">63 <h3>Liên Kết Nhanh</h3>64 <a href="lythuyet.html">Lý thuyết</a>65 <a href="#">Danh sách</a>66 <a href="#">Tuple</a>67 <a href="#">Tập hợp</a>68 <a href="#">Từ điển</a>69</div>70 <div class="footer-section">71 <h3>Liên Hệ</h3>72 <p>Email: info@pythonviet.com</p>73<div class="social-icons">74 <a href="#"><i data-feather="github"></i></a>75 <a href="#"><i data-feather="twitter"></i></a>76 <a href="#"><i data-feather="linkedin"></i></a>77 </div>78 </div>79 </div>80 <div class="copyright">81 <p>© 2023 Python Việt Nam. Bảo lưu mọi quyền.</p>82</div>83 </div>84 </footer>85 `;86 }87}88 89customElements.define('custom-footer', CustomFooter);