Mẫu cuộc hẹn mã html css

Hôm nay  tôi sẽ chỉ cho bạn cách tạo biểu mẫu đặt phòng này bằng HTML và CSS. Đây sẽ không phải là một hướng dẫn dài vì vậy hãy gắn bó với tôi. Tôi đã thêm video bên dưới nếu bạn muốn xem video hơn là hướng dẫn bằng văn bản. Bạn có thể tải mã nguồn từ dưới cùng của trang web

Đầu tiên, chúng ta cần thiết lập một HTML. Ở đầu tệp HTML, chúng ta cần bao gồm đường dẫn đến CSS và phông chữ





Booking



Sau đó, chúng ta cần thêm một phần hiển thị của tài liệu HTML. Nó bao gồm hai phần. Phần đầu tiên là. container-time(black) và thứ hai là. dạng thùng chứa. Chúng tôi đã đặt chúng trong div chính với một lớp chứa

Trong div thời gian vùng chứa, chúng tôi có một vài thẻ tiêu đề và đoạn văn, trong khi ở dạng vùng chứa div là một biểu mẫu có các trường bắt buộc

Bạn có thể lấy một tài liệu HTML hoàn chỉnh dưới văn bản này





Booking





Time Open

Monday-Friday

7am - 11am (breakfast)

11am - 10pm (lunch/dinner)

Saturday and sunday

9am - 1am (breakfast)

1am - 10pm (lunch/dinner)


Call Us: (123) 45-45-456

Reservation Online

Your Name

Your email

Date

Time

How many people?

mã CSS

Trong phần thân, chúng ta có các kiểu cơ bản, họ phông chữ, độ dày phông chữ, màu sắc và khoảng cách giữa các chữ cái. Cỡ chữ mặc định là 16px

body {
font-family: 'Raleway', sans-serif;
font-weight: 400;
color: #fff;
letter-spacing: 1px;
}

Vùng chứa chính của chúng tôi có màu nền hơi tối sau đó là phần tử cơ thể để chúng tôi có thể thấy sự khác biệt. Chúng tôi đã thêm lề 200px cho không gian từ mọi phía. Nếu bạn muốn, bạn có thể căn giữa nó bằng cách sử dụng lề. 0 ô tô

Để có được hiệu ứng của phần tử offset, chúng tôi đã thêm bóng đổ vào vùng chứa và để đặt các phần tử dạng vùng chứa và thời gian vùng chứa theo chiều ngang, chúng tôi đặt màn hình thành lưới

Phần màu đen là 40% của vùng chứa và màu xám là 60% vì chúng tôi đã sử dụng các cột mẫu lưới

.container {
background-color: #fafafa;
margin: 200px;
box-shadow: 10px 15px 20px rgba(0, 0, 0, .1);
display: grid;
grid-template-columns: 40% 60%;
}

container-time có nền đen

Chúng tôi đã thêm phần đệm vào phần tử này để tạo khoảng trống cho các phần tử bên trong

Đối với đường viền, chúng tôi đã sử dụng thuộc tính CSS phác thảo chứ không phải đường viền

Để di chuyển đường viền bên trong, chúng tôi sử dụng thuộc tính CSS offset-offset và chúng tôi đã căn chỉnh văn bản vào giữa

.container-time {
background-color: rgba(0, 0, 0, .95);
padding: 50px;
outline: 3px dashed #998100;
outline-offset: -30px;
text-align: center;
}

Bước tiếp theo của chúng tôi là tăng kích thước phông chữ, thay đổi màu sắc và chuyển tiêu đề thành chữ hoa

.heading {
font-size: 35px;
text-transform: uppercase;
}
.heading-days {
color:#998100;
font-size: 30px;
}
.heading-phone {
font-size: 20px;
}

Vùng chứa biểu mẫu của chúng tôi có phần đệm 20px ở trên cùng và dưới cùng và 0 ở bên phải và bên trái. Chúng tôi đã căn giữa nó, đặt lề 0 từ trên xuống dưới và tự động từ bên phải và bên trái

.container-form {
padding: 20px 0;
margin: 0 auto;
color: #000;
}

Hãy tạo kiểu cho biểu mẫu của chúng ta

Bên trong biểu mẫu của chúng tôi, chúng tôi có phần tử tiêu đề và div với một lớp trường biểu mẫu, để tạo khoảng cách giữa các phần tử này, chúng tôi đặt hiển thị biểu mẫu thành lưới và grid-row-gap thành 20px

trường biểu mẫu có một đoạn văn và trường đầu vào, để đặt chúng ở cuối và là khoảng trống ở giữa, chúng tôi đã sử dụng thuộc tính flexbox

Để tạo một số khoảng trống, chúng tôi thêm phần đệm vào trường nhập và chọn

form {
display: grid;
grid-row-gap: 20px;
}
form p {
font-weight: 600;
}
.form-field {
display: flex;
justify-content: space-between;
}
input,select {
padding: 10px 15px;
}

Cuối cùng là yếu tố nút của chúng tôi

Ngoài thuộc tính CSS tự giải thích, bán kính đường viền được đặt thành số cao để thực hiện đường viền cong đẹp mắt

Tương tự như trên phần tử vùng chứa, chúng tôi đã thêm bóng để thực hiện hiệu ứng của phần tử bù đắp. Quá trình chuyển đổi là tốc độ phát triển của chúng ta khi chúng ta di chuột vào đó. Ở trạng thái di chuột, chúng tôi tăng kích thước của nút bằng thuộc tính biến đổi

Bóng hộp cũng nhẹ hơn một chút

________số 8

Tôi hy vọng bạn thích nội dung của chúng tôi để biết thêm nội dung như thế này, vui lòng đăng ký trang web và kênh youtube của chúng tôi