Helgen-Website/html/intro-product.html
2024-11-04 11:54:48 -06:00

1216 lines
71 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>H-Code | Responsive & Multi-Purpose One/Multi Page Template</title>
<meta name="description" content="H-Code - A premium portfolio template from ThemeZaa">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!-- animation -->
<link rel="stylesheet" href="css/animate.css" />
<!-- bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css" />
<!-- et line icon -->
<link rel="stylesheet" href="css/et-line-icons.css" />
<!-- font-awesome icon -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- revolution slider -->
<link rel="stylesheet" href="css/extralayers.css" />
<link rel="stylesheet" href="css/settings.css" />
<!-- magnific popup -->
<link rel="stylesheet" href="css/magnific-popup.css" />
<!-- owl carousel -->
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/owl.transitions.css" />
<link rel="stylesheet" href="css/full-slider.css" />
<!-- text animation -->
<link rel="stylesheet" href="css/text-effect.css" />
<!-- hamburger menu -->
<link rel="stylesheet" href="css/menu-hamburger.css" />
<!-- common -->
<link rel="stylesheet" href="css/style.css" />
<!-- responsive -->
<link rel="stylesheet" href="css/responsive.css" />
<!--[if IE]>
<link rel="stylesheet" href="css/style-ie.css" />
<![endif]-->
<!--[if IE]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- google font -->
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400%7CRoboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<audio loop="loop" autoplay="autoplay" >
<source src="sound/intro06.mp3" />
</audio>
<div class="tp-banner-container overflow-hidden position-relative">
<div class="logo-product" style="position: absolute; bottom: 0; padding: 0 0 2.9% 8.8%; z-index: 20">
<img class="" src="http://themezaa.com/html/h-code/images/intro-product-logo.png" alt="">
<a href="http://www.themezaa.com/" target="blank" style="color: #000000; padding-left: 20px; display: inline-block;">www.themezaa.com</a>
</div>
<div class="revolution-product-intro" >
<ul> <!-- slide 1 -->
<li data-transition="cube" data-slotamount="1" data-masterspeed="100" data-delay="6500" data-saveperformance="on" >
<!-- main image-->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption lfl ltl"
data-x="center" data-hoffset="-270"
data-y="center" data-voffset="0"
data-speed="1000"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; "><img src="http://themezaa.com/html/h-code/images/intro-product-01-01.jpg" alt="">
</div>
<!-- layer 2 -->
<div class="tp-caption lfr ltr"
data-x="center" data-hoffset="530"
data-y="center" data-voffset="0"
data-speed="1000"
data-start="2000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 8;"><img src="http://themezaa.com/html/h-code/images/intro-product-01-03.jpg" alt="">
</div>
<!-- layer 3 -->
<div class="tp-caption fade ltr"
data-x="center" data-hoffset="530"
data-y="center" data-voffset="0"
data-speed="1000"
data-start="2500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 8;"><img src="http://themezaa.com/html/h-code/images/intro-product-01-02.png" alt="">
</div>
<!-- layer 4 -->
<div class="tp-caption roboto_condensed_regular_20 fade ltr"
data-x="center" data-hoffset="530"
data-y="center" data-voffset="280"
data-speed="1000"
data-start="3000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; line-height: 26px; text-align: center;">EXPLORE THE<br>POWER OF H-CODE
</div>
</li>
<!-- slide 2 -->
<li data-transition="cube" data-slotamount="2" data-masterspeed="100" data-delay="8500" data-saveperformance="on" >
<!-- main image-->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption lfl ltl"
data-x="center" data-hoffset="-270"
data-y="center" data-voffset="0"
data-speed="600"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; "><img src="http://themezaa.com/html/h-code/images/intro-product-02-01.jpg" alt="">
</div>
<!-- layer 2 -->
<div class="tp-caption lfr ltr"
data-x="center" data-hoffset="530"
data-y="center" data-voffset="-196"
data-speed="600"
data-start="2000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 8;"><img src="http://themezaa.com/html/h-code/images/intro-product-02-06.jpg" alt="">
</div>
<!-- layer 3 -->
<div class="tp-caption roboto_condensed_blod_40 fade ltr"
data-x="center" data-hoffset="410"
data-y="center" data-voffset="-196"
data-speed="600"
data-start="2500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase;">lightweight<br>flexibility,<br>fit to move
</div>
<!-- layer 4 -->
<div class="tp-caption roboto_condensed_regular_16 fade ltr"
data-x="center" data-hoffset="670"
data-y="center" data-voffset="-196"
data-speed="600"
data-start="3000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase; color: #ffffff;">The H-code Free TR 5<br>Flyknit’s lightweight,<br>flexible design allows<br>you to move the way<br>you want.
</div>
<!-- layer 5 -->
<div class="tp-caption lfr ltr"
data-x="center" data-hoffset="530"
data-y="center" data-voffset="154"
data-speed="600"
data-start="3500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 8;"><img src="http://themezaa.com/html/h-code/images/intro-product-02-02.jpg" alt="">
</div>
<!-- layer 6 -->
<div class="tp-caption sfl ltr"
data-x="center" data-hoffset="354"
data-y="center" data-voffset="154"
data-speed="600"
data-start="4000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="600"
data-endeasing="Power4.easeIn"
style="z-index: 14;"><img src="http://themezaa.com/html/h-code/images/intro-product-02-03.jpg" alt="">
</div>
<!-- layer 7 -->
<div class="tp-caption sfl ltr"
data-x="center" data-hoffset="528"
data-y="center" data-voffset="154"
data-speed="600"
data-start="4500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="600"
data-endeasing="Power4.easeIn"
style="z-index: 15;"><img src="http://themezaa.com/html/h-code/images/intro-product-02-04.png" alt="">
</div>
<!-- layer 8 -->
<div class="tp-caption sfl ltr"
data-x="center" data-hoffset="715"
data-y="center" data-voffset="154"
data-speed="600"
data-start="5000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="600"
data-endeasing="Power4.easeIn"
style="z-index: 11;"><img src="http://themezaa.com/html/h-code/images/intro-product-02-05.jpg" alt="">
</div>
</li>
<!-- slide 3 -->
<li data-transition="cube" data-slotamount="3" data-masterspeed="500" data-delay="8500" data-saveperformance="on" >
<!-- main image-->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption lfl ltl"
data-x="center" data-hoffset="-535"
data-y="center" data-voffset="0"
data-speed="600"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; "><img src="http://themezaa.com/html/h-code/images/intro-product-03-01.jpg" alt="">
</div>
<!-- layer 2 -->
<div class="tp-caption lfr ltr"
data-x="center" data-hoffset="546"
data-y="center" data-voffset="0"
data-speed="600"
data-start="2000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 8;"><img src="http://themezaa.com/html/h-code/images/intro-product-03-03.jpg" alt="">
</div>
<!-- layer 3 -->
<div class="tp-caption sft stt"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="154"
data-speed="600"
data-start="3000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 8;"><img src="http://themezaa.com/html/h-code/images/intro-product-03-02.jpg" alt="">
</div>
<!-- layer 4 -->
<div class="tp-caption sfb stb"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="-200"
data-speed="600"
data-start="3000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 8;"><img src="http://themezaa.com/html/h-code/images/intro-product-03-04.jpg" alt="">
</div>
<!-- layer 5 -->
<div class="tp-caption fade stb "
data-x="center" data-hoffset="6"
data-y="center" data-voffset="-200"
data-speed="600"
data-start="4000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 8;"><img src="http://themezaa.com/html/h-code/images/intro-product-03-05.jpg" alt="">
</div>
</li>
<!-- slide 4 -->
<li data-transition="cube" data-slotamount="4" data-masterspeed="500" data-delay="14000" data-saveperformance="on" >
<!-- main image -->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption lfl ltl"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="0"
data-speed="600"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-04-01.jpg" alt="">
</div>
<!-- layer 2 -->
<div class="tp-caption lfr ltr"
data-x="center" data-hoffset="552"
data-y="center" data-voffset="0"
data-speed="600"
data-start="2000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 2;"><img src="http://themezaa.com/html/h-code/images/intro-product-04-02.png" alt="">
</div>
<!-- layer 3 -->
<div class="tp-caption roboto_condensed_blod_60 fade ltr"
data-x="center" data-hoffset="480"
data-y="center" data-voffset="-220"
data-speed="600"
data-start="2500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase;">force of<br>nature
</div>
<!-- layer 4 -->
<div class="tp-caption roboto_condensed_Light_22 sfb stb"
data-x="center" data-hoffset="555"
data-y="center" data-voffset="-125"
data-speed="600"
data-start="3000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto;">H-code Free. Run the way you were meant to.
</div>
<!-- layer 5 -->
<div class="tp-caption sfb stb"
data-x="center" data-hoffset="547"
data-y="center" data-voffset="0"
data-speed="600"
data-start="3500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-end="6500"
style="z-index: 2;"><img src="http://themezaa.com/html/h-code/images/intro-product-04-03.jpg" alt="">
</div>
<!-- layer 6 -->
<div class="tp-caption roboto_regular_15 sfb stb"
data-x="center" data-hoffset="540"
data-y="center" data-voffset="130"
data-speed="600"
data-start="4000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-end="6500"
style="z-index: 10; max-width: auto; max-height: auto;"><strong>NATURAL MOVEMENT</strong><br>Hexagonal flex grooves let your foot move naturally.
</div>
<!-- layer 7 -->
<div class="tp-caption sfb stb"
data-x="center" data-hoffset="547"
data-y="center" data-voffset="0"
data-speed="600"
data-start="7000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
data-end="10000"
style="z-index: 2;"><img src="http://themezaa.com/html/h-code/images/intro-product-04-04.jpg" alt="">
</div>
<!-- layer 8 -->
<div class="tp-caption roboto_regular_15 sfb stb"
data-x="center" data-hoffset="548"
data-y="center" data-voffset="140"
data-speed="600"
data-start="7500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
data-end="10000"
style="z-index: 10; max-width: auto; max-height: auto;"><strong>CLOSER TO THE GROUND</strong><br>Low-profile cushioning and a rounded heel encourage<br>natural footstrike.
</div>
<!-- layer 9 -->
<div class="tp-caption sfb stb"
data-x="center" data-hoffset="547"
data-y="center" data-voffset="0"
data-speed="600"
data-start="11000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 2;"><img src="http://themezaa.com/html/h-code/images/intro-product-04-05.jpg" alt="">
</div>
<!-- layer 10 -->
<div class="tp-caption roboto_regular_15 sfb stb"
data-x="center" data-hoffset="532"
data-y="center" data-voffset="140"
data-speed="600"
data-start="11500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto;"><strong>LIGHTWEIGHT SUPPORT</strong><br>Strong, lightweight Flyknit upper provides a snug,<br>supportive fit.
</div>
<!-- layer 11 -->
<div class="tp-caption roboto_regular_15 sfb stb"
data-x="center" data-hoffset="540"
data-y="center" data-voffset="235"
data-speed="600"
data-start="4500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto;">More cushioned than the 3.0 and closer to the round<br>than the 5.0,this shoe is best for runners with some<br>natural-running experience.
</div>
</li>
<!-- slide 5 -->
<li data-transition="cube" data-slotamount="5" data-masterspeed="500" data-delay="5000" data-saveperformance="on" >
<!-- main image -->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="0"
data-speed="600"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-05-02.jpg" alt="">
</div>
<!-- layer 2 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="230"
data-y="center" data-voffset="70"
data-speed="1000"
data-start="2000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 2;"><img src="http://themezaa.com/html/h-code/images/intro-product-05-01.png" alt="">
</div>
<!-- layer 3 -->
<div class="tp-caption roboto_condensed_blod_60 sfr str"
data-x="center" data-hoffset="-500"
data-y="center" data-voffset="-220"
data-speed="600"
data-start="2500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase;">unstoppable
</div>
<!-- layer 4 -->
<div class="tp-caption roboto_condensed_blod_60 orange_bold_bg_20 sfr str"
data-x="center" data-hoffset="-140"
data-y="center" data-voffset="-220"
data-speed="600"
data-start="3000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase;font-weight: 300;">playmaking
</div>
<!-- layer 5 -->
<div class="tp-caption roboto_condensed_regular_16 sfr str"
data-x="center" data-hoffset="-328"
data-y="center" data-voffset="-170"
data-speed="600"
data-start="3500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; letter-spacing: 9px; color: #ffffff; text-transform: uppercase;">Redefine the game with relentless creativity
</div>
</li>
<!-- slide 6 -->
<li data-transition="cube" data-slotamount="6" data-masterspeed="500" data-delay="7000" data-saveperformance="on" >
<!-- main image -->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="0"
data-speed="600"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-06-01.jpg" alt="">
</div>
<!-- layer 2 -->
<div class="tp-caption roboto_condensed_blod_60 sfr str"
data-x="center" data-hoffset="-545"
data-y="center" data-voffset="-130"
data-speed="600"
data-start="2500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase;">SEAMLESS FIT
</div>
<!-- layer 3 -->
<div class="tp-caption roboto_condensed_regular_16 sfr str"
data-x="center" data-hoffset="-560"
data-y="center" data-voffset="-70"
data-speed="1000"
data-start="3500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; color: #ffffff;">One-piece Flyknit upper with integrated <br>Flywire for a locked-down fit and adaptive support
</div>
<!-- layer 4 -->
<div class="tp-caption roboto_regular_12 sfr str"
data-x="center" data-hoffset="-615"
data-y="center" data-voffset="5"
data-speed="1000"
data-start="4500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; color: #ffffff;">Dynamic Fit collar fits over the ankle<br>for a seamless, sock-like feel.
</div>
</li>
<!-- slide 7 -->
<li data-transition="cube" data-slotamount="7" data-masterspeed="500" data-delay="7000" data-saveperformance="on" >
<!-- main image -->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="0"
data-speed="600"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-07-01.jpg" alt="">
</div>
<!-- layer 02 -->
<div class="tp-caption roboto_condensed_blod_60 sfr str"
data-x="center" data-hoffset="545"
data-y="center" data-voffset="0"
data-speed="600"
data-start="2500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase;">ROTATIONAL<br>TRACTION
</div>
<!-- layer 3 -->
<div class="tp-caption roboto_condensed_regular_16 sfr str"
data-x="center" data-hoffset="500"
data-y="center" data-voffset="90"
data-speed="1000"
data-start="3500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; color: #ffffff;">Conical stud pattern delivers 360<br>degrees of rotational traction.
</div>
<!-- layer 4 -->
<div class="tp-caption roboto_regular_12 sfr str"
data-x="center" data-hoffset="510"
data-y="center" data-voffset="160"
data-speed="1000"
data-start="4500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; color: #ffffff;">Responsive PEBAX nylon plate supports<br>while letting you move naturally.
</div>
</li>
<!-- slide 8 -->
<li data-transition="cube" data-slotamount="8" data-masterspeed="500" data-delay="7000" data-saveperformance="on" >
<!-- main image -->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="0"
data-speed="600"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-08-01.jpg" alt="">
</div>
<!-- layer 2 -->
<div class="tp-caption roboto_condensed_blod_60 sfr str"
data-x="center" data-hoffset="-596"
data-y="center" data-voffset="-40"
data-speed="600"
data-start="2500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase;">CONSISTENT<br>TOUCH
</div>
<!-- layer 3 -->
<div class="tp-caption roboto_condensed_regular_16 sfr str"
data-x="center" data-hoffset="-635"
data-y="center" data-voffset="55"
data-speed="1000"
data-start="3500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; color: #ffffff;">Flyknit upper brings your foot closer<br>to the ball for a barefoot-like touch.
</div>
<!-- layer 4 -->
<div class="tp-caption roboto_regular_12 sfr str"
data-x="center" data-hoffset="-640"
data-y="center" data-voffset="130"
data-speed="1000"
data-start="4500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; color: #ffffff;">Allover 3-D texture for enhanced touch<br>and added friction on the ball.
</div>
</li>
<!-- slide 9 -->
<li data-transition="cube" data-slotamount="9" data-masterspeed="500" data-delay="10000" data-saveperformance="on" >
<!-- main image -->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="0"
data-speed="600"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-09-01.jpg" alt="">
</div>
<!-- layer 2 -->
<div class="tp-caption roboto_condensed_blod_26 sfb stb"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="-280"
data-speed="600"
data-start="2500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase;">CHOOSE YOUR MAGISTA
</div>
<!-- layer 3 -->
<div class="tp-caption sfb stb"
data-x="center" data-hoffset="-350"
data-y="center" data-voffset="0"
data-speed="600"
data-start="3500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><div class=" rs-slideloop"
data-easing="Linear.easeNone"
data-speed="2"
data-xs="0"
data-xe="0"
data-ys="-10"
data-ye="10">
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="" data-lazyload="http://themezaa.com/html/h-code/images/intro-product-09-02.png">
</div>
</div>
<!-- layer 4 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="-350"
data-y="center" data-voffset="230"
data-speed="1000"
data-start="3500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-09-05.png" alt="">
</div>
<!-- layer 5 -->
<div class="tp-caption sfb stb"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="0"
data-speed="600"
data-start="4500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><div class=" rs-slideloop"
data-easing="Linear.easeNone"
data-speed="2"
data-xs="0"
data-xe="0"
data-ys="-10"
data-ye="10">
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="" data-lazyload="http://themezaa.com/html/h-code/images/intro-product-09-03.png">
</div>
</div>
<!-- layer 6 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="230"
data-speed="1000"
data-start="4500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-09-05.png" alt="">
</div>
<!-- layer 7 -->
<div class="tp-caption sfb stb"
data-x="center" data-hoffset="356"
data-y="center" data-voffset="0"
data-speed="600"
data-start="5500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; ">
<div class=" rs-slideloop"
data-easing="Linear.easeNone"
data-speed="2"
data-xs="0"
data-xe="0"
data-ys="-10"
data-ye="10">
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="" data-lazyload="http://themezaa.com/html/h-code/images/intro-product-09-04.png">
</div>
</div>
<!-- layer 8 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="356"
data-y="center" data-voffset="230"
data-speed="1000"
data-start="5500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-09-05.png" alt="">
</div>
<!-- layer 9 -->
<div class="tp-caption roboto_condensed_regular_16 sfb stb"
data-x="center" data-hoffset="356"
data-y="center" data-voffset="270"
data-speed="600"
data-start="6000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase; color: #000000;">MAGISTAX PROXIMO
</div>
<!-- layer 10 -->
<div class="tp-caption roboto_condensed_regular_16 sfb stb"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="270"
data-speed="600"
data-start="6500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase; color: #000000;">MAGISTA OPUS
</div>
<!-- layer 11 -->
<div class="tp-caption roboto_condensed_regular_16 sfb stb"
data-x="center" data-hoffset="-350"
data-y="center" data-voffset="270"
data-speed="600"
data-start="7000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase; color: #000000;">MAGISTA OBRA
</div>
</li>
<!-- slide 10 -->
<li data-transition="cube" data-slotamount="10" data-masterspeed="500" data-delay="5000" data-saveperformance="on" >
<!-- main image -->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="0"
data-speed="600"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-10-01.jpg" alt="">
</div>
<!-- layer 2 -->
<div class="tp-caption roboto_condensed_blod_60 sfb stb"
data-x="center" data-hoffset="110"
data-y="center" data-voffset="263"
data-speed="600"
data-start="2500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; font-size: 228px; font-weight: 400;">h-code sportswear
</div>
</li>
<!-- slide 11 -->
<li data-transition="cube" data-slotamount="11" data-masterspeed="500" data-delay="13000" data-saveperformance="on" >
<!-- main image -->
<img src="http://themezaa.com/html/h-code/images/intro-product-bg.jpg" alt="slidebg2" data-bgposition="center bottom" >
<!-- layer 1 -->
<div class="tp-caption sfl str"
data-x="center" data-hoffset="-564"
data-y="center" data-voffset="0"
data-speed="600"
data-start="1500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-11-01.png" alt="">
</div>
<!-- layer 2 -->
<div class="tp-caption sfl str"
data-x="center" data-hoffset="-219"
data-y="center" data-voffset="0"
data-speed="600"
data-start="2000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-11-02.png" alt="">
</div>
<!-- layer 3 -->
<div class="tp-caption sfl str"
data-x="center" data-hoffset="254"
data-y="center" data-voffset="0"
data-speed="600"
data-start="2500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-11-03.png" alt="">
</div>
<!-- layer 4 -->
<div class="tp-caption sfl str"
data-x="center" data-hoffset="584"
data-y="center" data-voffset="0"
data-speed="600"
data-start="3000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-11-04.png" alt="">
</div>
<!-- layer 5 -->
<div class="tp-caption fade fadeout"
data-x="center" data-hoffset="6"
data-y="center" data-voffset="0"
data-speed="600"
data-start="3500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 1; "><img src="http://themezaa.com/html/h-code/images/intro-product-11-05.png" alt="">
</div>
<!-- layer 6 -->
<div class="tp-caption roboto_condensed_regular_16 sfb stb"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="160"
data-speed="600"
data-start="4000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
data-end="8000"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase; color: #ffffff;">our mission
</div>
<!-- layer 7 -->
<div class="tp-caption roboto_condensed_blod_26 sfb stb"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="230"
data-speed="600"
data-start="4500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
data-end="8000"
style="z-index: 11; max-width: auto; max-height: auto; text-transform: uppercase; font-weight: 400; color: #ffffff; line-height: 30px; text-align:center;">bring inspiration and innovation<br>to every athlete* in the world
</div>
<!-- layer 8 -->
<div class="tp-caption roboto_condensed_regular_16 sfb stb"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="280"
data-speed="600"
data-start="5000"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
data-end="8000"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase; color: #ffffff;">*if you have a body, you are an athlete.
</div>
<!-- layer 9 -->
<div class="tp-caption roboto_condensed_blod_60 sfb stb"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="250"
data-speed="600"
data-start="8500"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn"
style="z-index: 10; max-width: auto; max-height: auto; text-transform: uppercase; color: #ffffff; text-align: center;">Thank you for<br>spend your time
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- javascript libraries / javascript files set #1 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-hover-dropdown.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<!-- jquery appear -->
<script type="text/javascript" src="js/jquery.appear.js"></script>
<!-- animation -->
<script type="text/javascript" src="js/wow.min.js"></script>
<!-- page scroll -->
<script type="text/javascript" src="js/page-scroll.js"></script>
<!-- easy piechart-->
<script type="text/javascript" src="js/jquery.easypiechart.js"></script>
<!-- parallax -->
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<!--portfolio with shorting tab -->
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<!-- owl slider -->
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<!-- magnific popup -->
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/popup-gallery.js"></script>
<!-- text effect -->
<script type="text/javascript" src="js/text-effect.js"></script>
<!-- revolution slider -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.revolution.js"></script>
<!-- counter -->
<script type="text/javascript" src="js/counter.js"></script>
<!-- countTo -->
<script type="text/javascript" src="js/jquery.countTo.js"></script>
<!-- fit videos -->
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<!-- imagesloaded -->
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<!-- hamburger menu-->
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/hamburger-menu.js"></script>
<!-- setting -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>