Thiết kế trang 404 theo phong cách hacker

14/09/2017

Chào các bạn ! Hôm nay mình sẽ mang đến cho các bạn thêm một mẫu thiết kế trang 404 (trang lỗi link) cho website và blog của các bạn. Mẫu thiết kế trong bài viết này được mô phỏng theo phong cách màn hình mà các hacker thường sử dụng. Cực cool và đầy sức sáng tạo, tác giả của mẫu thiết kế này là Robin Selmer.

Thiết kế trang 404 theo phong cách hacker

Xem Demo | Download

HTML

Các bạn sắp xếp nội dung trang theo cấu trúc html như sau :

<div class="overlay"></div>
<div class="terminal">
  <h1>Error <span class="errorcode">404</span></h1>
  <p class="output">The page you are looking for might have been removed, had its name changed or is temporarily unavailable</ü>
  <p class="output">Please try <a href="#1">this link</a> or <a href="#2">this link</a></p>
  <p class="output">Good luck</p>
</div>

CSS

Sau đó định dạng lại với đoạn css bên dưới.

@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;
}

Đây cũng là mẫu thiết kế mà mình rất thích, mình hy vọng là các bạn sẽ sáng tạo thêm cho website, blog mà các bạn đang sở hữu, nhớ chia sẻ cho bạn bè và người thân của mình nữa nhé.

Tags:

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !