Round 1 – Ant Butcher

In this example below you will see how to do a Round 1 – Ant Butcher with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Round 1 – Ant Butcher</title>
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="controls">
  <button data-direction="previous">Previous</button>
  <button data-direction="next">Next</button>
</div>

<div id="main">
  <div class="sections">
    <section id="section-1">
      <main>
         <header>
            <h1>Welcome</h1>
            <h2>Pairing Vehicle</h2>
        </header>
        <div class="balls">
          <div class="ball"></div>
          <div class="ball"></div>
          <div class="ball"></div>
        </div>
      <button class="cancel">Cancel</button>
      </main>
    </section>

    <section id="section-2">
      <main>
      <h2>Tysons Corner</h2>
      <h3>Garage Level</h3>
      <h4>P2</h4>
      <span class="spot">
        Assigned spot no<em>76A</em>
      </span>
      <span class="details">
        <span class="date">Mon Mar 08 2016</span>
        <span class="time">05:00 PM</span>
      </span>
      <button class="main" id="accept-button">Accept</button>
      </main>
    </section>

    <section id="section-3">
      <main>
      <h3>Get to your spot<em>76A</em></h3>
      <ol>
        <li data-arrow="up" class="fade-hidden">Use entrance C</li>
        <li data-arrow="left" class="fade-hidden">Turn left at stop</li>
        <li data-arrow="right" class="fade-hidden">Turn right</li>
        <li data-arrow="down" class="fade-hidden">Go straight</li>
        <li data-arrow="right" class="fade-hidden">On your right</li>
      </ol>
      
      </main>
    </section>
  </div>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/MMTDigital/round-1-andx2013-ant-butcher-MyryQO */
body {
  background: rgba(47, 47, 47, 0.980392);
}

body, button {
  font-family: 'Inconsolata', sans-serif;
  color: #484848;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fade-hidden {
  opacity: 0;
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 700ms;
          animation-duration: 700ms;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

h1, h2, h3, h4 {
  margin: 0;
}

#main {
  background: white;
  width: 360px;
  height: 640px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.sections {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  bottom: 0;
  transition: left .3s;
}

section {
  width: 360px;
  height: 100%;
  float: left;
  top: 0;
  bottom: 0;
  position: relative;
}

section main {
  margin: 70px 30px;
  padding: 30px;
  background: white;
}

#section-1 {
  background: white;
}

#section-2 {
  background: #f26064;
}

#section-3 {
  background: #414141;
}

button {
  cursor: pointer;
  outline: 0;
}

button.cancel {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -30px;
  background: none;
  border: 0;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

button.cancel:before {
  width: 55px;
  height: 38px;
  padding-top: 17px;
  vertical-align: middle;
  content: "\f129";
  font: normal normal normal 20px/1 "Ionicons";
  border-radius: 50%;
  box-shadow: 0px 20px 20px 1px rgba(0, 0, 0, 0.1);
  transition: box-shadow .2s;
  display: block;
  margin-bottom: 25px;
  color: #f26064;
}

button.cancel:hover:before {
  background: #f26064;
  color: white;
  box-shadow: 0px 5px 20px 1px rgba(0, 0, 0, 0.3);
}

button.cancel:active:before {
  background: #ef3a3f;
  text-shadow: -1px -1px 0 #c31015;
  color: #f8a7a9;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.38);
}

button.main {
  position: absolute;
  bottom: 0;
  background: #414141;
  width: 100%;
  left: 0;
  right: 0;
  color: white;
  border: 0;
  padding: 20px 0;
  cursor: pointer;
}
button.main:hover {
  background: #343434;
}
button.main:active {
  background: #282828;
}

ol {
  border-left: 3px #d7d7d7 solid;
  padding: 0 0 0 20px;
  margin: 30px 0 0 20px;
}

ol li {
  list-style: none;
  position: relative;
  min-height: 40px;
  margin-bottom: 35px;
  padding-left: 15px;
  display: table;
  font-size: 1.2rem;
  font-weight: 700;
}
ol li:before {
  content: '';
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  left: -44px;
  top: -15px;
  display: block;
  width: 40px;
  height: 40px;
  background: white;
  color: #f26064;
  border: 3px #d7d7d7 solid;
  border-radius: 50%;
  text-align: center;
  font: normal normal normal 28px/1 "Ionicons";
  line-height: 40px;
}
ol li[data-arrow="right"]:before {
  content: "\f10b";
}
ol li[data-arrow="down"]:before {
  content: "\f105";
}
ol li[data-arrow="left"]:before {
  content: "\f108";
}
ol li[data-arrow="up"]:before {
  content: '\f10e';
}

.balls {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  margin: 50px 0;
  text-align: center;
}
.balls .ball {
  height: 30px;
  width: 30px;
  position: relative;
  margin: 0 5px;
  display: inline-block;
}
.balls .ball:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 30px;
  background: #f26064;
  border-radius: 50%;
  -webkit-animation: bounce 700ms infinite alternate;
          animation: bounce 700ms infinite alternate;
}
.balls .ball:nth-child(2):before {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.balls .ball:nth-child(3):before {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}

@-webkit-keyframes bounce {
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: .5;
  }
}

@keyframes bounce {
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: .5;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#section-3 main {
  position: relative;
  overflow: hidden;
}
#section-3 main:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), white 70%, white 100%);
}

#section-1 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#section-1 h1 {
  font-size: 2.15rem;
  margin-bottom: 15px;
}
#section-1 h2 {
  color: #f26064;
  font-size: 1rem;
}

#section-2 {
  text-align: center;
}
#section-2 main {
  box-shadow: 0 20px 30px 3px rgba(0, 0, 0, 0.1);
}
#section-2 h2 {
  color: #f26064;
  letter-spacing: 1px;
  font-size: 1.4rem;
}
#section-2 h2:after {
  content: '';
  display: block;
  border-bottom: 3px #d7d7d7 solid;
  margin: 35px auto;
  height: 3px;
  width: 20px;
}
#section-2 h3 {
  letter-spacing: 2px;
  font-size: 1.2rem;
}
#section-2 h4 {
  font-size: 10rem;
  font-weight: 700;
}
#section-2 .spot {
  font-size: 1rem;
}
#section-2 .spot em {
  font-style: normal;
  color: #f26064;
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  margin: 10px 0 30px 0;
}
#section-2 .details {
  font-size: 0.7rem;
  font-weight: 700;
}
#section-2 .details .date {
  float: left;
}
#section-2 .details .time {
  float: right;
}

#section-3 main {
  height: 100%;
}
#section-3 h3 {
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 55px;
}
#section-3 h3 em {
  font-size: 3rem;
  color: #f26064;
  display: block;
  font-style: normal;
}


/*Downloaded from https://www.codeseek.co/MMTDigital/round-1-andx2013-ant-butcher-MyryQO */
(function() {
  
  var self,
      currentSectionIndex = 0;
  
  return {
    init: function() {
      self = this;
      self.wrapper = document.getElementsByClassName('sections')[0];
      self.sections = self.wrapper.getElementsByTagName('section');
      self.setupControls(document.getElementById('controls'));
      self.goTo(0);
      
      document.getElementById('accept-button').addEventListener('click', function() {
        self.goTo(2);
      });
      
      setTimeout(function() {
        self.goTo(1);
      }, 2000);
    },
    
    setupControls: function(container) {
      container
        .addEventListener('click', function(e) {
          if(e.target.tagName === 'BUTTON') {
            e.stopPropagation();
            var direction = e.target.attributes['data-direction'].value;
            var newIndex = direction === 'next' ? currentSectionIndex + 1 : currentSectionIndex - 1;
            self.goTo(newIndex);
          }
        });
    },
    
    goTo: function(sectionIndex) {
      if(sectionIndex + 1 > self.sections.length || sectionIndex < 0) {
        return;
      }
      
      self.wrapper.style.left = "-" + (sectionIndex * self.sections[0].offsetWidth) + "px";
      
      currentSectionIndex = sectionIndex;
      
      self.fadeInElements(self.sections[currentSectionIndex]);
    },
    
    fadeInElements: function(container) {
      var elements = self.getElements(container);
      
      for(var i = 0; i < elements.length; i++) {
        self.fadeInElement(elements[i], i * 100);
      }
    },
    
    fadeInElement: function(element, delay) {
      setTimeout(function() {
        element.classList.add('fadeIn');
      }, delay);
      
      setTimeout(function() {
        element.classList.remove('fade-hidden');
      }, delay + 700);
    },
    
    getElements: function(container) {
      return container.getElementsByClassName('fade-hidden');
    }
  };
  
})().init();

Comments