当前位置：首页 > 网页特效 > 其他特效 >

Zensorium超炫的动画效果单页网站设计

时间：2013-04-16 13:13 来源：互联网作者：源码搜藏收藏推荐

<!doctype html>



 <html class="no-js" lang="en"> 
    <head>
      <base href="http://www.zensorium.com/tinke/"></base>
      
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>Tinké | Take The Tour</title>
      <meta name="description" content="The quick, revolutionary way to check your fitness and wellness is now at your fingertip. Zensorium's breakthrough technology reveals how fit you are at any given time and over a time span.">
      <meta name="keywords" content="Heart Rate Monitor,iPhone,iOS,Heart,Health,Fitness,Wellness,Tinke,Tinké,Zensorium" />
      <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
      <link rel="icon" type="image/png" href="img/common/favicon.png">
    
      <meta name="viewport" content="width=device-width">  
      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/960.css">
      <script src="js/mobiledetect.js"></script>
      <script>
        if(DetectTierTablet() || DetectTierIphone()){
        window.location.href='mobile/';
        }
      </script>
      <script src="js/libs/modernizr-2.5.3.min.js"></script>
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
      <script type="text/javascript" src="js/libs/jquery.easing.1.3.js"></script>
       
      <script type="text/javascript" src="http://use.typekit.com/ean7lgg.js"></script>
      <script type="text/javascript" src="js/libs/greensock/TweenMax.min.js"></script>
      <script type="text/javascript" src="js/libs/greensock/easing/EasePack.min.js"></script>
      <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    
      <script src="js/plugins.js"></script>
      <script>
        var _gaq=[ ['_setAccount','UA-32609035-1'],['_trackPageview'] ];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
      </script>

</script>

</head>

<body>

<ul id="logowrapper" class="section">
    <li><a id="logo" href="index.html"></a>
        <ul class="social">
            <a href="https://www.facebook.com/Zensorium" target="_blank"><li class="facebook"></li></a>
        </ul>
    </li>
</ul>

<div id="topnav" class="section">
    <div class="bg">
        
        <a class="zen" href="../about.html" target="_blank"></a>
        
        <div class="container_16">
            <div class="main">
                <div class="grid_7 left">
                    <ul class="row1">
                        <li class="active">Take the Tour</li>
                        <li><a href="get-started.html">Get Started</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="media.html">Media</a></li>                        
                    </ul>
                </div>
                                  
                <div class="grid_7 right">
                    <ul>
                        <li><a href="http://support.zensorium.com" target="_blank">Community</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li>
                            <ul class="support">
                                <li><div class="support_text">Support<div class="icon_nav_more"></div></div>
                                    <ul class="support_nav">
                                        <a href="specs.html"><li>Tech Specs</li></a>
                                        <a href="faq.html"><li>FAQ</li></a>
                                        <a href="downloads.html"><li>Downloads</li></a>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="https://shop.zensorium.com/index.php?route=product/product&product_id=50" target="_blank" class="shop"><div class="link"><img src="img/nav/icon_cart.png" height="13px" width="13px"/>Shop</div></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>

<ul id="sidenav" class="section">
    <li class="wrapper_sidenav"><div class="indicator"></div><div class="text">Top</div></li>
    <li class="wrapper_sidenav"><div class="indicator"></div><div class="text">Introduction</div></li>
    <li class="wrapper_sidenav"><div class="indicator"></div><div class="text">Parameters</div></li>
    <li class="wrapper_sidenav"><div class="indicator"></div><div class="text">Cardiorespiratory Monitoring</div></li>
    <li class="wrapper_sidenav"><div class="indicator"></div><div class="text">Vita Index & Zen Index</div></li>
    <li class="wrapper_sidenav"><div class="indicator"></div><div class="text">Less is More</div></li>
    <li class="wrapper_sidenav"><div class="indicator"></div><div class="text">Share Your Results</div></li>
    <li class="wrapper_sidenav"><div class="indicator"></div><div class="text">Mobile Powered</div></li>
    <li class="wrapper_sidenav"><div class="indicator"></div><div class="text">Mobility</div></li>
    <div class="clear"></div>
</ul>

<div id="splash" class="section">
    <div class="container_16">
        <div class="grid_5 pull_12">
            <div class="hand_1"></div>
        </div>
        <div class="grid_7 push_1">
            <div class="content">
                <div class="logo"></div>
                
                
                <h2>The quick, revolutionary way to check your fitness and wellness is now at your fingertip.</h2>
                Zensorium's breakthrough technology reveals how fit you are at any given time and over a time span.
                <h3>Free Shipping Worldwide</h3><a href="https://shop.zensorium.com/index.php?route=product/product&product_id=50" target="_blank"><div class="btn_buy"></div></a>
                
            
            </div>
        </div>
        <div class="btn_down"><h1>Take the tour</h1></div>
    </div>
</div>

<div id="intro" class="section">
    <div class="container_16">
        <div class="grid_8 push_6 content">
            
            
            <h1>Introducing</h1><div class="logo"></div>
            <div class="clear"></div>
            It's small. It's light. Its unique design means you can take it anywhere and monitor your fitness and wellness anytime.
            <br/><br/>
             It also brings personal wellness to a social platform. All it takes is a touch of your finger.
             
            
            <ul class="next">
                <li><a class="btn_next_section"><div class="btn_next">Next</div></a></li>
            </ul>
        </div>
        
        <div class="clear"></div>
        
    </div>
</div>

<div id="para" class="section">
        
    <div id="para_container">
        <div class="front">
            <div class="container_16">
                <div class="lines"></div>
                <div class="grid_5 push_1" style="margin-bottom:75px;">
                    <div class="icon_hr"></div>
                    <div class="clear"></div>
                    
                    
                    <a class="btn" href="#"><h1>Heart Rate</h1><div class="btn_more more_default"></div></a>
                    <div class="clear"></div>
                    Did you know the lower your resting heart rate is, the better your cardiorespiratory fitness is? Tinké lets you accurately measure your number of heart beats per <br/>minute, in seconds.
                    
                </div>
            
                <div class="grid_5 pull_1 right">
                    <div class="icon_oxy"></div>
                    <div class="clear"></div>
                    
                    
                    <a class="btn" href="#"><h1 class="right">Blood Oxygen Level</h1><div class="btn_more more_oxy"></div></a>
                    <div class="clear"></div>
                    A blood oxygen level of above 95%<br/>is generally considered normal. Tinké lets you measure the amount of oxygen carried by the red blood cells in your blood, at any given time.
                    
                </div>
                
                <div class="clear"></div>
                
                <div class="grid_5 push_1">
                    <div class="icon_res"></div>
                    <div class="clear"></div>
                    
                    
                    <a class="btn" href="#"><h1>Respiratory Rate</h1><div class="btn_more more_default"></div></a>
                    <div class="clear"></div>
                    A normal adult usually takes 10 to 20 breaths per minute. Tinké lets you measure the number of breaths you take per minute.Fitter people normally have lower respiratory rates.
                    
                    <div class="clear"></div>
                    <ul class="next">
                        <li><a class="btn_next_section"><div class="btn_next">Next</div></a></li>
                    </ul>
                </div>
                
                <div class="grid_5 pull_1 right">
                    <div class="icon_hrv"></div>
                    <div class="clear"></div>
                    
                    
                    <a class="btn" href="#"><h1 class="right">Heart Rate Variability</h1><div class="btn_more more_hrv"></div></a>
                    <div class="clear"></div>
                    Our heart does not beat at a constant rate, and the changes in the rate at which our heart beats is known as Heart Rate Variability (HRV). Tinké measures your HRV and interprets your stress levels.
                    
                </div>
                
            </div>
        </div>
    </div>
    
</div>

<div id="para_content" class="section">
    <div id="wrapper">
    
        
        <a id="arrow_next" href="#"></a>
        <a id="arrow_prev" href="#"></a>
        <a href="#"><div class="btn_close"><h4>Close</h4></div></a>
        
        
        <div class="scroll_wrapper">

