404 Bakery

In this example below you will see how to do a 404 Bakery with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>404 Bakery </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Henny+Penny" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>

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

  
</head>

<body>

  <div class="container-fluid">
  <div class="row header">
    <div class="col text-center">
      <h1>OOPS! 404 Cake Not Found</h1>
    </div>
  </div>
  <div class="row">
    <div class="col text-center">
      <h5 class="header secondary-text">Looks like this page doesn't exist or has moved</h5>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      
        <div class="text-center parent">
          <img src="https://cdn1.iconfinder.com/data/icons/food-cartoon/512/g8077-512.png" class="img-responsive cake-img " alt="cartoon cake" />
        </div>
        <div class="plate center"></div>
        <div class="marchingAnts">
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
          <div class="ant"></div>
        </div>
     
    </div>

  </div>
  

</div>
<div class="container-fluid">
  <div class="row footer">
    <div class="col text-center">
      <h5 class="header">Coded By Conor Hinchee</h5>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/404-bakery-VygxWM */
body {
  background: #fd5b78;
}

.parent {
  overflow: auto;
}

.header {
  padding-top: 10%;
  font-family: "Henny Penny", cursive;
}

.center {
  margin: auto;
}

.cake-img {
  width: 10%;
  animation: carry-cake 12s linear forwards;
}

.plate {
  border: 1.5px solid black;
  border-radius: 100%;
  width: 15%;
  height: 50px;
  background: tan;
  margin-top: -5%;
  z-index: -1;
  animation: carry-plate 12s linear forwards;
}

.ant {
  background: black;
  z-index: -1;
  margin-bottom: 12%;
  width: 4px;
  height: 3px;
  border-radius: 40%;
  display: inline-block;
  margin-left: 1%;
  margin-right: -1%;
}

.marchingAnts {
  animation-delay: 2s;
  animation: march 12s linear forwards;
}

.secondary-text {
  visibility: hidden;
  animation: show-text 12s linear forwards;
}

@keyframes march {
  10% {
    margin-left: 15%;
  }
  20% {
    margin-left: 30%;
  }
  40% {
    margin-left: 45%;
  }
  50% {
    margin-left: 44%;
  }
  60% {
    margin-left: 43%;
  }
  80% {
    margin-left: 15%;
  }
  100% {
    margin-left: -100%;
    visibility: hidden;
  }
}
@keyframes carry-plate {
  60% {
    margin-left: 42.5%;
  }
  65% {
    margin-left: 34%;
  }
  80% {
    margin-left: 15%;
  }
  100% {
    margin-left: -100%;
    visibility: hidden;
  }
}
@keyframes carry-cake {
  60% {
    margin-left: 0%;
  }
  70% {
    margin-left: -32%;
  }
  80% {
    margin-left: -58%;
  }
  100% {
    margin-left: -250%;
    visibility: hidden;
  }
}
@keyframes show-text {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
@media screen and (max-width: 425px) {
  .cake-img {
    width: 20%;
  }

  .plate {
    margin-top: -10%;
  }

  .ant {
    width: 2px;
    height: 1px;
  }
}


/*Downloaded from https://www.codeseek.co/captnstarburst/404-bakery-VygxWM */
// Nothing to see here

Comments