Dưới đây là mã nguồn để tạo trang "Meet The Team" (giới thiệu thành viên) responsive bằng HTML và CSS:
Ví dụ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html { box-sizing: border-box; } body{ font-family: monospace,serif,sans-serif; } img{ height: 300px; width: 100%; } *, *:before, *:after { box-sizing: inherit; } .teamColumn { float: left; width: 33.3%; margin-bottom: 16px; padding: 0 8px; } @media screen and (max-width: 650px) { .teamColumn { width: 100%; display: block; } } .teamCard { background-color: rgb(162, 162, 255); text-align: center; font-size: 20px; } .personContainer { padding: 0 16px; } .personContainer::after, .teamContainer::after { content: ""; clear: both; display: table; } .Designation { color: rgb(15, 0, 100); font-weight: bolder; font-size: 40px; } .contact { border: none; outline: 0; display: inline-block; padding: 12px; color: white; font-weight: bolder; background-color: rgb(78, 0, 102); text-align: center; cursor: pointer; width: 100%; } .contact:hover { background-color: #555; } </style> </head> <body> <h1 style="text-align: center;">Responsive Meet the team example </h1> <div class="teamContainer"> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" > <div class="personContainer"> <h2>Jane Doe</h2> <p class="Designation">CTO</p> <p><button class="contact">Contact</button></p> </div> </div> </div> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <div class="personContainer"> <h2>Mike Ross</h2> <p class="Designation">Front End Developer</p> <p><button class="contact">Contact</button></p> </div> </div> </div> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <div class="personContainer"> <h2>John Doe</h2> <p class="Designation">FullStack Developer</p> <p><button class="contact">Contact</button></p> </div> </div> </div> </div> </body> </html>
Kết quả
Mã trên sẽ cho ra kết quả như sau:
