Lạ mắt với mẫu thiết kế 404 bằng CSS3

Tình cờ thấy được một trang 404 được thiết kế khá hay mà lại đơn giản, nên sẵn tiện mình làm thử và chia sẻ cho các bạn. Với mẫu thiết kế này, các bạn sẽ làm cho trang web hay blog của mình trở nên sinh động hơn rất nhiều.

Xem Demo | Download

HTML

<div class='container'>
    <div class='row content'>
      <div class='col-lg-12'></div>
      <div class='col-lg-12'>
        <h1>404</h1>
        <h2>Oops, the page you're looking for does not exist.</h2>
        <p>
          You may want to head back to the homepage.
          <br>
            If you think something is broken, report a problem.
          </br>
        </p>
        <span class='btn'>RETURN HOME</span>
        <span class='btn'>REPORT PROBLEM</span>
      </div>
    </div>
  </div>
<div class='bg-img'></div>

Để tạo trang 404 này, trước hết các bạn cần sử dụng khung chuẩn html như sau :

CSS

html, body {
  awidth: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;
}

.bg-img {
  position: absolute;
  awidth: 100%;
  height: 100%;
  background: url(nothing_to_see_here_naked_gun.gif) no-repeat center center fixed;
  background-size: cover;
  background-color: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}

.content {
  font-family: 'Avenir-Next',Avenir,Helvetica,sans-serif;
  color: #fff;
  background-color: none;
  z-index: 2;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.container{ 
    awidth:970px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

h1 {
  font-size: 160px;
  margin-bottom: 0;
  margin-top: 0;
}

h2 {
  margin-top: 0;
  max-awidth: 700px;
  font-size: 30px;
  awidth: 90%;
}

p {
  text-align: left;
  padding-bottom: 32px;
}

.btn {
  display: inline-block;
  border: 1px solid #aaa;
  border-radius: 40px;
  padding: 15px 30px;
  margin-right: 15px;
  margin-bottom: 10px;
}
.btn:hover {
  color: #e2e2e2;
  background: rgba(255, 255, 255, 0.1);
}

@media only screen and (max-awidth: 480px) {
  .btn {
    background-color: white;
    color: #444444;
    awidth: 100%;
  }

  h1 {
    font-size: 120px;
  }
}

Sau đó, các bạn định dạng nó với đoạn css này :

Chúc các bạn thành công !

Chuyên Mục: Css, Thiết kế website

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