<div id="hr" class="main">
                <div class="container_12">
                
                    
                    <div class="grid_7">
                        
                        <div class="icon icon_hr"></div>
                        <h1>Parameters</h1>
                        <h5>Heart Rate</h5>
                        
                    </div>
                     
                        
                    <div class="clear"></div>
                    
                    
                    <div class="grid_4">
                        
                        Your heart is probably the hardest working organ in your body. Naturally, you'd want to know if it's working at an optimal rate. <br/><br/>
                        Heart rate refers to the number of heart beats per minute. It is expressed in beats per minute (bpm). An average adult's heart rate is usually between 60bpm to 80bpm.<br/><br/>
                        Resting heart rate is defined as the heart rate taken when you are first awake or when <br/>sitting quietly.<br/><br/>
                         Monitoring your resting heart rate daily is a important indicator of your fitness. <br/><br/>
                        
                       
                        
                    </div>
                    
                    
                    <div class="grid_4">
                        
                        <div class="img_hr">
                            <div class="heart"></div>
                            <div class="line_wrapper">
                                <div class="line_wrapper2">
                                    <div class="line"></div>
                                    <div class="line_1"></div>
                                    <div class="number"></div>
                                </div>
                            </div>
                            <div class="text_1"></div>
                            <div class="text_2"></div>
                        </div>
                        
                        
                        
                       
                        <h2>A low resting heart rate often indicates good cardiovascular fitness.</h2><br/>
                        People who exercise frequently are generally fitter and exhibit lower resting heart rates.<br/><br/>
                        
                    </div>
                    
                    
                    <div class="grid_4">
                        
                      <h2>Did you know?</h2>
                        Heart rate reserve is a term used to quantify your range of potential training heart rate intensities. It is the difference between your Maximum heart rate and your resting heart rate.<br/><br/>
To obtain your maximum heart rate, you can use this formula:<br/><br/>
WOMEN: 226-your age<br/><br/> 
MEN: 220-your age<br/><br/> 
 
                        
                      
                        
                    </div>
                    
                    <div class="clear"></div>
               
                </div>
            </div>

<div id="oxy" class="main">
                <div class="container_12">
                    
                    
                    <div class="grid_7">
                        
                        <div class="icon icon_oxy"></div>
                        <h1>Parameters</h1>
                        <h5>Blood Oxygen Level</h5>
                        
                    </div>
                    
                    
                    <div class="clear"></div>
                    
                    
                    <div class="grid_4">
                        
                        Why is knowing your level of blood oxygen important?<br/><br/>
                        Put simply,our bodies need a constant level of oxygen circulating in the blood to reach cells and tissues.<br/><br/>
                        The saturation of peripheral oxygen (SpO<sub>2</sub>) is a relative measurement of the amount of oxygen carried by the red blood cells in your blood. This is measured as a percentage. <br/><br/> 
                        <h2>A blood oxygen level of 95% and above is considered normal.</h2><br/>
                        
                    </div>
                    
                    
                    <div class="grid_4">
                        
                        <h2>Implications of low blood oxygen level</h2>
                        Hypoxemia, or low blood oxygen, describes a lower than normal level of oxygen in your blood. A low level of blood oxygen saturation is dangerous. It is best to always maintain blood oxygen levels above 95%. 
                        
                        
                        
                        
                        <div class="img_oxy">
                            <div class="axis"></div>
                            <div class="chart">
                                <div class="pink"></div>
                                <div class="blue"></div>
                            </div>
                            <div class="hand"></div>
                            <div class="oxygen"></div>
                            <div class="line_1"></div>
                            <div class="text"></div>
                        </div>
                        
                    </div>
                    
                    
                    <div class="grid_4">
                        
                        <h2>Did you know?</h2>
                        <ul>
                        Hypoxemia occurs when:
                            <li>When you are at a high altitude or in any situation where the oxygen content is lower</li>
                            <li>When airways react to pollutants</li>
                            
                        </ul><br/>
                       
                        Do consult a doctor for advice if you have consistently low SpO<sub>2</sub> measurements.
                        
                        
                    </div>
                    <div class="clear"></div>
                </div>
            </div>

