Chào các bạn, giáng sinh là ngày lễ lớn nhất trong năm và đây cũng là dịp cho các bạn sum họp cùng gia đình, bạn bè hay người thân trong gia đình. Đối với mình, không việc gì thú vị bằng làm một thứ gì đó mà mình thích trong ngày lễ này. Ví dụ, bạn có thể tạo ra một website tĩnh để đếm thời gian chờ giáng sinh để khoe với bạn bè chẳng hạn. Hôm nay, mình sẽ chia sẻ với các bạn cách tạo ra một trang đếm ngược mừng giáng sinh.
Giới thiệu
Mình sẽ hướng dẫn các bạn làm website đếm ngược giáng sinh này, các bạn chỉ cần có kiến về
HTML/CSS và một chút về
Javascript là có thể dễ dàng tự tạo theo sở thích của mình. Việc đầu tiên là các bạn tạo một thẻ
div để chứa nội dung trang trong thẻ
body thông qua đoạn code dưới đây.
 |
| giao diện trang countdown |
Các bạn chú ý là thẻ
div countdown là thẻ countdown dành cho đồng hồ đếm ngược. Sau đó chúng ta sẽ thêm một chút
CSS để trang trí một chút cho trang web, các bạn lưu ý là muốn thay đổi
font dành cho giáng sinh thì phải có đường dẫn của nó. Cú pháp là
https://fonts.googleapis.com/css?family=Tênfont
body,
html {
height: 100%;
margin: 0;
}
.bgimg {
background-image: url('https://images.pexels.com/photos/246732/pexels-photo-246732.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: 'Mountains of Christmas';
font-size: 25px;
font-weight: 900;
opacity:0.9;
}
.topleft {
position: absolute;
top: 0;
left: 16px;
}
.bottomright {
position: absolute;
bottom: 0;
right: 16px;
color: crimson;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
}
Các bạn chỉ cần thêm đoạn code tuyết rơi nữa là xong, mình có một bài viết giới thiệu các bạn có thể xem
(Code) - Hiệu ứng tuyết rơi cho website để tham khảo cách chèn vào website của bạn. Các bạn có thể copy đoạn code mà mình có tải lên
Github thông qua đường link:
https://github.com/minhgiau998/countdownpage/blob/master/index.html. Ngoài ra, các bạn có thể xem trang demo mà mình sẽ để link dưới đây:
Tóm tắt
Mình đã xong phần bài viết cách tạo trang đếm ngược mừng giáng sinh với chỉ vài đoạn code
HTML/CSS và Javascript. Chúc các bạn có một mùa giáng sinh thật vui vẻ! Cám ơn các bạn đã xem bài viết này.
