<html>

<head>
	<meta charset="UTF-8">
	<title>Tether Walkthrough</title>


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

	<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:700,300'>
	<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'>
	<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css'>

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


</head>

<body>

	<!-- / A set of walkthrough screens in HTML/CSS/JS. A personal experiment with layering images, CSS3 transitions, & flexbox. -->
	<button class='open-walkthrough'>Start</button>
	<div class='walkthrough'>

		<div class='walkthrough-body'>
			<ul class='screens animate'>
				<li class='screen active'>
					<div class='media logo'>
						<img class='logo' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/94278/tether-fist.png'>
					</div>
					<h3>
          Yo! Welcome
          <br>to Tether son.</br>
        </h3>
					<p>Tether settles meetup details—what, when, who—so you can start the fun. We streamline the hot mess of contacts, calendars, and questions into a flow that reflects friends’ free time in real-time.</p>
				</li>
				<li class='screen'>
					<div class='media books'>
						<img class='icon' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/94278/tether-handshake.png'>
						<!--<img class='icon' src='https://s3.amazonaws.com/jebbles-codepen/book_icon_2.png'>
          <img class='icon' src='https://s3.amazonaws.com/jebbles-codepen/book_icon_3.png'>-->
					</div>
					<h3>
          Choose
          <br>Your Crew</br>
        </h3>
					<p>Find the right time with the right people by saving and grouping your contacts in Tether. Enter names and numbers, and if you reach out to the same people often, just add a title for the group.</p>
				</li>
				<li class='screen'>
					<div class='media bars'>
						<img class='icon' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/94278/tether-sms.png'>
						<!--<img class='icon' src='https://s3.amazonaws.com/jebbles-codepen/bar_icon_3.png'>
          <img class='icon' src='https://s3.amazonaws.com/jebbles-codepen/bar_icon_2.png'>
          <img class='icon' src='https://s3.amazonaws.com/jebbles-codepen/bar_icon_1.png'>-->
					</div>
					<h3>
          Vote
          <br>via sms</br>
        </h3>
					<p>Tether tackles a simple question - When are you free? - and empowers easy answers via SMS voting. Your contacts recieve your message in plain language and can respond via text.</p>
				</li>
				<li class='screen'>
					<div class='media files'>
						<img class='icon' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/94278/tether-fist-bump.png'>
						<!--<img class='icon' src='https://s3.amazonaws.com/jebbles-codepen/file_icon_2.png'>
          <img class='icon' src='https://s3.amazonaws.com/jebbles-codepen/file_icon_3.png'>
          <img class='icon' src='https://s3.amazonaws.com/jebbles-codepen/file_icon_4.png'>-->
					</div>
					<h3>
          Decide
          <br>and Share</br>
        </h3>
					<p>Thether shows you what date and time works best for most and sends your decision to all participants via SMS. Once your Tether wraps up online, everyone knows when to meet in person.</p>
				</li>
				<li class='screen'>
					<div class='media comm'>
						<img class='icon' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/94278/tether-dance.png'>
						<!--<img class='icon' src='https://s3.amazonaws.com/jebbles-codepen/comm_icon_2.png'>-->
					</div>
					<h3>
          Go get
          <br>your Tether on!</br>
        </h3>
					<p>From here, it's all yours. Date and details, done. Go get your Tether on and make some magic happen.</p>
				</li>
			</ul>

			<button class='prev-screen'>
      <i class='icon-angle-left'></i>
    </button>
			<button class='next-screen'>
      <i class='icon-angle-right'></i>
    </button>
		</div>
		<div class='walkthrough-pagination'>
			<a class='dot active'></a>
			<a class='dot'></a>
			<a class='dot'></a>
			<a class='dot'></a>
			<a class='dot'></a>
		</div>
		<div class='walkthrough-footer'>
			<button class='button next-screen'>Next</button>
			<button class='button finish close' disabled='true'>Finish</button>
		</div>
	</div>
	<script src='https://code.jquery.com/jquery-1.12.0.min.js'></script>

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


</body>

