Created
May 8, 2025 01:33
-
-
Save twilightty/c12aec8c1b65179f2b41bcdde22a1886 to your computer and use it in GitHub Desktop.
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> | |
<style> | |
body { | |
font-family: Arial, sans-serif; | |
margin: 0; | |
padding: 0; | |
} | |
.booking-form { | |
max-width: 600px; | |
margin: 20px auto; | |
border: 1px solid #000; | |
padding: 20px; | |
} | |
h2 { | |
font-size: 24px; | |
margin-top: 0; | |
margin-bottom: 20px; | |
color: #333; | |
} | |
h3 { | |
font-size: 18px; | |
font-weight: normal; | |
margin-bottom: 15px; | |
color: #555; | |
} | |
.bed-options { | |
display: flex; | |
justify-content: space-between; | |
margin-bottom: 30px; | |
} | |
.bed-option { | |
display: flex; | |
align-items: center; | |
} | |
.special-requests { | |
background-color: #f8f9fa; | |
padding: 20px; | |
margin-bottom: 20px; | |
} | |
.checkbox-option { | |
display: flex; | |
align-items: center; | |
margin-bottom: 15px; | |
} | |
input[type="radio"], | |
input[type="checkbox"] { | |
width: 20px; | |
height: 20px; | |
margin-right: 10px; | |
border: 1px solid #ccc; | |
border-radius: 50%; | |
} | |
input[type="checkbox"] { | |
border-radius: 3px; | |
} | |
textarea { | |
width: 100%; | |
height: 100px; | |
padding: 10px; | |
border: 1px solid #ddd; | |
border-radius: 4px; | |
margin-top: 10px; | |
font-size: 16px; | |
color: #999; | |
} | |
.button-container { | |
display: flex; | |
justify-content: flex-end; | |
} | |
.payment-button { | |
background-color: #e83e8c; | |
color: white; | |
border: none; | |
padding: 12px 30px; | |
font-size: 18px; | |
cursor: pointer; | |
border-radius: 2px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="booking-form"> | |
<h2>Yêu cầu đặc biệt</h2> | |
<h3>Chọn loại giường</h3> | |
<div class="bed-options"> | |
<div class="bed-option"> | |
<input type="radio" id="king-bed" name="bed-type"> | |
<label for="king-bed">1 giường King</label> | |
</div> | |
<div class="bed-option"> | |
<input type="radio" id="twin-beds" name="bed-type"> | |
<label for="twin-beds">2 giường đơn</label> | |
</div> | |
</div> | |
<div class="special-requests"> | |
<h2>Yêu cầu đặc biệt</h2> | |
<div class="checkbox-option"> | |
<input type="checkbox" id="non-smoking"> | |
<label for="non-smoking">Phòng không hút thuốc</label> | |
</div> | |
<div class="checkbox-option"> | |
<input type="checkbox" id="high-floor"> | |
<label for="high-floor">Phòng ở tầng cao</label> | |
</div> | |
<h2>Yêu cầu riêng của bạn</h2> | |
<textarea placeholder="Nhập yêu cầu khác"></textarea> | |
</div> | |
<div class="button-container"> | |
<button class="payment-button">Thanh toán</button> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment