CÁCH TẠO TRANG 404 LỖI THEO PHONG CÁCH HACKER.

Ảnh minh họa.

Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn tạo trang 404 theo phong cách hacker, demo mình sẽ để cuối bài viết nhé, tiến hành làm theo mình nhé.
CSS

<div class="overlay"></div> <div class="terminal"> <h1>Error <span class="errorcode">404</span></h1> <p class="output">Trang bạn tìm kiếm không tồn tại hoặc đã bị xóa.</ü> <p class="output">Please try <a href="#1">Trang Chủ</a> or <a href="#2">Liên hệ</a></p></div>

Các bạn chèn thêm HTML này sau CSS trên dưới thẻ đóng </body>

@import "https://fonts.googleapis.com/css?family=Inconsolata"; html { min-height: 100%; } body { box-sizing: border-box; height: 100%; background-color: #000000; background-image: -webkit-radial-gradient(#11581e, #041607); background-image: radial-gradient(#11581e, #041607); font-family: 'Inconsolata', Helvetica, sans-serif; font-size: 1.5rem; color: rgba(128, 255, 128, 0.8); text-shadow: 0 0 1ex #33ff33, 0 0 2px rgba(255, 255, 255, 0.8); } .overlay { pointer-events: none; position: absolute; width: 100%; height: 100%; background: -webkit-repeating-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.3) 50%, transparent 100%); background: repeating-linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.3) 50%, transparent 100%); background-size: auto 4px; z-index: 99; } .overlay::before { content: ""; pointer-events: none; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(bottom, transparent 0%, rgba(32, 128, 32, 0.2) 2%, rgba(32, 128, 32, 0.8) 3%, rgba(32, 128, 32, 0.2) 3%, transparent 100%); background-image: linear-gradient(0deg, transparent 0%, rgba(32, 128, 32, 0.2) 2%, rgba(32, 128, 32, 0.8) 3%, rgba(32, 128, 32, 0.2) 3%, transparent 100%); background-repeat: no-repeat; -webkit-animation: scan 7.5s linear 0s infinite; animation: scan 7.5s linear 0s infinite; } @-webkit-keyframes scan { 0% { background-position: 0 -100vh; } 35%, 100% { background-position: 0 100vh; } } @keyframes scan { 0% { background-position: 0 -100vh; } 35%, 100% { background-position: 0 100vh; } } .terminal { box-sizing: inherit; position: absolute; height: 100%; width: 1000px; max-width: 100%; padding: 4rem; text-transform: uppercase; } .output { color: rgba(128, 255, 128, 0.8); text-shadow: 0 0 1px rgba(51, 255, 51, 0.4), 0 0 2px rgba(255, 255, 255, 0.8); } .output::before { content: "> "; } /* .input { color: rgba(192, 255, 192, 0.8); text-shadow: 0 0 1px rgba(51, 255, 51, 0.4), 0 0 2px rgba(255, 255, 255, 0.8); } .input::before { content: "$ "; } */ a { color: #fff; text-decoration: none; } a::before { content: "["; } a::after { content: "]"; } .errorcode { color: white; }

Tổng Kết

Đay là mẫu code mình lấy lại, và chỉnh sửa 1 chút CSS và HTML. Mình mong các bạn sẽ áp dụng nó vào blog, chúc các bạn thành công.

Ảnh Demo.