404ページも楽しくなっちゃうロボットが出迎えてくれるデザイン『Sovog 404 page』

Sovog 404 page
By Marco Barría

DEMO 表示

ロボットのキャラが、へんてこな踊りをしているのを404ページとして作ったものです

SVGで作られたロボットのパーツをCSSのアニメーションで動作させることでロボットが踊っているかのようアニメーションになっています

ロボットばかりに目が行きがちですが 404の文字も綺麗に出来ています

このままサイトの404ページに使っても良さげですね

文字のところの CSSのデザインはこのようなコードになっています

.col {
  text-align: center;
}
.col h1 {
  text-shadow: 0 3px 0px #404853, 0 6px 0px #333333;
  color: #f54f59;
  font-size: 6em;
  font-weight: 700;
  line-height: 0.6em;
}
.col p {
  color: #ccc;
  font-family: monospace;
  font-size: 0.95em;
  font-weight: 300;
  line-height: 7em;
}

このコードは一式ダウンロード可能です

Download Zip