<div id="res" class="main">
                <div class="container_12">
                
                    
                    <div class="grid_7">
                        
                        <div class="icon icon_res"></div>
                        <h1>Parameters</h1>
                        <h5>Respiratory Rate</h5>
                        
                    </div>
                    
                    
                    <div class="clear"></div>
                    
                    
                    <div class="grid_4">
                        
                        Ever found yourself feeling short of breath? Well, our respiratory rate may change due to emotional stress such as when we're angry or sad. 
<br/><br/>
                        Normal respiratory rate is defined as the respiratory rate taken when a person is resting and at minimum stress.
<br/><br/>
                        <h2>When a person is in the above condition, a respiratory range of 10-20 breaths per minute is considered normal. </h2><br/>
                        As a general guide, fitter people often have lower normal respiratory rates.<br/>
                        
                    </div>
                    
                    
                    <div class="grid_4">
                        
                        <div class="img_res">
                            <div class="line_wrapper">
                                <div class="line_wrapper2">
                                    <div class="line"></div>
                                    <div class="line_1"></div>
                                    <div class="number"></div>
                                </div>
                            </div>
                            <div class="head"></div>
                            <div class="arrow_1"></div>
                            <div class="arrow_2"></div>
                            <div class="text_1"></div>
                            <div class="text_2"></div>
                        </div>
                        
                        
                        
                        
                     
                          <h2>Breath slowly and deeply</h2>
                        While slow breathing may pose dangers, it is generally better for the average person. Slow and deep breathing have shown to bring various benefits (refer to heart rate variability for more information). 
                        </ul><br/>
                        
                    </div>
                    
                    
                    <div class="grid_4">
                        
                        <h2>Did you know?</h2>
                         <ul>
                <li>Every minute we breathe, we take in 13 pints of air! That is we breathe about 6.15 liters of air every minute.</li><br/><br/>
                <li>We inhale and exhale air about 22,000 times per day and in the process, transport about 300 cubic feet of air (which is about 8.5 cubic meters of air)!</li><br/><br/>
                <li>Human breathing mechanism is called tidal breathing, as air comes out the same way it goes in.</li>
            </ul>
                        
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            
            
            
            
            <div id="hrv" class="main">
                <div class="container_12">
                    
                    <div class="grid_7">
                        
                        <div class="icon icon_hrv"></div>
                        <h1>Parameters</h1>
                        <h5>Heart Rate Variability</h5>
                        
                    </div>
                    
                    
                    <div class="clear"></div>
                    
                    
                    <div class="grid_4">
                        
                        Unlike a clock, our heart does not beat at a constant rate. The changes in the rate at which our heart beats at is known as Heart Rate Variability (HRV).<br/><br/>
                        Throughout the day, our body's requirements vary depending on the activity we carry out, our mood, and many other factors. <br/><br/>
                        <h2>HRV is a measure of how well our body can adapt to these changes, hence the higher our measure of HRV, the better.</h2>
<br/>
                        <h2>Heart rate variability could be used as a basis to identify stress.</h2><br/>
                        During times of mental and emotional stress, our heart rate rises, muscles tense, we
                        
                    </div>
                    
                    
                    <div class="grid_4">
                        
                        <div class="img_hrv">
                            <div class="line_wrapper">
                                <div class="line_wrapper2">
                                    <div class="line"></div>
                                    <div class="line_1"></div>
                                    <div class="text_1"></div>
                                    <div class="text_2"></div>
                                </div>
                            </div>
                            <div class="meter"></div>
                            <div class="text_3"></div>
                        </div>
                        
                        
                        
                        perspire more, and our breathing becomes more rapid and shallow.<br/><br/>
                        If we are stressed up for prolonged periods, it affects our emotional well being in the long run and our body falls into an imbalance that can affect our wellness.<br/><br/> 
                        
                    </div>
                    
                    
                    <div class="grid_4">
                        
                         <h2>Did you know?</h2>
                         Studies shows that deep, controlled breathing decreases your stress levels almost immediately. When conducting deep breathing, you will feel a decrease in heart rate.<br/><br/>
                        By practicing deep breathing on a regular basis, air is constantly being replaced in your lungs, and your heart rate is kept at a calm level. You should only practice deep breathing in a responsible manner. 
                        
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            
        
        </div>
    </div>
</div>

<div id="cardio" class="section">
    <div class="container_16">
    
         
        <div class="right"></div>
        
        <div class="left">
            <div class="top">
                <div class="heart"></div>
                <div class="circle"></div>
                <div class="content"></div>
            </div>
            
            <div class="bottom">
                <div class="graphs">
                    <div class="graph_1"></div>
                    <div class="graph_2"></div>
                    <div class="graph_3"></div>
                    <div class="graph_4"></div>
                    <div class="graph_5"></div>
                    <div class="graph_6"></div>
                    <div class="graph_7"></div>
                    <div class="graph_8"></div>
                    <div class="graph_9"></div>
                </div>
                <div class="graph_bottom"></div>
                <div class="content"></div>
            </div>
        </div>
        
        <div class="line"></div>
        
        <div class="grid_8">
            <div class="running">
                <div id="man">
                    <ul>
                        <li><img src="img/tour/cardio/running/1.png" alt="Running 1"></li>
                        <li><img src="img/tour/cardio/running/2.png" alt="Running 2"></li>
                        <li><img src="img/tour/cardio/running/3.png" alt="Running 3"></li>
                        <li><img src="img/tour/cardio/running/4.png" alt="Running 4"></li>
                        <li><img src="img/tour/cardio/running/5.png" alt="Running 5"></li>
                        <li><img src="img/tour/cardio/running/6.png" alt="Running 6"></li>
                        <li><img src="img/tour/cardio/running/7.png" alt="Running 7"></li>
                        <li><img src="img/tour/cardio/running/8.png" alt="Running 8"></li>
                        <li><img src="img/tour/cardio/running/9.png" alt="Running 9"></li>
                        <li><img src="img/tour/cardio/running/10.png" alt="Running 10"></li>
                        <li><img src="img/tour/cardio/running/11.png" alt="Running 11"></li>
                        <li><img src="img/tour/cardio/running/12.png" alt="Running 12"></li>
                        <li><img src="img/tour/cardio/running/13.png" alt="Running 13"></li>
                        <li><img src="img/tour/cardio/running/14.png" alt="Running 14"></li>
                        <li><img src="img/tour/cardio/running/15.png" alt="Running 15"></li>
                    </ul>
                </div>
            </div>
        </div>
         
        
        <div class="grid_6 push_1">
            <div class="content">
                
                
                <h1>Cardiorespiratory Monitoring</h1>
                Monitoring your cardiorespiratory wellness is one of the most important yet neglected aspects of fitness and wellness. Defined as the ability of your heart, lungs and organs to consume,  transport and utilize oxygen, your cardiorespiratory wellness has an impact on your daily life.<br/><br/>
               
                Tinké's measurements of heart rate, respiratory rate and blood oxygen saturation give you an  indication of your cardiorespiratory wellness. Tinké compiles this information into a score known as the <br/><a href="javascript:console.log(app); app.scrollToSection(4);">Vita Index</a>.<br/><br/>
                <h2>Did you know?</h2>
                When you have poor cardiorespiratory wellness, you will feel lethargic all the time and find it difficult to complete daily activities.
                
                
                <ul class="next">
                    <li><a class="btn_next_section"><div class="btn_next">Next</div></a></li>
                </ul>

</div>
        </div>
        
    </div>
</div>

<div id="indexes" class="section">
    
    <div class="indexes_bg">
        <div class="container_16">
            <div class="glow_1"></div>
            <div class="glow_2"></div>
            <div class="dial">
                <div class="bg"></div>
                <div id="polar"></div>
                <div class="top"></div>
                <div class="number"><h4>75</h4></div>
            </div>
    
    
    
            <div class="grid_6 push_1">
                <div id="vita">
                    
                    <div class="content">
                        <div class="btn_more white"><h1>Vita Index</h1></div>
                        <div class="clear"></div>
                        <div id="vita_content">
                        
                        
                        <p>Find out what your fitness score is every time<br/>you use Tinké.</p><br/>
                        
                        <p>Your Vita Index is your personalised cardiorespiratory score. It is created by piecing data collected from your heart rate, blood oxygen level and respiratory rate. Your Vita Index can be trended in a graph for easy monitoring and even shared on social media platforms!</p>
                        
                        
                        
                        </div>
                    </div>
                    
                </div>
            </div>
            
            
            <div class="grid_6 push_3">
                <div id="zen">
                    
                    <div class="content">
                        <div class="btn_more white"><h1>Zen Index</h1></div>
                        <div class="clear"></div>
                        <div id="zen_content">
                        
                            
                            <p>Using heart rate variability as a basis, we created the Zen Index, a number which aims to quantify your stress levels in a simplified manner.</p><br/>
                            
                            <p>A Zen Index measurement takes you through a 60second controlled breathing exercise, where it attempts to alleviate stress in the short run and ultimately improve your emotional well-bring.<br/>
                            Your Zen Index can be trended in a graph for easy monitoring and even shared on social media platforms!</p>
                            
                            
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <div class="clear"></div>
            <ul class="next">
                <li><a class="btn_next_section"><div class="btn_next_white">Next</div></a></li>
            </ul>
            
        </div>
    </div>
</div>

<div id="design" class="section">
    <div class="container_16">
        <div class="grid_4 push_6">
            <h1>Less is more</h1>
        </div>
        <div class="clear"></div>
        <div class="grid_10 push_3 content">
            
            
            Tinké is all about simplicity. With a touch of your finger, you can obtain the measurements of the 4 parameters, and 2 indexes within seconds. No other device can do this. 
            
            
            <ul class="next">
                <li><a class="btn_next_section"><div class="btn_next">Next</div></a></li>
            </ul>
        </div>
        <div class="clear"></div>
        
        <div class="grid_4 push_2 less_rollover">
            
            <div class="icon batt"></div>
            <h4>No battery required</h4>
            <div class="btn_more blue"></div>
            <div class="less_text">
            
            
            All you need is your iOS device for Tinké to work. No need to charge it separately or fiddle with cables.
            
            
            </div>
            
        </div>
        
        <div class="grid_4 push_2 less_rollover">
            
            <div class="icon scn"></div>
            <h4>No extra screen</h4>
            <div class="btn_more blue"></div>
            <div class="less_text">
            
            
            All information will appear on the screen itself so you simply plug Tinké into your iOS device to check your <br/>wellness score.
            
            
            </div>
            
        </div>
        
        <div class="grid_4 push_2 less_rollover">
            
            <div class="icon clip"></div>
            <h4>Non-bulky</h4>
            <div class="btn_more blue"></div>
            <div class="less_text">
            
            
            Its slim, compact size makes Tinké easy to take along anywhere. From home to work to your favourite activity.
            
            
            </div>
            
        </div>
    </div>
</div>

<div id="share" class="section">
    <div class="container_16">
        <div class="grid_7 push_1">
        
            
            <h1>Share Your Results</h1>
            Tinké brings fitness and wellness monitoring to a social platform. Share your data through the tinké network or other social media. Now, you can keep your family in the know or compare measurements with your friends.<br/><br/>
            With the Tinké network, you can add friends and post comments on their scores. There is even a global comparisons feature, where you can see how you fare amongst the best and the fittest in the world. Prefer to keep your data private? Use Tinké privacy settings to keep everything private and confidential.
            
            
            <ul class="next">
                <li><a class="btn_next_section"><div class="btn_next">Next</div></a></li>
            </ul>
        </div>
        <div class="nodes"></div>
        <div class="clear"></div>
    </div>
    <div class="badges"></div>
</div>

<div id="mobile" class="section">
    <div class="container_16">
        <div class="grid_7 push_8">
            
            
            <h1>Mobile Powered</h1>
            Tinké is directly powered by your iOS device. Switch on your iOS device, plug in Tinké via the dock connector, and it instantly springs to life. Now you can easily and quickly monitor your fitness and wellness as frequently as you wish, for as long as your iOS device is powered.<br/><br/>
            <h3>App is now available on the iTunes App Store.</h3>
            
            
            
            <ul class="next">
                <li><a class="btn_next_section"><div class="btn_next">Next</div></a></li>
            </ul>
        </div>
    </div>
