Daily UI #8. 404 page

In this example below you will see how to do a Daily UI #8. 404 page with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by IanHazelton, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright IanHazelton ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Daily UI #8. 404 page</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='css/debc8e4f76619bb1424ba17c8.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrap">
 <div class="container__inner">
  <h1 class="fourofour">404</h1>
  <img class="astronaut" src="https://www.kennedyspacecenter.com/-/media/DNC/KSCVC/Global-Images/spaceman.ashx?h=263&w=252&la=en&hash=2FB54795818BD9CF32971DFA04CF41F420B6F63C" alt="">
  <div class="helper">
   <h2>Whoa! How did you get out here?</h2>
   <h3><a href="https://dribbble.com/ianhazelton" target="_blank">Go back to earth</a></h3>
  </div>
 </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/IanHazelton/daily-ui-8-404-page-dJvzzX */
@import url("https://fonts.googleapis.com/css?family=Anton");
body {
  background-color: #000;
}

.wrap {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.container__inner {
  position: relative;
  width: 800px;
  height: 600px;
  background: url("https://timedotcom.files.wordpress.com/2017/10/229-westerlund-21.jpg?w=1520&quality=85&h=1139") 0 0 no-repeat;
}

.fourofour {
  font-size: 30rem;
  color: #7e00ff80;
  mix-blend-mode: multiply;
  position: absolute;
  left: 20%;
}

.astronaut {
  -webkit-animation: spin 20000ms linear infinite;
          animation: spin 20000ms linear infinite;
  height: 150px;
  margin: 20% auto;
  width: auto;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
a,
h2,
h3 {
  color: #5c1577;
  font-family: "Anton", sans-serif;
  font-size: 3rem;
  text-align: center;
  mix-blend-mode: multiply;
}

a {
  text-decoration: underline;
}


/*Downloaded from https://www.codeseek.co/IanHazelton/daily-ui-8-404-page-dJvzzX */
//Just a silly little dribbble shot I made for #DailyUI
//https://dribbble.com/ianhazelton

Comments