Administrative Center Dashboard - Copy this Html, Bootstrap Component to your project
Tối ưu mã nguồn này theo ý bạn cho đẹp hơn <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <title>Trung Tâm Hành Chính</title> <style> body { font family: 'Roboto', sans serif; background color: #f8f9fa; } .navbar { box shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .container { max width: 800px; margin top: 50px; background: #ffffff; padding: 30px; border radius: 15px; box shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } h3 { margin bottom: 30px; font weight: 700; color: #343a40; } .btn custom { width: 100%; margin bottom: 15px; padding: 15px; font weight: 500; border radius: 10px; transition: all 0.3s ease; } .btn custom:hover { transform: translateY( 3px); box shadow: 0 8px 16px rgba(0, 0, 0, 0.15); } footer { margin top: 30px; color: #6c757d; } </style> </head> <body> <nav class="navbar navbar dark bg dark"> <div class="container fluid"> <span class="navbar brand mb 0 h1">HỆ THỐNG XẾP HẠNG TỰ ĐỘNG</span> <button class="btn btn outline light">Đăng xuất</button> </div> </nav> <div class="container mt 5"> <h3 class="text center">TRUNG TÂM HÀNH CHÍNH</h3> <div class="button section"> <button class="btn btn primary btn custom">Đăng ký tài khoản</button> <button class="btn btn primary btn custom">Quản lý đơn vị</button> <button class="btn btn danger btn custom">Đăng xuất: camle@gmail.com</button> </div> <div class="button section"> <button class="btn btn info btn custom">UBND phường Khuê Trung</button> <button class="btn btn info btn custom">UBND phường Hoà Xuân</button> <button class="btn btn info btn custom">UBND phường Hoà Thọ Tây</button> <button class="btn btn info btn custom">UBND quận Cẩm Lệ</button> <button class="btn btn info btn custom">UBND phường Hoà Phát</button> <button class="btn btn info btn custom">UBND phường Hoà An</button> <button class="btn btn info btn custom">UBND phường Hoà Thọ Đông</button> </div> </div> <footer class="text center mt 4"> <p>Bản quyền thuộc UBND quận Cẩm Lệ. Thiết kế bởi Danatec</p> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