</div>

<div id="mobility" class="section">
    <div class="container_16">
        <div class="grid_6 push_1">
            <div class="pocket"></div>
        </div>
    </div>
    <div class="container_16 align">
        <div class="grid_7 push_7">
            
            
            <h1>Mobility</h1>
            So compact, you can take it anywhere! Tuck it into your pocket, your wallet, your phone pouch, or even your handbag.<br/><br/>
            Tinké fits into your lifestyle in a non‐obtrusive way. Its no‐fuss portability means you can assess your fitness and wellness on your iOS device just about anywhere.
            <h3>Free Shipping Worldwide</h3><a href="https://shop.zensorium.com/index.php?route=product/product&product_id=50" target="_blank"><div class="btn_buy"></div></a>
            
        
        </div>
    </div>
</div>

<div id="bottomnav" class="section">
    <div id="bottomnavwrapper">
        <ul>
            <li class="active">Take The Tour<div class="indicator default active"></div></li>
            <li><a href="get-started.html">Get Started<div class="indicator default"></div></a></li>
            <li><a href="gallery.html">Gallery<div class="indicator default"></div></a></li>
            <li><a href="specs.html">Tech Specs<div class="indicator default"></div></a></li>        
            <li><a href="faq.html">FAQ<div class="indicator default"></div></a></li>
            <li><a href="downloads.html">Downloads<div class="indicator default"></div></a></li>
            <li style=" border-right:solid 1px #313131;"><a href="http://shop.zensorium.com/index.php?route=product/product&product_id=50" target="_blank" class="highlight shop"><div class="icon"></div>Shop<div class="indicator blue_ind"></div></a></li>
        </ul>
    </div>
</div>

<div id="footer" class="section">
    <div class="container_16">
        <div class="grid_4">
            <ul class="content">
            <li><a href="../about.html">Zensorium</a></li>
            <li><a href="http://support.zensorium.com" target="_blank">Community</a>
            <li><a href="media.html">Media</a></li>
            <li><a href="http://shop.zensorium.com/index.php?route=information/information&information_id=8" target="_blank">Affiliate Program</a>
            </ul>
        </div>

<div class="grid_4">
            <ul class="content">
                <li><a href="https://shop.zensorium.com/index.php?route=product/product&product_id=50" target="_blank" class="highlight"><div class="icon"></div>Shop</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="privacy-site.html">Privacy Policy</a></li>
            </ul>
        </div>

<div class="grid_4">
            <div class="content">
            As featured in:
            <a class="cnn" href="media.html"></a>
            <a class="forbes" href="media.html"></a>
            <a class="wired" href="media.html"></a>
            <a class="gizmodo" href="media.html"></a>    
            </div>
        </div>
        
        <div class="grid_4">
            <div class="content">
                Find us on:
                <ul>
                    <li>
                        
                        
                        <div class="fb-like" data-href="http://www.facebook.com/Zensorium" data-send="false" data-layout="button_count" data-width="300" data-show-faces="false" data-colorscheme="dark"></div>
                        
                        <div class="addthis_toolbox addthis_default_style fb_plugin">
                        <a class="addthis_button_facebook_like" addthis:url="http://www.facebook.com/zensorium" addthis:title="Zensorium" fb:like:layout="button_count" ></a>
                        </div>
    
                        <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0e561c1e3d4cac"></script>
    
                        
                    </li>
                    
                    <div class="clear"></div>
                    
                    <a href="https://www.facebook.com/Zensorium" target="_blank"><li class="social facebook"></li></a>
                    <a href="http://www.youtube.com/user/Zensorium2012" target="_blank"><li class="social youtube"></li></a>
                    
                </ul>
            </div>
        </div>
        
    </div>
</div> 
   
    <script type="text/javascript">
var clicky_site_ids = clicky_site_ids || [];
clicky_site_ids.push(66604956);
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//static.getclicky.com/js';
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66604956ns.gif" /></p></noscript>
	
    </div>
    </body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。