Mỗi template là một website tĩnh hoàn chỉnh, dùng chung một hệ thiết kế nhưng khác bảng màu và ngành hàng. Mở thẳng bằng trình duyệt, không cần cài đặt gì.
Bấm “Xem demo” để mở trang chủ của từng mẫu.
Website doanh nghiệp nông nghiệp: giới thiệu năng lực, sản phẩm đạt chuẩn VietGAP, dịch vụ kỹ thuật và danh mục dự án đã triển khai.
Website nội thất cao cấp: bộ sưu tập theo mùa, danh mục theo không gian, trang chi tiết sản phẩm có gallery và chọn chất liệu.
Website cửa hàng hoa: danh mục theo dịp (cưới, sinh nhật, khai trương), bộ sưu tập theo mùa và lưới ảnh khoảnh khắc khách hàng.
Bố cục khác hẳn 4 mẫu trước: header logo ở giữa, hero chữ khổng lồ, băng món ăn cuộn ngang, section ảnh tràn màn, thực đơn đường chấm. Font Cormorant Garamond.
Sidebar dọc cố định thay header ngang, hero chia đôi ảnh tràn mép, dịch vụ zig-zag, bảng 3 gói giá có gói nổi, thanh kéo so sánh trước/sau, đặt lịch 2 cột sticky.
Header trong suốt đè hero rồi đổi nền khi cuộn, form tìm dự án ngay trong hero, băng số liệu, card có nhãn trạng thái, timeline tiến độ, trang chi tiết 2 cột với form nhận bảng giá sticky. Font Montserrat.
Thanh thông báo cam, hero blob động + ảnh cắt tròn lệch + thẻ nổi, danh mục ô màu, băng khóa học cuộn ngang có nút, lộ trình dạng tab, testimonial bong bóng chat, FAQ accordion, lịch khai giảng dạng bảng. Font Nunito.
Menu ẩn sau nút, mở thành overlay toàn màn; hero ảnh 100vh với thanh đặt phòng nổi đè mép; section ảnh tràn màn xen kẽ; phòng nghỉ masonry (CSS columns); băng trải nghiệm tự chạy; đặt phòng có tóm tắt tự tính tiền.
Ticker chạy chữ, logo giữa, hero lưới bento 5 ô với chữ khổng lồ blend-mode, lookbook masonry số thứ tự lớn, sản phẩm hover đổi ảnh + nút xem nhanh, bộ sưu tập ảnh xen chữ tiêu đề dọc, chi tiết sản phẩm ảnh cuộn trái + thông tin sticky phải. DM Serif Display.
Header 3 tầng (tiện ích · ô tìm kiếm lớn + giỏ · mega-menu hover), hero slider tự chạy + 2 banner phụ, flash sale có đếm ngược và thanh đã bán, lưới sản phẩm 5 cột dày, trang danh mục sidebar lọc + chip + phân trang, chi tiết 3 cột với hộp mua sticky, giỏ hàng tự tính tổng.
Một trang dài không có trang con: header có thanh tiến độ đọc, hero + thẻ nổi + hàng logo, 3 nỗi đau → lộ trình 6 bước → số liệu → chứng thực cuộn ngang → nội dung accordion → giảng viên → 2 gói giá + cam kết hoàn tiền → FAQ → CTA cuối. Thanh CTA dính đáy có đếm ngược, tự ẩn khi tới phần giá.
Nền chấm kraft, tem tròn, hero ảnh cắt tròn + chữ xoay quanh nút, menu dạng danh sách chữ lớn rê chuột đổi ảnh cột phải, câu chuyện hạt 5 chặng cuộn ngang theo dòng thời gian, túi cà phê viền tay có tem ngày rang, đăng ký định kỳ. Font Fraunces.
Thanh thông tin + hotline nổi, hero là thẻ trắng lớn chia 2 cột có form đặt khám ngay bên trong, 4 ô số liệu đè mép, dịch vụ lưới icon hover đổi nền navy, quy trình stepper ngang 5 bước, bác sĩ card ngang, trước/sau lưới cặp ảnh, bảng giá có cột bảo hành.
Đen + lime, góc vát clip-path, hero ảnh tối với chữ nghiêng khổng lồ 3 dòng (viền rỗng / lime / đặc), marquee lime nghiêng, lớp học card ảnh xám hover màu, lịch tuần dạng bảng giờ × ngày có mã màu, dải ảnh skew, gói tập card vát góc, HLV ảnh vuông hover hiện chuyên môn. Barlow Condensed.
Hero chia đôi: chữ + số liệu bên trái, bản đồ SVG Việt Nam có ghim nhấp nháy bên phải; thanh lọc điểm đến / tháng / ngân sách dính dưới hero; thẻ tour có timeline ngày D1→D5 nằm ngang; điểm đến lưới lệch ô to nhỏ; trang tour có sidebar lọc; chi tiết tour với lịch trình theo ngày, hộp đặt chỗ dính, chọn ngày khởi hành dạng chip. Lora + Be Vietnam Pro.
Menu có dropdown panel, hero căn giữa với khung dashboard nghiêng 3D dựng hoàn toàn bằng CSS (sidebar, KPI, kanban) + thẻ nổi, dải logo khách, bento tính năng ô to nhỏ có mini-mockup, 3 bước nối gạch đứt, bảng giá bật tháng/năm bằng JS với gói nổi viền gradient, lưới tích hợp, nhận xét nền tối, changelog dạng timeline, FAQ details. Be Vietnam Pro.
Header 2 tầng (thanh hotline + menu vuông gạch chân), hero chia đôi với ảnh cắt chéo clip-path và dải thông số viền mảnh, dải ngành phục vụ nền cam, dịch vụ 4 ô đánh số hover đổi nền thép, thẻ máy có bảng dl thông số, bảng spec máy đầy đủ (table cuộn ngang), dự án lọc theo ngành bằng JS, quy trình 5 ô số vuông nối vạch, form RFQ có ô kéo thả bản vẽ. Oswald + Roboto.
Logo giữa với menu chia 2 bên, viền sóng SVG dưới header và trên footer, hero ảnh cắt hình blob với sticker tròn xoay, marquee chạy chữ, tab dịp lễ (sinh nhật / hằng ngày / Trung thu / Tết) bằng JS, thẻ bánh bo tròn giá dạng viên và nút +, quy trình ảnh tròn đánh số, nhận xét bong bóng có đuôi, gallery ảnh xoay lệch, form đặt bánh chọn cỡ bằng radio-chip và ngày giờ giao, sidebar lưu ý dính. Fredoka + Nunito.
Dải địa chỉ mảnh + menu chữ hoa cách chữ + hotline, hero 60/40 ảnh có khung vàng lệch và con dấu số liệu, dải 4 cam kết viền, lĩnh vực đánh số La Mã (trang chủ lưới hover đổi navy; trang lĩnh vực có menu dính bên trái tự đánh dấu khi cuộn), luật sư ảnh dọc gạch vàng, quy trình timeline dọc, kết quả số lớn, trích dẫn đơn, bài viết 2 cột có sidebar dính. EB Garamond + Inter.
Nền chấm bi, menu viên thuốc có chấm màu theo mục, dải cầu vồng, hero ảnh mép scallop (mask) + chip nhóm tuổi + huy hiệu nổi, chương trình theo tuổi là thẻ màu có số tuổi khổng lồ, "một ngày ở trường" timeline giờ cuộn ngang, cơ sở vật chất masonry, giáo viên ảnh tròn viền màu, học phí thẻ + bảng, form tuyển sinh có ngày sinh bé và chip nhóm tuổi. Baloo 2 + Quicksand.
Header trong suốt đè lên hero, logo script ở giữa, nav mảnh cách chữ rộng, hero tràn màn full-height chữ script + mũi tên cuộn, giới thiệu ảnh chồng lệch, dịch vụ 3 cột có vạch chia, đám cưới thực tế masonry hover hiện tên cặp đôi, quy trình zigzag dọc, trích dẫn dấu ngoặc lớn nền tối, gói dịch vụ thẻ thanh lịch, form gạch chân có ngày cưới + số khách. Great Vibes + Cormorant + Jost.
Không có header ngang: sidebar cố định bên trái (tên, menu, trạng thái nhận việc, mạng xã hội) + cột phải cuộn. Hero chữ 148px có chữ viền rỗng và chữ tô vàng acid, dự án là danh sách hàng (số · tên · loại · năm) hover hiện ảnh nghiêng, marquee khách hàng, dịch vụ đánh số, chi tiết dự án ảnh xếp dọc với cột thông tin dính, liên hệ là email cỡ lớn gạch vàng. Space Grotesk + Inter.
Dải hotline 2 showroom; menu giữa có mega-dropdown 4 thumbnail dòng xe kèm giá; hero full-bleed với dải tab dọc mép trái đổi xe bằng JS + thanh 3 thông số công suất / 0–100 / giá; băng dòng xe scroll-snap có ô "So sánh"; bảng so sánh 3 xe cột đầu dính; máy tính trả góp range + nút kỳ hạn; xe lướt chip km/năm với huy hiệu "Kiểm định 176 điểm"; chi tiết xe có buybox dính chọn phiên bản / màu / nơi đăng ký tính lăn bánh, dải xoay 360°; lái thử chọn khung giờ dạng chip. Rajdhani + Inter.
Header 2 tầng (logo dấu chân + ô tìm kiếm lớn có select danh mục + giỏ/tài khoản; tầng dưới là menu danh mục có icon và viên "Đặt lịch spa"), hero chia chéo với panel cam cắt polygon và ảnh trong mặt nạ hình bàn chân kèm huy hiệu nổi, 4 thao tác nhanh đè mép hero, bảng giá ma trận dịch vụ × cỡ thú bật Chó/Mèo bằng JS, 3 hạng phòng khách sạn có bộ đếm "còn N phòng", gallery trước/sau cuộn ngang, thanh dính đáy mobile Gọi/Zalo/Đặt lịch. Lilita One + Nunito Sans.
Header tối giản chỉ logo + nút Đặt phòng, các mục còn lại nằm ở thanh phụ mỏng dính dưới hero tự sáng khi cuộn; hero không tràn viền với chồng 3 ảnh polaroid xoay lệch có chú thích; thanh đặt phòng nổi đè mép hero; phòng là hàng lớn xen kẽ ảnh 60/40 kèm dải 7 ô ngày còn trống; nhật ký "Một ngày ở Sương" dọc theo mốc giờ; quanh nhà kiểu bản đồ có chip đi bộ/xe máy; nhận xét là giấy note ghim xếp masonry; trang đặt phòng có hộp tạm tính dính. Fraunces + Nunito.
Ô tìm kiếm lớn có dropdown gợi ý khi focus, nút "Tải đơn thuốc", thanh danh mục dạng ô icon và hàng chip triệu chứng "Bạn đang gặp vấn đề gì?"; hero không dùng ảnh mà là bento 3 cột (panel gradient chứa hộp tải đơn nét đứt + thẻ dược sĩ trực + form tra cứu); flash sale đếm ngược và thanh "đã bán"; thẻ sản phẩm nhãn Cần đơn / Không cần đơn, chọn đơn vị Hộp/Vỉ/Viên đổi giá; tìm nhà thuốc theo quận; trang tải đơn 3 bước với dropzone lớn; thanh mua dính đáy mobile. Manrope + Inter.
Header 1 hàng có ô tra mã vận đơn ngay trên header; hero 55/45 với bản đồ tuyến HN → Đà Nẵng → SG vẽ bằng CSS (nét đứt, chấm nhấp nháy, thẻ ticker "đang vận chuyển"); dải vàng báo giá nhanh tính ngay bằng JS; lưới 6 hub dạng bảng; timeline trạng thái 5 bước tra cứu bằng mã mẫu; đội xe gắn tag tải trọng/thể tích; trang báo giá tính thể tích quy đổi và cước theo thời gian thực; badge ISO/FIATA. Sora + Inter.
Header ba tầng (thanh tiện ích theo đối tượng, thanh chính có logo khiên và mega-menu "Đào tạo" 5 cột khoa, dải thông báo đỏ có nút đóng), hero 60/40 ảnh lớn + cột 3 thẻ nhanh, dải 5 con số gạch dọc, khoa & ngành dạng accordion 2 cột kèm thẻ tư vấn dính, 4 cột lý do đánh số serif, mosaic ảnh 5 ô, sự kiện khối ngày lớn + thông báo có badge "Mới", trích dẫn cựu sinh viên; tuyển sinh có timeline ngang, bảng điểm chuẩn/học phí cuộn ngang; trang ngành chương trình 4 năm 4 cột. Merriweather + Source Sans 3.
Header có rule mảnh, logo "ARC." + menu mono đánh số 01–04 + đồng hồ HN chạy JS; hero nền giấy kẻ ô với tiêu đề 2 dòng lệch phải, ô tọa độ góc và ảnh rộng có lớp phủ kích thước "12.5 m" vẽ bằng CSS; dự án dải cuộn ngang scroll-snap; quy trình 5 cột kẻ dọc với thanh tiến độ đầy khi cuộn tới; đội ngũ chân dung so le + trích dẫn lớn; bản vẽ tay rê chuột đổi sang ảnh thật; báo chí dạng bảng mono; trang dự án lọc theo loại + chuyển lưới/danh sách; chi tiết dự án bảng thông số dính trái. Archivo + IBM Plex Mono + Inter.
Thanh tiến độ cuộn mép trên, header trong suốt → đặc khi cuộn với nút "Mua vé" kèm bộ đếm vé còn lại, hero ngày tháng cỡ khổng lồ + đếm ngược thật + ảnh cắt đa giác + marquee tên diễn giả, thẻ diễn giả duotone bỏ phủ màu khi hover, lịch 2 ngày tab + nhãn màu 3 sân khấu + chip lọc, vé gạch giá early-bird + form tính tổng tiền có mã giảm, sơ đồ tầng CSS, logo tài trợ chữ theo hạng. Unbounded + DM Sans.
Header có ô chọn chi nhánh + dải "Hội thảo tuần này"; hero 2 cột với thẻ quiz "Bạn phù hợp nước nào?" (JS gợi ý 2 nước kèm lý do) và chồng 6 "hộ chiếu" xếp quạt, cờ vẽ bằng khối màu CSS, hover đưa lên trước; 6 thẻ điểm đến có bảng mini 4 chỉ số; lộ trình stepper 6 nút trên đường cong SVG; máy tính chi phí toàn khóa; bảng học bổng chip "Sắp hết hạn"; trang chi phí có bảng so sánh 6 nước + checklist chi phí ẩn cộng dồn; học bổng và câu chuyện lọc theo nước. Outfit + Nunito.
Header viên thuốc nổi đổ bóng khi cuộn, hero từ xoay vòng + ba điện thoại vẽ hoàn toàn bằng CSS nghiêng ±8° (số dư, chuyển tiền thành công, vòng tiết kiệm conic-gradient), tính năng cuộn dính đổi màn hình điện thoại bằng IntersectionObserver, demo chia hóa đơn tương tác, bảng phí ViPay vs ngân hàng thường, CTA đen có mã QR lưới CSS; trang con: hàng tính năng xen kẽ mock điện thoại, sơ đồ 3 lớp bảo mật + checklist tiến độ, trợ giúp có tìm kiếm lọc FAQ. Plus Jakarta Sans.
Header 4 tầng: thanh ngày/thời tiết + nút chế độ tối lưu localStorage, masthead serif lớn căn giữa, thanh chuyên mục dính cuộn ngang gạch đỏ, ticker tin nóng chạy chữ; trang chủ lưới báo giấy 3 cột (Mới nhất có giờ | bài đinh + 2 bài phụ | Đọc nhiều số đỏ lớn + widget thời tiết/chứng khoán); mỗi chuyên mục một bố cục riêng (dải giá CK, 1 lớn + 3 danh sách, bảng tỉ số, dải ảnh cuộn ngang, tạp chí 2 cột); trang bài viết có thanh chia sẻ dính bên trái, drop cap, bình luận; hub video có trình phát + playlist. Noto Serif + Roboto.
Nút "Quyên góp" kèm dòng "đã góp hôm nay", dải minh bạch mỏng dưới header, hero ảnh tràn với thẻ trắng lệch trái đè mép chứa widget góp tiền (chip số tiền hiện gợi ý tác động, bật hằng tháng/một lần bằng JS), 3 chiến dịch có thanh tiến độ, dải tác động gạch chân lượn sóng CSS, câu chuyện tư liệu ảnh lớn, biểu đồ vòng conic-gradient 94/4/2 + bảng báo cáo kiểm toán, nhật ký hiện trường timeline, hộp chuyển khoản ở footer; chi tiết chiến dịch có hộp góp dính + bảng ngân sách có thanh tỷ lệ. Lora + Public Sans.
Một trang dài mở đầu bằng màn "phong bì" phủ toàn màn (bấm để mở, tự mở sau 4 giây), hero ảnh đôi trong khung vòm bo tròn đỉnh + đếm ngược trực tiếp; không menu truyền thống — thanh chấm điều hướng nổi bên phải sáng theo cuộn và nút RSVP dính đáy mobile; timeline câu chuyện đường giữa, 2 thẻ sự kiện có chỉ đường/thêm lịch, album masonry, dress code 4 vòng màu, mừng cưới nền đỏ rượu với QR CSS + sao chép STK, form RSVP, tường lời chúc; trang album có lightbox. Playfair Display italic + Montserrat.
Không có hero ảnh — dải tìm kiếm chàm full-width (từ khóa / địa điểm / ngành, chip gợi ý, 3 bộ đếm) chính là hero; danh sách việc nổi bật 2 cột với ô chữ cái màu thương hiệu thay logo + sidebar có vòng tiến độ hồ sơ conic-gradient và biểu đồ cột lương CSS; trang kết quả chia ba: thanh lọc trái, danh sách, bảng xem nhanh phải đổi nội dung khi bấm thẻ; chi tiết có nút ứng tuyển dính khi cuộn; trang công ty có ảnh bìa + tab; nhà tuyển dụng có mock dashboard chấm điểm ứng viên + bảng giá 3 gói. Lexend + Inter.
Header có nút "Cứu hộ 24/7" chấm nhấp nháy + thanh trạng thái slot/xe đang sửa (JS); hero chia đôi với form đặt lịch 30 giây (biển số, dịch vụ, chip giờ) và thẻ giá xoay nghiêng, mép sọc cảnh báo chéo; bảng giá tương tác đổi theo hạng xe A/B/C/SUV/bán tải; tracker theo dõi xe 5 giai đoạn theo biển số; kỹ thuật viên thẻ cao; đánh giá gắn huy hiệu biển số; dải cứu hộ với bản đồ bán kính CSS; trang đặt lịch có tóm tắt ước tính dính tự tính tổng; gói bảo dưỡng theo km dạng bảng so sánh. Barlow + Barlow Condensed.
Wordmark giãn chữ ở giữa, hero bất đối xứng 40/60 (ảnh cao tràn mép trái, tiêu đề Cormorant nghiêng khổng lồ, dải routine 3 ảnh đánh số nối bằng đường kẻ); quiz loại da 5 câu dạng chip trong stepper ngang, JS trả loại da + 3 sản phẩm; lưới sản phẩm rê chuột đổi sang ảnh kết cấu; hoạt chất dạng accordion ngang 4 panel; so sánh trước/sau bằng thanh range kéo clip-path; routine builder ghép bảng Sáng/Tối theo loại da + tổng tiền; chi tiết có buybox dính, bảng hoạt chất, thanh đánh giá 5→1 sao. Cormorant + Karla.
Website bán hải sản tươi sống và đông lạnh: thanh 4 cam kết đè lên hero, danh mục theo loại, lưới sản phẩm giá/kg có nhãn tươi sống – đông lạnh, ưu đãi nhà hàng, cửa hàng có sidebar lọc theo loại / tình trạng / nguồn gốc, chi tiết sản phẩm có gallery, chọn cỡ và sơ chế, tab bảo quản – vận chuyển, dịch vụ giao 2 giờ và cung cấp nhà hàng.
Player cố định đáy trang chạy trên mọi trang (lưu trạng thái localStorage, tua 15s/30s, tốc độ 1x/1.25x/1.5x, âm lượng); hero là tập mới nhất với bìa vuông phủ số tập; danh sách tập dạng hàng có số tập khổng lồ + nút play + lọc mùa / tìm / sắp xếp; transcript theo mốc phút bấm để tua và tô dòng đang phát; tag cloud cỡ chữ theo số tập; trang tài trợ có thanh độ tuổi CSS, mini-timeline pre/mid/post-roll và bảng giá. Syne + Albert Sans.
Header có ô chọn rạp đổi tên toàn trang; hero là băng poster cuộn ngang scroll-snap với huy hiệu độ tuổi và backdrop mờ đổi theo poster đang rê chuột; lịch chiếu dạng tab 7 ngày với chip suất 2D/3D/IMAX (suất đã qua bị mờ); lưới phim bật Đang chiếu/Sắp chiếu; combo bắp nước vẽ bằng CSS; 3 hạng thành viên có thẻ CSS; trang chọn ghế với sơ đồ A–J vẽ bằng CSS (thường/VIP/đôi, đã bán/đang chọn) tính tiền kèm combo và đếm ngược giữ ghế 5 phút. Bebas Neue + Work Sans.
Thanh khẩn cấp đỏ trên cùng + ô tìm bác sĩ trên header; hero không dùng ảnh lớn mà là 3 lối vào lớn (Đặt lịch / Tra kết quả / Cấp cứu) kèm dải ảnh nhỏ; lưới 7 chuyên khoa; lịch trực tuần dạng bảng khoa × Thứ 2–CN cuộn ngang, cột khoa dính, cột hôm nay tô xanh; bác sĩ dùng vòng tròn chữ cái màu theo khoa, lọc theo khoa + học vị; cổng bệnh nhân giả lập nhập mã hồ sơ hiện bảng xét nghiệm tô màu bình thường/cao/thấp; đặt lịch 4 bước với tóm tắt dính và cảnh báo bác sĩ không khám ngày đã chọn. Figtree + Nunito Sans.
Logo 4 chấm CMYK + dải sọc 4 màu dưới header; hero 2 cột với thẻ máy tính báo giá (sản phẩm → kích thước → chất liệu → số lượng → cán màng → đơn giá giảm theo bậc 100/500/1.000/5.000, bảng bậc tô dòng đang áp dụng); mockup hộp & túi giấy 3D vẽ bằng CSS đổi màu theo swatch; quy trình 5 bước nối dải CMYK; hướng dẫn file có sơ đồ bleed / đường cắt / vùng an toàn vẽ bằng CSS và checklist có thanh tiến độ; trang báo giá có máy tính dính + form gửi file kéo-thả. Anton + Roboto.
Header kem có mép cỏ răng cưa, wordmark viết tay; hero hai lớp: ảnh đồi chè + bản đồ trại vẽ SVG đè góc phải với 7 điểm bấm mở popover, tờ giấy giờ mở cửa dán băng dính; vòng tròn lịch mùa vụ 12 tháng (conic-gradient, tháng hiện tại tô vàng, rê chuột đổi chữ ở tâm, mobile đổ thành danh sách); thẻ trải nghiệm có nhãn giờ trong ngày + độ tuổi; nhà gỗ có lịch trống 14 ngày dạng chip; nông sản đặt trước có bộ đếm và "giỏ tuần này" tự cộng; nhận xét giấy note xoay lệch; đặt chỗ có tổng tiền dính và giảm 10% khi kèm nhà. Patrick Hand + Nunito.
Dòng mỏng giờ mở cửa + ngôn ngữ, header dấu triện "SH"; hero ảnh tối tràn màn với thanh ray dọc bên phải liệt kê 4 khu; "Dòng thời gian" cuộn ngang theo thế kỷ (scroll-snap, đường tiến độ + vạch thời kỳ tự sáng khi cuộn); 6 thẻ khu gắn số/tầng; 2 thẻ triển lãm có nhãn "Sắp kết thúc"; sơ đồ tầng SVG tương tác 4 tab bấm phòng hiện thông tin; khối vé + chọn khung giờ 6 chip "còn N chỗ" đổi theo ngày; trang vé tính tổng có mã giảm; hiện vật có hồ sơ + audio-guide giả lập. Cinzel + Spectral.
Header đen với logo ô vuông vàng, hero ảnh công trường tràn màn có bảng "Tiến độ công trình" nổi (số 68% khổ lớn, thanh tiến độ vạch thước, 4 mốc Móng–Thô–Hoàn thiện–Bàn giao); 4 thẻ dịch vụ số thứ tự khổ lớn; lưới dự án lọc bằng chip; máy tính dự toán nền đen–vàng (diện tích × tầng × móng × gói → tổng + 3 thanh phân bổ); quy trình 6 bước ray ngang có số ngày; chi tiết dự án là timeline 4 giai đoạn có trạng thái + nhật ký công trường; trang năng lực có bảng máy móc, chứng chỉ. Saira Condensed + Inter.
Header đỏ thẫm với huy hiệu khiên "PN" vẽ bằng CSS + ticker tỉ số chạy chữ; hero "Trận tiếp theo" với hai huy hiệu đối đầu, đồng hồ đếm ngược lớn trên nền sân vận động phủ đỏ; bảng xếp hạng có cột Form 5 chấm W/D/L; lịch thi đấu theo tháng nhãn nhà/khách; thẻ cầu thủ kiểu bài sưu tập với áo đấu CSS + 3 thanh chỉ số; tùy chỉnh tên + số áo xem trước ngay; sơ đồ 4 khán đài bấm chọn → tổng tiền + mã hội viên; sân 4-3-3 CSS 11 chấm áo. Teko + Inter.
Tờ CV giấy A4 căn giữa trên nền xám có bóng mềm; thanh công cụ với 4 chấm đổi chủ đề màu (lưu localStorage), nút "In / Lưu PDF" gọi window.print(), chuyển VI/EN; hai cột như CV giấy: trái là vòng tròn chữ cái, liên hệ có icon, 8 kỹ năng thanh %, ngôn ngữ chấm tròn, công cụ chip, QR vẽ bằng lưới CSS; phải là tóm tắt + 4 số liệu, timeline kinh nghiệm dọc 4 vị trí, học vấn, 3 thẻ dự án có chỉ số, chứng chỉ; trang `in.html` tối ưu @page A4 ra đúng 2 trang. Instrument Sans.
Header thanh bo tròn nổi có pill "Cửa hàng gần bạn" cập nhật theo quận; hero ly trà sữa 3D vẽ hoàn toàn bằng CSS (nắp, ống hút sọc, đá, trân châu) + 3 sticker xoay; "Build your drink" 5 bước chip: chọn loại / size / độ ngọt / đá / topping → ly đổi màu, mức đầy, trân châu và giá tính ngay (JS); menu thẻ dọc cuộn ngang theo nhóm; thẻ thành viên tích điểm CSS 10 dấu ly; lưới 8 cửa hàng có chấm Mở/Đóng theo giờ thật; banner giờ vàng đếm ngược; trang Tạo ly có công thức lưu sẵn + "Ly của tuần". Chewy + Nunito Sans.
Hero không phải ảnh mà là thẻ máy tính tiết kiệm lớn: kéo thanh hóa đơn, chọn loại mái và tỉnh → kWp, số tấm, chi phí, tiết kiệm/năm, hoàn vốn cùng biểu đồ cột CSS 10 năm cập nhật tức thì; dải đếm số CO₂; mô phỏng mái nhà vẽ lưới tấm pin CSS theo diện tích/hướng; 2 thẻ giải pháp; dự án nhãn kWp lọc theo loại/tỉnh; ray 5 bước có timeline tỷ lệ; bảng so sánh gói 3/5/10 kWp; checklist giấy tờ + form đăng ký khảo sát. Red Hat Display + Inter.
Hero kệ sách 3D thuần CSS (perspective, gáy + bìa + mép giấy, rê chuột kéo sách ra; mobile đổ thành dải cuộn ngang); kệ ngang cuộn theo thể loại với thẻ giá treo; ba ghi chú nhân viên viết tay (Caveat); cuốn sách lật trang 3D để đọc thử; góc đọc có menu chấm dẫn giá và sơ đồ 24 ghế đặt theo chip khung giờ; sự kiện có khối ngày + form giữ chỗ dính; form định giá sách cũ; trang Sách lọc thể loại/giá/mới-cũ; chi tiết sách có bìa nghiêng 3D + bảng thông tin. Crimson Pro + Inter.
Poster thời Gatsby: tia sunburst conic-gradient, viền zigzag, khung bậc thang clip-path hai lớp, khung hai nét có ô vuông bốn góc, chữ kim loại background-clip. Header đối xứng monogram giữa, nav tách hai bên; hero là gallery cuộn ngang toàn màn từng chân dung đen trắng trong khung bậc thang, số La Mã, tự chạy 5s; 3 gói chụp thẻ cao có biển giá vàng và sunburst sau thẻ giữa; masonry hover góc vàng chữ L; lịch trống kiểu tờ chương trình nhà hát chọn ngày; sơ đồ quy trình hình quạt SVG; lightbox bộ sưu tập. Cinzel Decorative + Prata + Poiret One + Cormorant Garamond.
Body navy với 3 vệt aurora tím / xanh ngọc / hồng trôi chậm bằng @keyframes; mọi panel là kính mờ (blur 18px, viền trắng 18%, vệt sáng mép trên), giá màu mint, một nút gradient teal→tím. Header thanh kính nổi; hero ảnh thành phố tối + panel tìm kiếm kính; split view: danh sách thẻ căn cuộn bên trái, bản đồ giả vẽ bằng CSS (lưới phố, hồ, 8 ghim giá) bên phải — rê thẻ sáng ghim; lịch trống ô xanh/đỏ; khay so sánh nổi đáy (tối đa 3 căn, localStorage) → bảng tô sáng khác biệt; tab giá tháng/quý/năm. Urbanist + Inter.
Mọi khối viền đen 3px, bóng cứng lệch 6px không nhòe, góc vuông, màu phẳng vàng / hồng / xanh / lime, không gradient, không chữ xám; tiêu đề khổng lồ Archivo Black với từ khóa bôi vàng, sticker xoay; marquee đen chữ vàng; hero có thẻ test xếp lớp 10 câu xoay 1° chấm điểm JS ra band; lộ trình là cầu thang 4 bậc màu tăng dần; lịch khai giảng lưới tháng 7 cột thật; bảng so sánh viền dày; kết quả học viên gạch số to masonry; bong bóng thoại; test 20 câu có đồng hồ 15 phút; máy tính học phí lộ trình. Archivo Black + Space Mono + Inter.
Trang như poster / báo cáo thường niên in: lưới 12 cột hiện đường dọc mảnh (nút "Lưới" bật/tắt, lưu localStorage), canh trái tuyệt đối, chỉ mực đen + giấy trắng + xám + một chút đỏ cho số chỉ mục; không card, không bóng, không bo góc, không icon — chỉ số thứ tự, ký tự → ↗ và đường kẻ 1px. Hero tuyên ngôn 3 cỡ chữ; dịch vụ danh sách đánh số hover hiện mô tả; case study dạng bảng có con số lớn, hàng mở rộng; 4 số liệu khổng lồ; vòng lặp sprint vẽ bằng đường kẻ; tech stack lưới chữ; máy tính giờ công bảng thuần; ảnh chỉ là 3 ô nhỏ đen trắng trong ô lưới. Inter Tight + Inter.
Nền giấy ngà, mực đen, một màu nhấn đỏ sẫm; không bo góc, không bóng, không icon, không nút màu. Masthead báo (dòng ngày · tên serif khổng lồ · số phát hành · hairline nav); hero là "bài bìa" với tít Playfair 120px tràn xuống mép ảnh và hộp "Trong số này"; thân bài Newsreader dàn 2–3 cột có kẻ giữa, drop cap, pull quote ngoài lề, folio "Trang 04 / Mùa thu 2026"; lịch tuần in dạng bảng giờ 7 cột; câu lạc bộ danh bạ thụt lề treo; sự kiện số ngày lớn ngoài lề; đóng góp bảng sổ cái với thanh tiến độ rule dày; form là "phiếu đăng ký" giấy dòng chấm; footer colophon. Playfair Display + Newsreader.
Nền pastel, mọi phần tử là khối đất sét phồng bo 28px với bóng lõm hai phía + bóng đổ tím nhạt, không đường kẻ mảnh, không góc nhọn; header viên đất sét nổi; hero "Bạn muốn bảo vệ gì?" với 4 ô khổng lồ có icon vẽ thuần CSS (tim, ô dù, xe, nhà) — bấm ô đổi panel và tông màu; máy tính phí có thanh tuổi núm đất sét, toggle giới tính, số phí lớn + biểu đồ vòng conic-gradient; so sánh 3 gói với công tắc "chỉ hiện khác biệt"; quy trình bồi thường trên đường lượn sóng; bộ đếm count-up; tra cứu trạng thái bồi thường demo. Rubik.
Nền tím đen, gradient tím → cyan → hồng neon, sàn lưới phối cảnh chạy vô tận + mặt trời sọc sau hero, tiêu đề chrome background-clip có vệt sáng; header là taskbar hệ điều hành cũ (nút Start "VOLT", nav ô bevel, đồng hồ JS); mọi thẻ là cửa sổ .win (thanh tiêu đề 3 nút, viền outset, bóng neon); chọn màu xe bằng chấm chrome đổi hue-rotate; máy tính quãng đường với đồng hồ gauge kim quay; so sánh kiểu bảng tính cột dính; bản đồ trạm sạc lưới chấm ghim phát sáng lọc theo quận; đặt cọc 3 bước thanh tiến trình pixel; sticker, marquee, loading bar. Orbitron + Exo 2 + Press Start 2P.
Cả trang là cuốn sổ tay nông dân: nền giấy kem có dòng kẻ mờ và vết cà phê, mọi khung là viền mực vẽ tay lệch (border-radius 255/15/225 + nét đúp xoay nhẹ), ảnh dán băng dính xoay ±3°, mũi tên và gạch chân ngoằn ngoèo SVG, từ khóa khoanh bút dạ cam / tô highlighter vàng; header gáy sổ lỗ xoắn, nav là tab giấy note xoay; demo truy xuất mã lô hiện timeline 5 bước gieo → đóng gói có ảnh dán; sản phẩm là index card sao OCOP bút dạ, toggle sỉ/lẻ; lịch mùa vụ dải 12 ô giấy; xã viên polaroid ghim đỏ; phiếu đặt hàng trên trang vở lề đỏ tự tính tổng; bản đồ vùng trồng vẽ tay. Kalam + Gaegu + Nunito.
Toàn trang là màn hình POS nền đen chữ xanh lân tinh + hổ phách, lớp scanline, font duy nhất JetBrains Mono; hero gõ chữ từng dòng lệnh + logo ASCII; ô lệnh "> tìm sản phẩm…" lọc tức thì; danh mục dạng [ RAU CU ] [ THIT CA ]; sản phẩm là sổ cái từng dòng có chấm dẫn và nút [-] 1 [+]; giỏ hàng là hóa đơn in nhiệt giấy trắng mép xé răng cưa, mã vạch CSS, VAT 8%; khung giờ giao [08:00-09:00] với ô HET; theo dõi đơn thanh tiến độ ASCII + log; cửa hàng là "node" có uptime; thanh trạng thái cố định đáy; giỏ lưu localStorage. JetBrains Mono.
Chữ là toàn bộ thiết kế: tiêu đề "LỄ / HỘI / ÁNH / SÁNG" 260px xếp chồng lệch, chữ rỗng đè chữ đặc, "HÀ NỘI 2026" xoay dọc mép phải, ảnh duy nhất qua ô cửa sổ nhỏ; ba số ngày 12·13·14 khổng lồ; dải cuộn ngang scroll-snap 4 ô "ÁNH / SÁNG / ÂM / NHẠC" đảo màu; chương trình tab "N1 N2 N3" chữ rỗng, giờ diễn 120px cạnh tên nghệ sĩ 16px; marquee hai chiều tên nghệ sĩ text-stroke; bản đồ gian hàng là lưới 40 ô mã hai chữ; giá vé cỡ lớn; menu chữ dọc rail trái; đếm ngược mono. Bricolage Grotesque + IBM Plex Mono.
Nền gần trắng với blob gradient mesh pastel mờ sau các ô; toàn trang là ô bento bo 28px viền 1px không bóng trên lưới 12 cột; không nav truyền thống — viên nang nổi 3 chấm + "Mua ngay"; hero là hàng bento đầu: ô lớn ảnh sản phẩm hòa mesh (mix-blend-mode) + tên 96px nét mảnh, ô giá, ô 4 swatch đổi màu mesh; 4 ô thông số số khổng lồ weight 200 (sóng âm CSS chuyển động, vòng đồng tâm, chấm nhấp nháy); ô câu chuyện cuộn ảnh dính đổi theo bước; so sánh 3 model; "trong hộp" icon SVG; đặt trước khắc tên preview live + tổng JS. Onest + Inter.
Nền đen phủ lưới lục giác + mạch điện mờ, neon cyan/magenta phát sáng thật, xanh acid cho trạng thái online; mọi thẻ/nút/ảnh cắt góc clip-path với viền neon 1px; hero scanline + nhấp nháy CRT, tiêu đề glitch cắt lát; bộ đếm "38/120 ONLINE" nhấp nhô; 4 zone máy kèm cấu hình mono và sơ đồ ghế chọn (trống/bận/chọn) tính tổng; bảng giá có happy-hour nổi bật; giải đấu tuần prize pool phát sáng + nhánh đấu 8 đội vẽ CSS; BXH thanh rank; panel đặt máy tự áp khung giờ. Chakra Petch + Share Tech Mono + Inter.
Nền kem, đỏ son, vàng đồng; tiêu đề Noto Serif Display, thân Be Vietnam Pro. Điểm nhận diện: khung viền hoa văn sen vẽ SVG mảnh bao quanh hero và gạch dưới sóng nước dưới mọi tiêu đề mục. Header 2 tầng có bộ chọn chi nhánh đổi địa chỉ/hotline toàn trang (lưu localStorage). Thực đơn 42 món lọc chay/dị ứng/cay, đặt bàn kèm sơ đồ 14 bàn click chọn, 3 gói tiệc, 3 chi nhánh, FAQ.
Nền đen than, chữ trắng ngà, vàng nhạt làm điểm nhấn; tiêu đề Playfair Display, thân Be Vietnam Pro mảnh. Nhận diện riêng: đường viền vàng kép 1px dưới tiêu đề mục và bao quanh thẻ khi hover, số La Mã đánh số bộ sưu tập và bước dịch vụ, ảnh viền mảnh trên nền tối. Lọc/sắp xếp sản phẩm, chọn chất liệu đổi giá, chọn size, xem trước chữ khắc tên, gallery thumbnail, tab, so sánh đồng hồ, form đặt lịch showroom, chính sách accordion.
Nền trắng xen xám nhạt, xanh dương làm nhấn, font Public Sans + Inter. Điểm nhận diện: mô-típ chấm lưới chạy xuyên suốt nền hero, section, khung thẻ; thanh tiện ích A−/A/A+ đổi cỡ chữ và chế độ tương phản cao (lưu localStorage). Ô tìm thủ tục với chip gợi ý, bảng 24 thủ tục và 15 văn bản lọc bằng JS, chi tiết thủ tục dạng timeline + checklist hồ sơ + biểu mẫu tải, lịch tiếp dân, sơ đồ tổ chức CSS, form phản ánh kiến nghị.
Nền kem ấm, màu đất nung làm nút, xanh lá dịu làm nhấn, bo góc 24–32px; Quicksand tiêu đề bo tròn + Be Vietnam Pro. Điểm nhận diện: mọi section chuyển màu bằng sóng SVG, chip tròn cấp độ Cơ bản/Trung cấp/Nâng cao, ảnh hero cắt blob trên nền gradient mềm. Lịch tuần 30 buổi lọc theo cấp độ và loại lớp (tự chuyển danh sách trên mobile), 6 loại lớp, 4 giáo viên, toggle giá tháng/năm, FAQ, form đăng ký buổi thử có kiểm tra SĐT.
Vàng chanh rực trên nền đen, chữ Space Grotesk to đậm, thân Be Vietnam Pro. Điểm nhận diện: khối vàng lệch góc (skewY −4°) ở hero và CTA cuối trang, số liệu khổng lồ chỉ có viền vàng trên nền đen, thẻ dịch vụ đen–vàng hover đảo màu. Dịch vụ kèm giá từ, lưới 8 dự án lọc theo ngành, case study, tuyển dụng 5 vị trí tự điền form, form báo giá có chọn ngân sách. Không hiệu ứng nặng, mobile gọn.
Header cam, nền xám nhạt, thẻ trắng nổi bóng mềm, nút bo tròn có hiệu ứng nhấn, font Roboto. Điểm nhận diện: thanh tab 4 icon dính đáy màn hình trên mobile, nút tròn nổi "+" tạo đơn trên desktop. Form tính phí ước tính theo km giữa 12 quận, tạo đơn 3 bước với tóm tắt phí cập nhật tức thời, tra cứu vận đơn có timeline trạng thái và bản đồ CSS, bảng giá theo km/kg, tab đăng ký shop/shipper.
Landing SaaS nền trắng xen dải pastel tím→xanh, brand tím, bo góc 16px, bóng mềm, icon line; Plus Jakarta Sans + Inter. Điểm nhận diện: mockup điện thoại và lịch tuần dựng hoàn toàn bằng CSS, thẻ "Lịch hẹn 14:30 · Cắt tóc" nổi trên máy, chấm "đang online" nhấp nháy ở avatar khách. Bảng giá toggle tháng/năm nổi cột giữa, bảng so sánh, FAQ, 6 case study, blog lọc chủ đề, form dùng thử tự tạo link đặt lịch.
Nền trắng ngà, chữ than, nhấn xanh rêu, phụ be; tiêu đề Cormorant cỡ lớn, thân Be Vietnam Pro mảnh, nhãn viết hoa tracking rộng. Điểm nhận diện: số thứ tự serif khổng lồ màu be mờ cạnh mỗi tiêu đề mục và trước từng loại phòng, drop cap ở giới thiệu, đường kẻ 1px be chia khối. Header trong suốt trên hero full-bleed, thanh đặt phòng nổi đè mép hero chuyển tham số sang form; 4 loại phòng, chi tiết phòng có form đặt nhanh dính, ẩm thực, 6 trải nghiệm, đặt phòng tự tính số đêm × giá.
Nền trắng ngà, be và nâu gỗ; tiêu đề Literata, thân Be Vietnam Pro mảnh, kẻ 1px, khoảng trắng rộng. Điểm nhận diện: số thứ tự serif lớn mờ cạnh tiêu đề mục, swatch chất liệu sồi/óc chó/tần bì/teak click đổi tên và giá, lưới sản phẩm ảnh 4:5 tên serif giá mảnh. Lọc sản phẩm theo phòng – chất liệu – giá, chi tiết đổi ảnh/chất liệu/kích thước, lọc dự án, 3 gói thiết kế + form báo giá, đặt lịch showroom, accordion chính sách.
Nền trắng/xám nhạt xen kẽ, brand xanh ngọc, nhấn cam nhạt cho khuyến mãi; font Lexend + Inter. Điểm nhận diện: mô-típ sóng răng cưa mềm ngăn cách mọi section, thanh tin cậy 4 số liệu nổi đè mép hero, bảng giá dạng bảng sạch có nhãn "Phổ biến". Form đặt lịch nhanh trong hero, 8 dịch vụ, lọc bảng giá theo nhóm, chọn khung giờ, lịch khám 4 bác sĩ theo 2 cơ sở, kiến thức + FAQ, trả góp 0%.
Header xanh 2 tầng với thanh tìm kiếm to + chip gợi ý và dải danh mục icon cuộn ngang; thẻ sản phẩm trắng nổi trên nền xám, nhãn giảm giá vàng, giá đỏ, sao đánh giá. Điểm riêng: checkbox "So sánh" bật thanh so sánh nổi dưới đáy, tab bar cố định trên mobile, carousel tự chuyển, flash sale đếm ngược, lọc máy theo hãng–giá–RAM, chọn màu/dung lượng đổi giá, giỏ hàng tính tổng + mã giảm, bảng tính trả góp. Archivo + Inter.
Nền trắng xen dải pastel xanh→tím, brand xanh dương, nhấn vàng, bo góc lớn, bóng mềm; tiêu đề Baloo 2 tròn thân thiện, thân Be Vietnam Pro. Điểm nhận diện: thẻ điểm nổi IELTS 7.5 / TOPIK 4 / JLPT N3 kèm thanh tiến trình, huy hiệu tròn "Cam kết đầu ra" chữ chạy vòng SVG textPath, chip EN/KR/JP ba màu xuyên suốt. Lọc 9 khóa theo ngôn ngữ × trình độ, lịch khai giảng 12 lớp lọc cơ sở, 6 giáo viên, bảng vàng, blog, form kiểm tra trình độ + FAQ.
Mô phỏng bố cục và bảng màu trung tâm Anh ngữ lớn (kiểu Langmaster): nền trắng xen xám nhạt, đỏ thương hiệu, CTA cam, vàng nhấn, một font Be Vietnam Pro. Điểm nhận diện: thanh ưu đãi dính đầu trang đếm ngược tới cuối tháng, nút nổi "Nhận tư vấn", bậc thang band điểm 6 cấp vẽ bằng CSS, form tư vấn viền xanh lặp ở hero/giữa/cuối. Hệ sinh thái 5 khóa, 8 lý do, phương pháp, giáo viên, bảng vàng chứng chỉ CSS, báo chí, đối tác, 5 cơ sở, lịch khai giảng lọc, test 10 câu chấm điểm, kiến thức lọc, FAQ.
Mô phỏng bố cục và bảng màu trung tâm IELTS lớn (kiểu LangGo): header đỏ, hàng chip nút nhanh, CTA cam, band điểm vàng, Montserrat 800 + Inter. Điểm nhận diện: khối khóa học dạng banner ngang xen kẽ trái/phải với 4 ô thông số và nhãn giảm giá xéo góc, đồng hồ band SVG 7.0+ / 89,6% ở hero và bảng vàng, thanh CTA dính đáy mobile (Gọi / Test miễn phí). Lộ trình 6 giai đoạn, 6 khóa + bảng so sánh, 7 cơ sở, lịch khai giảng lọc, 12 chứng chỉ lọc band, mini test 10 câu dự đoán band, FAQ.
Không có template nào khớp.
89 template HTML/CSS miễn phí từ HTML5 UP, Start Bootstrap, website-templates và Tailwind Toolbox — tải nguyên bản để tham khảo bố cục.
Nền trắng xen kem, khối hồng phấn và bạc hà nhạt, nhấn hồng đất; tiêu đề Playfair Display, thân Be Vietnam Pro 300, rất nhiều khoảng trắng. Điểm riêng: tháp hương 3 tầng (đầu/giữa/cuối) vẽ CSS ở hero và trang chi tiết, chai nước hoa vẽ CSS 9 màu pastel cho sản phẩm chưa có ảnh, 4 nút tròn "chọn theo tâm trạng" lọc sản phẩm ngay trên trang chủ, chip nhóm hương. Lọc bộ sưu tập theo nhóm/giới tính/dung tích, đổi dung tích đổi giá, set quà + xem trước khắc tên, đặt lịch thử hương tại showroom.
Cửa hàng nước hoa Hà Nội với bố cục quen thuộc như các shop online lớn: header hai tầng có tìm kiếm và giỏ hàng, menu ngang theo danh mục, hero chữ trái, dải 4 cam kết, lưới sản phẩm 4 cột có tab Bán chạy/Mới/Giảm giá. Nền trắng xen kem, xanh xô thơm, nhấn xanh rêu; Cormorant Garamond + Be Vietnam Pro. Danh mục có sidebar lọc và sắp xếp thật, chi tiết đổi dung tích đổi giá, tháp hương dạng đường kẻ, trắc nghiệm 6 câu, giỏ hàng có mã giảm giá lưu localStorage.
:root rồi mở rộng thêm.--imgCác khối ảnh nhận đường dẫn bằng CSS variable trên thẻ HTML, chưa có ảnh thì tự đổ nền gradient theo tông thương hiệu.