</html>
body {
  color: white;
  font-family: "Lato";
  font-weight: light;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(150deg, #350a2a 0%, #350a2a 100%);
}

.open-walkthrough {
  border: 0;
  background: #f73b4f;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  height: 40px;
  width: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -60px;
}

.walkthrough {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
  background: linear-gradient(to right bottom, #441234, #7b245e);
  border-radius: 0;
  display: none;
  flex-direction: column;
  flex: 0 0 auto;
  font-size: 14px;
  height: 464px;
  overflow: hidden;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 280px;
  z-index: 1000;
}
.walkthrough.show {
  display: flex;
  opacity: 0;
  transform: translateY(72px);
}
.walkthrough.reveal {
  opacity: 1;
  transform: translateY(0);
}
.walkthrough .walkthrough-body {
  align-items: center;
  display: flex;
  flex: 1;
  text-align: center;
}
.walkthrough .walkthrough-body .prev-screen,
.walkthrough .walkthrough-body .next-screen {
  align-self: stretch;
  background: none;
  border: 0;
  margin-top: 40px;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 24px;
  opacity: 1;
  outline: none;
  padding: 16px;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1000;
}
.walkthrough .walkthrough-body .prev-screen:hover, .walkthrough .walkthrough-body .prev-screen:active,
.walkthrough .walkthrough-body .next-screen:hover,
.walkthrough .walkthrough-body .next-screen:active {
  color: white;
  transform-origin: center;
  transform: scale(1.25);
}
.walkthrough .walkthrough-body .prev-screen:disabled,
.walkthrough .walkthrough-body .next-screen:disabled {
  opacity: 0;
}
.walkthrough .walkthrough-body .prev-screen {
  order: 1;
}
.walkthrough .walkthrough-body .next-screen {
  order: 3;
}
.walkthrough .walkthrough-body .screens {
  flex: 1;
  align-self: stretch;
  position: relative;
  margin: 0 -16px;
  padding: 0;
  order: 2;
}
.walkthrough .walkthrough-body .screens .screen {
  position: absolute;
  list-style-type: none;
}
.walkthrough .walkthrough-body .media {
  border-radius: 132px;
  height: 132px;
  margin: 32px auto;
  width: 132px;
  background: rgba(255, 255, 255, 0.0);
}
.walkthrough .walkthrough-body h3 {
  font-size: 15px;
  line-height: 1.4em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.walkthrough .walkthrough-body p {
  line-height: 1.6em;
  font-size: 13px;
  margin-top: 16px;
  padding-top: 0;
  color: rgba(255, 255, 255, 0.8);
}
.walkthrough .walkthrough-pagination {
  align-items: center;
  justify-content: center;
  display: flex;
  margin-bottom: 24px;
}
.walkthrough .walkthrough-pagination .dot {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  height: 8px;
  margin: 0 4px;
  transform: scale(0.75);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 8px;
}
.walkthrough .walkthrough-pagination .dot.active {
  background: white;
  transform: scale(1);
  transition-delay: 0.4s;
}
.walkthrough .walkthrough-footer {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-around;
  padding: 0;
}
.walkthrough .walkthrough-footer button {
  height: 40px;
  border: 0;
  background: #6af0c6;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: 0;
  color: #23735a;
  flex: 1;
  font-size: 12px;
  margin: 0;
  outline: 0;
  padding: 12px;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}
.walkthrough .walkthrough-footer button:hover {
  background: #56c1a0;
}
.walkthrough .walkthrough-footer button:active {
  background: #56c1a0;
}
.walkthrough .walkthrough-footer button:disabled {
  cursor: pointer;
}
.walkthrough .walkthrough-footer button.finish {
  background: #6af0c6;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  transform: scale(0, 1);
  transform-origin: center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.walkthrough .walkthrough-footer button.finish:hover {
  background: #56c1a0;
}
.walkthrough .walkthrough-footer button.finish:active {
  background: #56c1a0;
}
.walkthrough .walkthrough-footer button.finish.active {
  transform: scale(1, 1);
  opacity: 1;
}
.walkthrough .screens {
  margin: 0;
}
.walkthrough .screens .media .status-badge {
  left: 136px;
  opacity: 0;
  position: absolute;
  top: 104px;
  transform: scale(0);
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.6s;
}
.walkthrough .screens .media .status-badge i {
  display: inline;
}
.walkthrough .screens .media.logo .logo {
  margin-top: 30px;
  opacity: 0;
  transform: translateY(-60px);
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 60px;
  margin-right: 5px;
}
.walkthrough .screens .media .icon {
  position: absolute;
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 90px;
  left: 70px;
  top: 70px;
}
.walkthrough .screens .media.bars .icon {
  transform: translate(40px, 20px);
}
.walkthrough .screens .media.bars .icon:nth-of-type(2) {
  transform: scale(0.25);
  transform-origin: 30% 54%;
}
.walkthrough .screens .media.bars .icon:nth-of-type(3) {
  transform: scale(0.25);
  transform-origin: 30% 40%;
}
.walkthrough .screens .media.bars .icon:nth-of-type(4) {
  transform: scale(0.25);
  transform-origin: 30% 26%;
}
.walkthrough .screens .media.files .icon {
  transform: translate(40px, 20px);
}
.walkthrough .screens .media.comm .icon {
  transform: scale(0.25);
  transform-origin: 29% 73%;
}
.walkthrough .screens .media.comm .icon:nth-child(2) {
  transform-origin: 66% 85%;
}
.walkthrough .screens .screen {
  opacity: 0;
  position: absolute;
  transform: translateX(-72px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.walkthrough .screens .screen.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.4s;
}
.walkthrough .screens .screen.active ~ .screen {
  opacity: 0;
  transform: translateX(72px);
}
.walkthrough .screens .screen.active .media .status-badge {
  opacity: 1;
  transform: scale(1.75);
}
.walkthrough .screens .screen.active .media.logo .logo {
  opacity: 0.9;
  transform: translateY(0);
  transition-delay: 0.6s;
}
.walkthrough .screens .screen.active .media.logo .status-badge {
  transition-delay: 1s;
}
.walkthrough .screens .screen.active .media.books .icon {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}
.walkthrough .screens .screen.active .media.books .icon:nth-child(2) {
  transition-delay: 0.725s;
}
.walkthrough .screens .screen.active .media.books .icon:nth-child(3) {
  transition-delay: 0.850s;
}
.walkthrough .screens .screen.active .media.books .status-badge {
  transition-delay: 1.4s;
}
.walkthrough .screens .screen.active .media.bars .icon {
  opacity: 1;
  transform: translate(0) scale(1);
  transition-delay: 0.6s;
  width: 70px;
  left: 90px;
  top: 60px;
}
.walkthrough .screens .screen.active .media.bars .icon:nth-child(2) {
  transition-delay: 1.050s;
}
.walkthrough .screens .screen.active .media.bars .icon:nth-child(3) {
  transition-delay: 0.925s;
}
.walkthrough .screens .screen.active .media.bars .icon:nth-child(4) {
  transition-delay: 0.8s;
}
.walkthrough .screens .screen.active .media.files .icon {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
  width: 55%;
  left: 53px;
  top: 60px;
}
.walkthrough .screens .screen.active .media.files .icon:nth-child(3) {
  transition-delay: 0.8s;
}
.walkthrough .screens .screen.active .media.files .icon:nth-child(2) {
  transition-delay: 0.7s;
}
.walkthrough .screens .screen.active .media.files .icon:nth-child(1) {
  transition-delay: 0.6s;
}
.walkthrough .screens .screen.active .media.files .status-badge {
  transition-delay: 1.6s;
}
.walkthrough .screens .screen.active .media.comm .icon {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.6s;
  width: 65px;
  left: 75px;
  top: 55px;
}
.walkthrough .screens .screen.active .media.comm .icon:nth-child(2) {
  transition-delay: 0.8s;
}
.walkthrough .screens .screen.active .media.comm .status-badge {
  transition-delay: 1.6s;
}

/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input,select{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
(function() {
  $(document).ready(function() {
    var walkthrough;
    walkthrough = {
      index: 0,
      nextScreen: function() {
        if (this.index < this.indexMax()) {
          this.index++;
          return this.updateScreen();
        }
      },
      prevScreen: function() {
        if (this.index > 0) {
          this.index--;
          return this.updateScreen();
        }
      },
      updateScreen: function() {
        this.reset();
        this.goTo(this.index);
        return this.setBtns();
      },
      setBtns: function() {
        var $lastBtn, $nextBtn, $prevBtn;
        $nextBtn = $('.next-screen');
        $prevBtn = $('.prev-screen');
        $lastBtn = $('.finish');
        if (walkthrough.index === walkthrough.indexMax()) {
          $nextBtn.prop('disabled', true);
          $prevBtn.prop('disabled', false);
          return $lastBtn.addClass('active').prop('disabled', false);
        } else if (walkthrough.index === 0) {
          $nextBtn.prop('disabled', false);
          $prevBtn.prop('disabled', true);
          return $lastBtn.removeClass('active').prop('disabled', true);
        } else {
          $nextBtn.prop('disabled', false);
          $prevBtn.prop('disabled', false);
          return $lastBtn.removeClass('active').prop('disabled', true);
        }
      },
      goTo: function(index) {
        $('.screen').eq(index).addClass('active');
        return $('.dot').eq(index).addClass('active');
      },
      reset: function() {
        return $('.screen, .dot').removeClass('active');
      },
      indexMax: function() {
        return $('.screen').length - 1;
      },
      closeModal: function() {
        $('.walkthrough, .shade').removeClass('reveal');
        return setTimeout(((function(_this) {
          return function() {
            $('.walkthrough, .shade').removeClass('show');
            _this.index = 0;
            return _this.updateScreen();
          };
        })(this)), 200);
      },
      openModal: function() {
        $('.walkthrough, .shade').addClass('show');
        setTimeout(((function(_this) {
          return function() {
            return $('.walkthrough, .shade').addClass('reveal');
          };
        })(this)), 200);
        return this.updateScreen();
      }
    };
    $('.next-screen').click(function() {
      return walkthrough.nextScreen();
    });
    $('.prev-screen').click(function() {
      return walkthrough.prevScreen();
    });
    $('.close').click(function() {
      return walkthrough.closeModal();
    });
    $('.open-walkthrough').click(function() {
      return walkthrough.openModal();
    });
    walkthrough.openModal();
    return $(document).keydown(function(e) {
      switch (e.which) {
        case 37:
          walkthrough.prevScreen();
          break;
        case 38:
          walkthrough.openModal();
          break;
        case 39:
          walkthrough.nextScreen();
          break;
        case 40:
          walkthrough.closeModal();
          break;
        default:
          return;
      }
      e.preventDefault();
    });
  });

}).call(this);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.