Created
December 1, 2024 02:41
-
-
Save vancuong4662/2c76c2b8a935f55a13f7134f17026939 to your computer and use it in GitHub Desktop.
Mẫu code buổi 1 - JSA49
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| body { | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| /* Full-width input fields */ | |
| input[type=text], | |
| input[type=password] { | |
| width: 100%; | |
| padding: 12px 20px; | |
| margin: 8px 0; | |
| display: inline-block; | |
| border: 1px solid #ccc; | |
| box-sizing: border-box; | |
| } | |
| /* Set a style for all buttons */ | |
| button { | |
| background-color: #04AA6D; | |
| color: white; | |
| padding: 14px 20px; | |
| margin: 8px 0; | |
| border: none; | |
| cursor: pointer; | |
| width: 100%; | |
| } | |
| button:hover { | |
| opacity: 0.8; | |
| } | |
| /* Extra styles for the cancel button */ | |
| .cancelbtn { | |
| width: auto; | |
| padding: 10px 18px; | |
| background-color: #f44336; | |
| } | |
| /* Center the image and position the close button */ | |
| .imgcontainer { | |
| text-align: center; | |
| margin: 24px 0 12px 0; | |
| position: relative; | |
| } | |
| img.avatar { | |
| width: 40%; | |
| border-radius: 50%; | |
| } | |
| .container { | |
| padding: 16px; | |
| } | |
| span.psw { | |
| float: right; | |
| padding-top: 16px; | |
| } | |
| </style> | |
| </head> | |
| <body style="width: 40%; margin: auto"> | |
| <h2>Nhập thông tin người dùng</h2> | |
| <div class="imgcontainer"> | |
| <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="avatar"> | |
| </div> | |
| <div class="container"> | |
| <label for="uname"><b>Tên khách hàng</b></label> | |
| <input type="text" placeholder="Nhập tên của bạn"> | |
| <label for="uname"><b>Địa chỉ</b></label> | |
| <input type="text" placeholder="Địa chỉ của bạn"> | |
| <label for="uname"><b>SĐT</b></label> | |
| <input type="text" placeholder="Số điện thoại"> | |
| <button type="submit">Bắt đầu mua sắm</button> | |
| <label> | |
| <input type="checkbox" checked="checked" name="remember"> Remember me | |
| </label> | |
| </div> | |
| <div class="container" style="background-color:#f1f1f1"> | |
| <button type="button" onclick="document.getElementById('id01').style.display='none'" | |
| class="cancelbtn">Cancel</button> | |
| <span class="psw">Bạn cần <a href="#">hỗ trợ?</a></span> | |
| </div> | |
| <script> | |
| //... | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment