DailyUI #008 - 404 Page

In this example below you will see how to do a DailyUI #008 - 404 Page with some HTML / CSS and Javascript

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

Technologies

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

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

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

  
</head>

<body>

  <div class='container'>
  <div class='four-zero-four-container'>
    <div class='four'></div>
    <div class='zero'></div>
    <div class='four'></div>
  </div>
  <div class='container_heading'>Oops!</div>
  <p>Something Went Wrong</p>
  <div class='button'>Back to Top</div>
</div>
<footer class='footer'>
  <div class='footer_line'></div>
  <div class='footer_text'>404 Page created by <a href='https://codepen.io/naturalclar/'>Smashcat</a></div>
</footer>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/naturalclar/dailyui-008-404-page-YrGjpr */
/* imports */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* variables */

/* global */
html {
  background: #2196f3;
  min-height: 100%;
  font-family: 'Open Sans', sans-serif;
}

body {
  height: 100vh;
  background: #2196f3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* four */
.four {
  margin: 16px;
  margin: 1rem;
  position: relative;
  background: white;
  width: 48px;
  width: 3rem;
  height: 16px;
  height: 1rem;
  box-shadow:inset -2px -2px 2px rgb(30, 135, 219);
  border-radius: 0 0 0 0.5rem;
  -webkit-transform: rotateX(25deg) rotateY(15deg) translateY(0.5rem);
          transform: rotateX(25deg) rotateY(15deg) translateY(0.5rem);
}
.four:before{
    content: '';
    opacity: .99;
    position: absolute;
    bottom: 16px;
    bottom: 1rem;
    left: 0;
    width: 16px;
    width: 1rem;
    height: 32px;
    height: 2rem;
    background: white;
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow:inset  -2px 2px 2px rgb(30, 135, 219);
    
  }
.four:after{
    content: '';
    position: absolute;
    right:0;
    top: -32px;
    top: -2rem;
    width: 16px;
    width: 1rem;
    height: 64px;
    height: 4rem;
    background: white;
    border-radius: 0.5rem;
  box-shadow:inset -2px -2px 2px rgb(30, 135, 219);
    
  }

.zero {
  background: white;
  width: 48px;
  width: 3rem;
  height: 64px;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:inset 2px 2px 2px rgb(30, 135, 219);
  -webkit-transform: rotateX(25deg) rotateY(15deg);
          transform: rotateX(25deg) rotateY(15deg);
  border-radius: 1rem;
}

.zero:after{
    content: '';
    width: 16px;
    width: 1rem;
    height: 32px;
    height: 2rem;
    background: #2196f3;
    box-shadow: 2px 2px 2px rgb(30, 135, 219);
    border-radius: 0.5rem;
  }

/* container */
.four-zero-four-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16px;
  height: 1rem;
  width: 112px;
  width: 7rem;
  background: white;
  padding: 8px;
  padding: 0.5rem;
  color: #2196f3;
  font-weight: bold;
  border-radius:1rem;
  box-shadow: 2px 2px 2px rgb(30, 135, 219); 
  transition: all 0.2s ease;
  cursor: pointer;
}

.button:hover {
    background: rgb(23, 105, 170);
    color: white;
      
  }

.container{
  background: #2196f3;
  padding-top: 32px;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  flex: 1;
  color: white;
}

.container_heading{
    font-size: 32px;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 16px;
    margin-top: 1rem;
  }

.container_text {
    text-shadow:2px 2px 2px rgb(30, 135, 219);
  }

.footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}

.footer_line {
    width: 90%;
    height: 2px;
    background: white;
    margin-top: 48px;
    margin-top: 3rem;
  }

.footer_text {
    padding: 16px;
    padding: 1rem;
    color: white;
  }

.footer a {
    color: white;
  }

Comments