Hi, what are you looking for ?

Brand (0)

Products (0)

View all
Sorry, no Result found

Your might be interested in

<!-- BEGIN CommonJSToInclude.jspf --> <script type="text/javascript" src="/wcsstore/SGH/experiences/ISG/js/utag.js"></script> <!-- Upgrading jQuery --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <!-- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> --> <script> <!-- BEGIN CommonJSToInclude.jspf --> <script type="text/javascript" src="/wcsstore/SGH/experiences/ISG/js/utag.js"></script> <!-- Upgrading jQuery --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <!-- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> --> <script> </script> <!-- END CommonJSToInclude.jspf --> <!-- BEGIN ExperienceMetadata.jsp --> <!--Begin Jeffs code--> <!-- END DELIVERY --> <!-- START DELIVERY AREA --> <!-- DELIVERY: Page Specific CSS --> <!-- TODO: update/verify path to experience css --> <link rel="stylesheet" type="text/css" href="/wcsstore/SGH/experiences/ISG/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="/wcsstore/SGH/experiences/ISG/css/isg.css" /> <!-- END DELIVERY --> <!-- START DELIVERY AREA --> <!--[if IE 7 ]> <div id="content" class=" ie7 ie"> <![endif]--> <!--[if IE 8 ]> <div id="content" class="ie8 ie"> <![endif]--> <!--[if IE 9 ]> <div id="content" class="ie9 ie"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <div id="content" class="isg-page"> <!--<![endif]--> <div class="isg-wrap"> <div class="world-view"> <!-- Controlled by breadcrumbview.js --> <ul class="isg-breadcrumb breadlinks"> <li class="isg-active"><a href="#js" >step.01</a></li> <li class="isg-disabled"><a href="#js" >step.02</a></li> <li class="isg-disabled"><a href="#js" >step.03</a></li> <li class="isg-disabled"><a href="#js" >step.04</a></li> <li class="isg-disabled"><a href="#js" >step.05</a></li> <li class="isg-disabled"><a href="#js" >step.06</a></li> </ul> <!-- End NavView --> <div class="isg-nav"> <a href="#" class="isg-prev isg-black">Prev Step</a> </div> <div class="isg-stage"> <!----------------------------------------------------------> <!-- 1. GENDER --> <div class="isg-page isg-gender isg-landing isg-active"> <!--EDIT: This used to say 'seven quick steps', change it to what you see below--> <h1>Six Quick Steps to Find your Perfect Style</h1> <!--End edit--> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 01</span> <h2>Frame</h2> <h3>Your Style</h3> </div> <div class="isg-beta"> <p>Tell us if you are a guy or girl</p> </div> </div> <ul class="isg-choices" data-choice-key="gender"> <li class=""> <a href="#JS" data-choice-value="male" class="isg-circle-arrow"> <span>Guy</span> </a> </li> <li class=""> <a href="#JS" data-choice-value="female" class="isg-circle-arrow"> <span>Girl</span> </a> </li> </ul> </div><!--.isg-gender--> <!-- END GENDER --> <!----------------------------------------------------------> <!-- 2. LOCATION --> <div class="isg-page isg-location"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 02</span> <h2>Set Your</h2> <h3>Scene</h3> </div> <div class="isg-beta"> <p>Where do you want to be?</p> </div> </div> </li> <li class="isg-urban"> <div class="isg-aside"> <h2>urban</h2> <h3>landscape</h3> <p>The city's energy with its hip, new finds fires up your urban edge.</p> </div> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_urban.jpg" /> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_urban.jpg" /> --> <a href="#js" class="isg-next">Select this scene</a> </li> <li class="isg-historical"> <div class="isg-aside"> <h2>historical</h2> <h3>city</h3> <p>Stunning historical cities are now and forever your favorite sites.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_historical.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_historical.jpg" /> <a href="#js" class="isg-next">Select this scene</a> </li> <li class="isg-city-beach"> <div class="isg-aside"> <h2>city</h2> <h3>beach</h3> <p>Beach by day, city by night - your ultimate, non-stop hotspot.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_citybeach.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_citybeach.jpg" /> <a href="#js" class="isg-next">Select this scene</a> </li> <li class="isg-secluded-beach"> <div class="isg-aside"> <h2>secluded</h2> <h3>beach</h3> <p>A secluded stretch of sun, sea, and sand is your paradise found.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_secludedbeach.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_secludedbeach.jpg" /> <a href="#js" class="isg-next">Select this scene</a> </li> <li class="isg-city"> <div class="isg-aside"> <h2>city</h2> <p>Towering skyscrapers, shopping galore - your go-to glamour destination.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_city.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_city.jpg" /> <a href="#js" class="isg-next">Select this scene</a> </li> <li class="isg-small-town"> <div class="isg-aside"> <h2>small</h2> <h3>town</h3> <p>The laidback ease of a quiet town is your favorite chillout zone. </p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_town.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_town.jpg" /> <a href="#js" class="isg-next">Select this scene</a> </li> </ul> <ul class="isg-choices" data-choice-key="location"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="urban"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_urban.jpg" width="137" height="80"/> <span>urban landscape</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="historical"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_historical.jpg" width="137" height="80"/> <span>historical city</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="citybeach"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_citybeach.jpg" width="137" height="80"/> <span>city beach</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="secludedbeach"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_secludedbeach.jpg" width="137" height="80"/> <span>secluded beach</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="city"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_city.jpg" width="137" height="80"/> <span>city</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="town"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_town.jpg" width="137" height="80"/> <span>small town</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div><!--.isg-location--> <!--END LOCATION--> <!----------------------------------------------------------> <!--3. FASHION/PERFORMANCE LANDING --> <div class="isg-landing isg-page isg-fashion-performance"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 03</span> <h2>Looking good<br/><span>or performing</span></h2> <h3>your best</h3> </div> <div class="isg-beta"> <p>Tell us what you are about</p> </div> </div> <ul class="isg-choices" data-choice-key="fashionOrPerformance"> <li class=""> <a href="#JS" data-choice-value="fashion" class="isg-circle-arrow"> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_urban.jpg" width="137" height="80"/> --> <span>Fashion</span> </a> </li> <li class=""> <a href="#JS" data-choice-value="performance" class="isg-circle-arrow"> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_urban.jpg" width="137" height="80"/> --> <span>Performance</span> </a> </li> </ul> </div> <!--END FASHION/PERFORMANCE LANDING --> <!----------------------------------------------------------> <!-- 4. FASHION/PERFORMANCE --> <div class="isg-page isg-fashion-performance"> <!--PERFORMANCE--> <div class="isg-performance isg-branch"> <!--MALE PERFORMANCE--> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 04</span> <h2>Pick Your</h2> <h3>Playground</h3> </div> <div class="isg-beta"> <p>Choose your sporting style</p> </div> </div> </li> <li class="isg-golf"> <div class="isg-aside"> <h2>Performance</h2> <h3>golf</h3> <p>Perfecting that swing is your driving ambition.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_golf.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_golf.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-running"> <div class="isg-aside"> <h2>Performance</h2> <h3>running</h3> <p>Finish first. Take it all in your stride with these high-endurance stars.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_running.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_running.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-court"> <div class="isg-aside"> <h2>Performance</h2> <h3>court &amp; field</h3> <p>When you're on the field, it's serious game on.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_field.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_field.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-cycling"> <div class="isg-aside"> <h2>Performance</h2> <h3>Cycling</h3> <p>Your love of cycling has you ahead of the pack.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_cycling.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_cycling.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-driving"> <div class="isg-aside"> <h2>Performance</h2> <h3>driving</h3> <p>The fast (minus the furious) gets your motor running.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_driving.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_driving.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-extreme"> <div class="isg-aside"> <h2>Performance</h2> <h3>extreme</h3> <p>Bend and stretch, you're always up for flexing your muscles.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_extreme.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_extreme.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-beach-water"> <div class="isg-aside"> <h2>Performance</h2> <h3>beach and</h3> <h4>water</h4> <p>With sun, sea, and sand, you're in your natural element(s). </p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_beach.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_beach.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="fashionPerformanceChoice"> <li class="isg-empty isg-active"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class=""> <a href="#tabs-1" data-choice-value="golf"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_golf.png" width="137" height="80"/> <span>golf</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="running"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_running.png" width="137" height="80"/> <span>running</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="court"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_field.png" width="137" height="80"/> <span>court &amp; field</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="cycling"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_cycling.png" width="137" height="80"/> <span>cycling</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="driving"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_driving.png" width="137" height="80"/> <span>driving</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="extreme"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_extreme.png" width="137" height="80"/> <span>extreme</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="beach"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_beach.png" width="137" height="80"/> <span>beach &amp; water</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END MALE PERFORMANCE--> <!--FEMALE PERFORMANCE--> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 04</span> <h2>Pick Your</h2> <h3>Playground</h3> </div> <div class="isg-beta"> <p>Choose your sporting style</p> </div> </div> </li> <li class="isg-golf"> <div class="isg-aside"> <h2>Performance</h2> <h3>golf</h3> <p>Perfecting that swing is your driving ambition.</p> </div> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_golf.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_golf.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-running"> <div class="isg-aside"> <h2>Performance</h2> <h3>running</h3> <p>Finish first. Take it all in your stride with these high-endurance stars.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_running.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_running.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-court"> <div class="isg-aside"> <h2>Performance</h2> <h3>Court &amp; Field</h3> <p>When you're on the field, it's serious game on.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_field.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_field.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-cycling"> <div class="isg-aside"> <h2>Performance</h2> <h3>Cycling</h3> <p>Your love of cycling has you ahead of the pack.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_cycling.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_cycling.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-driving"> <div class="isg-aside"> <h2>Performance</h2> <h3>Driving</h3> <p>The fast (minus the furious) gets your motor running.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_driving.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_driving.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-perf-active"> <div class="isg-aside"> <h2>Performance</h2> <h3>Active</h3> <p>Bend and stretch, you're always up for flexing your muscles.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_active.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_active.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-beach-water"> <div class="isg-aside"> <h2>Performance</h2> <h3>beach and</h3> <h4>water</h4> <p>With sun, sea, and sand, you're in your natural element(s). </p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_beach.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_beach.jpg" /> <!--EDIT: NEED TO ADD THIS--> <a href="#js" class="isg-next">Select</a> <!--END EDIT--> </li> </ul> <ul class="isg-choices" data-choice-key="fashionPerformanceChoice"> <li class="isg-empty isg-active"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class=""> <a href="#tabs-1" data-choice-value="golf"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_golf.png" width="137" height="80"/> <span>golf</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="running"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_running.png" width="137" height="80"/> <span>running</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="court"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_field.png" width="137" height="80"/> <span>court &amp; field</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="cycling"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_cycling.png" width="137" height="80"/> <span>cycling</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="driving"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_driving.png" width="137" height="80"/> <span>driving</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="active"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_active.png" width="137" height="80"/> <span>active</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="beach"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_beach.png" width="137" height="80"/> <span>beach &amp; water</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END FEMALE PERFORMANCE--> </div> <!--END PERFORMANCE--> <!--FASHION--> <div class="isg-fashion isg-branch"> <!--FASHION MALE--> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 04</span> <h2>Own Your</h2> <h3>Look</h3> </div> <div class="isg-beta"> <p>What speaks your language?</p> </div> </div> </li> <li class="isg-street"> <div class="isg-aside"> <h2>Street </h2> <h3>Style</h3> <p>Street style that's anything but pedestrian.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_street.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_street.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-classic"> <div class="isg-aside"> <h2>Classic </h2> <h3>Casual</h3> <p>Casual classics for old-school cool.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_classic.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_classic.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-rocker"> <div class="isg-aside"> <h2>Rocker</h2> <p>Rock 'n' roll, fashion's full-throttle hit.<p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_rocker.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_rocker.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-gq"> <div class="isg-aside"> <h2>GQ </h2> <h3>style</h3> <p>Considered chic for a sleek silhouette.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_gqstyle.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_gqstyle.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-hipster"> <div class="isg-aside"> <h2>Hipster</h2> <p>Unlike the rest, unique in every (fashion) sense</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_hipster.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_hipster.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> </ul> <ul class="isg-choices" data-choice-key="fashionPerformanceChoice"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="street"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/icon_fashMan_street.png" width="137" height="80"/> <span>Street Style</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="classic"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/icon_fashMan_classic.png" width="137" height="80"/> <span>Classic Casual</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="rocker"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/icon_fashMan_rocker.png" width="137" height="80"/> <span>Rocker</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="gq"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/icon_fashMan_gqstyle.png" width="137" height="80"/> <span>GQ Style</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="hipster"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/icon_fashMan_hipster.png" width="137" height="80"/> <span>Hipster</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END FASHION MALE--> <!--FASHION FEMALE--> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 04</span> <h2>Own Your</h2> <h3>Look</h3> </div> <div class="isg-beta"> <p>What speaks your language?</p> </div> </div> </li> <li class="isg-chic"> <div class="isg-aside"> <h2>Classic</h2> <h3>Chic</h3> <p>The timeless appeal of iconic must-haves.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_classic.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_classic.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-glitz"> <div class="isg-aside"> <h2>Glitz</h2> <h3>&amp; Glam</h3> <p>Sparkling fashion to outshine in.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_glitzglam.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_glitzglam.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-avant"> <div class="isg-aside"> <h2>Avant</h2> <h3>Garde</h3> <p>Fashion-forward flair that steals the spotlight.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_garde.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_garde.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-boyish"> <div class="isg-aside"> <h2>Boyish</h2> <h3>Style</h3> <p>Gamine-gorgeous looks borrowed from the boys.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_boyish.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_boyish.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-retro"> <div class="isg-aside"> <h2>Retro</h2> <h3>Glam</h3> <p>A modern riff on Retro cool.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_retro.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_retro.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> </ul> <ul class="isg-choices" data-choice-key="fashionPerformanceChoice"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="classic"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/icon_fashWoman_classic.png" width="137" height="80"/> <span>Classic Chic</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="glitz"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/icon_fashWoman_glitzglam.png" width="137" height="80"/> <span>Glitz and Glam</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="avant"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/icon_fashWoman_garde.png" width="137" height="80"/> <span>Avant Garde</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="boyish"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/icon_fashWoman_boyish.png" width="137" height="80"/> <span>Boyish Style</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="retro"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/icon_fashWoman_retro.png" width="137" height="80"/> <span>Retro Glam</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END FASHION FEMALE--> </div> <!--END FASHION--> </div> <!--END FASHION PERFORMANCE--> <!----------------------------------------------------------> <!-- 5. FACE SHAPE --> <div class="isg-page isg-face"> <!-- Provisional Placeholder for skip step --> <!--<div class="isg-nav"> Skip Step </div> --> <!-- FACES A--> <div class="isg-subpage isg-active isg-face-a"> <!-- MALE --> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>What describes the width of your face?</p> </div> </div> </li> <li class="isg-narrow"> <div class="isg-aside"> <h2>Narrow</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg1.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-average"> <div class="isg-aside"> <h2>Average</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-wide"> <div class="isg-aside"> <h2>Wide</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="faceWidth"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class=""> <a href="#tabs-1" data-choice-value="narrow"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_thumb1.png" width="137" height="80"/> <span>Narrow</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="average"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_thumb2.png" width="137" height="80"/> <span>Average</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="wide"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_thumb3.png" width="137" height="80"/> <span>Wide</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END MALE --> <!-- FEMALE --> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>What describes the width of your face?</p> </div> </div> </li> <li class="isg-narrow"> <div class="isg-aside"> <h2>Narrow</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg1.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-average"> <div class="isg-aside"> <h2>Average</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-wide"> <div class="isg-aside"> <h2>Wide</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="faceWidth"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="narrow"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_thumb1.jpg" width="137" height="80"/> <span>Narrow</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="average"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_thumb2.jpg" width="137" height="80"/> <span>Average</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="wide"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_thumb3.jpg" width="137" height="80"/> <span>Wide</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END FEMALE --> </div> <!-- END FACES A--> <!-- FACES B--> <div class="isg-subpage isg-face-b"> <!-- MALE --> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>What about your jawline?</p> </div> </div> </li> <li class="isg-pointy"> <div class="isg-aside"> <h2>Pointy</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg1.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-square"> <div class="isg-aside"> <h2>Square</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-round"> <div class="isg-aside"> <h2>Round</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="jawline"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="pointy"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_thumb1.png" width="137" height="80"/> <span>Pointy Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="square"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_thumb2.png" width="137" height="80"/> <span>Square Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="round"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_thumb3.png" width="137" height="80"/> <span>Round Jawline</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END MALE --> <!-- FEMALE --> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>What about your jawline?</p> </div> </div> </li> <li class="isg-pointy"> <div class="isg-aside"> <h2>Pointy</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg1.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-square"> <div class="isg-aside"> <h2>Square</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-round"> <div class="isg-aside"> <h2>Round</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="jawline"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="pointy"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_thumb1.jpg" width="137" height="80"/> <span>Pointy Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="square"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_thumb2.jpg" width="137" height="80"/> <span>Square Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="round"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_thumb3.jpg" width="137" height="80"/> <span>Round Jawline</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END FEMALE --> </div> <!-- END FACES B--> <!-- FACES C--> <div class="isg-subpage isg-face-c"> <!-- MALE --> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>Finally, what's your prominent feature?</p> </div> </div> </li> <li class="isg-jawline"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Jawline</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg1.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-cheekbone"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Cheekbone</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-forehead"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Forehead</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="prominence"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="jawline"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_thumb1.png" width="137" height="80"/> <span>Prominent Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="cheekbone"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_thumb2.png" width="137" height="80"/> <span>Prominent Cheekbone</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="forehead"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_thumb3.png" width="137" height="80"/> <span>Prominent Forehead</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END MALE --> <!-- FEMALE --> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>Finally, what's your prominent feature?</p> </div> </div> </li> <li class="isg-jawline"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg1.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-cheekbone"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Cheekbone</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-forehead"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Forehead</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="prominence"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class=""> <a href="#tabs-1" data-choice-value="jawline"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_thumb1.jpg" width="137" height="80"/> <span>Prominent Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="cheekbone"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_thumb2.jpg" width="137" height="80"/> <span>Prominent Cheekbone</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="forehead"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_thumb3.jpg" width="137" height="80"/> <span>Prominent Forehead</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END FEMALE --> </div> <!-- END FACES C--> </div> <!-- FACE SHAPE --> <!----------------------------------------------------------> <!-- 6. HAIR --> <div class="isg-page isg-hair"> <!--HAIR MALE--> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 06</span> <h2>Pick Your</h2> <h3>Shade</h3> </div> <div class="isg-beta"> <p>The shade that rocks your locks</p> </div> </div> </li> <li class="isg-red"> <div class="isg-aside"> <h2>Red</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_red.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_red.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-silver"> <div class="isg-aside"> <h2>Silver</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_silver.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_silver.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-brown"> <div class="isg-aside"> <h2>Brown</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_brown.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_brown.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-black"> <div class="isg-aside"> <h2>Black</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_black.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_black.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-blonde"> <div class="isg-aside"> <h2>Blonde</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_blonde.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_blonde.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-chestnut"> <div class="isg-aside"> <h2>Chestnut</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_chestnut.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_chestnut.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-copper"> <div class="isg-aside"> <h2>Copper</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_copper.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_copper.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-blue"> <div class="isg-aside"> <h2>Blue</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_blue.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_blue.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> </ul> <ul class="isg-choices" data-choice-key="hair"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="red"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_red.png"/> <span>Red</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="silver"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_silver.png"/> <span>Silver</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="brown"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_brown.png"/> <span>Brown</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="black"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_black.png"/> <span>Black</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="blonde"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_blonde.png"/> <span>Blonde</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="chestnut"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_chestnut.png"/> <span>Chestnut</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="copper"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_copper.png"/> <span>Copper</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="blue"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_blue.png"/> <span>Blue</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END HAIR MALE--> <!--HAIR FEMALE--> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 06</span> <h2>Pick Your</h2> <h3>Shade</h3> </div> <div class="isg-beta"> <p>The shade that rocks your locks</p> </div> </div> </li> <li class="isg-red"> <div class="isg-aside"> <h2>Red</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_red.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_red.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-pink"> <div class="isg-aside"> <h2>Pink</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_pink.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_pink.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-brown"> <div class="isg-aside"> <h2>Brown</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_brown.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_brown.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-black"> <div class="isg-aside"> <h2>Black</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_black.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_black.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-blonde"> <div class="isg-aside"> <h2>Blonde</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_blonde.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_blonde.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-chestnut"> <div class="isg-aside"> <h2>Chestnut</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_chestnut.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_chestnut.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-copper"> <div class="isg-aside"> <h2>Copper</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_copper.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_copper.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-blue"> <div class="isg-aside"> <h2>Blue</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_blue.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_blue.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> </ul> <ul class="isg-choices" data-choice-key="hair"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="red"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_red.png"/> <span>Red</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="silver"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_pink.png"/> <span>Pink</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="brown"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_brown.png"/> <span>Brown</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="black"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_black.png"/> <span>Black</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="blonde"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_blonde.png"/> <span>Blonde</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="chestnut"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_chestnut.png"/> <span>Chestnut</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="copper"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_copper.png"/> <span>Copper</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="blue"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_blue.png"/> <span>Blue</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END HAIR FEMALE--> </div> <!--END HAIR--> <!----------------------------------------------------------> </div><!--.isg-stage--> <div class="isg-results"> <!--------------------------------------------------------------------> <div class="isg-loading"> <div class="isg-circles"> <div class="isg-alpha"> <h2>Ready</h2> <h3>Set</h3> <h4>Style</h4> </div> <div class="isg-beta"> <p>Prepare to meet your match of the moment</p> <img src="/wcsstore/SGH/experiences/ISG/img/results/ajax-loader.gif" /> </div> </div> </div> <!--------------------------------------------------------------------> <div class="isg-results-header"> <div class="isg-left"> <h1>Today, you're the</h1> <h2>New Garde</h2> <p>Your only rule is never too ordinary. Here are the styles that break them all. Gorgeously.</p> <!--EDIT: --> <!--TODO: Change the href to link to the base of the experience--> <a href="/Experience?storeId=10152&catalogId=10101&langId=-1&experienceName=ISG" class="isg-start-over"> &laquo; Start Over <!--remove this image--> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/results/btn_strtover.jpg" width="" height=""/> --> </a> <!--END EDIT--> </div> <div class="isg-montage"> <img class="isg-location-image" src="" /> <img class="isg-fashion-performance-image" src="" /> </div> </div> <!--------------------------------------------------------------------> <ul class="isg-products"> <li class="first"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg1_results.jpg" width="260px" height="130px"> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> <li class="middle"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg2_results.jpg" width="260px" height="130px"/> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> <li class="last"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg3_results.jpg" width="260px" height="130px"/> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> <li class="first"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg4_results.jpg" width="260px" height="130px"/> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> <li class="middle"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg5_results.jpg" width="260px" height="130px"/> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> <li class="last"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg6_results.jpg" width="260px" height="130px"/> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> </ul> <div class="isg-bottom"> <div class="isg-social"> <h3>friends keep it real get opinions</h3> <ul> <li class="isg-facebook"> <a href="#" onclick="window.open( &#39;https://www.facebook.com/sharer/sharer.php?u=&#39;+encodeURIComponent(location.href), &#39;fb-share-dialog&#39;, &#39;width=626,height=436&#39;); return false;"> <img src="/wcsstore/SGH/experiences/ISG/img/results/btn_facebook.gif"/> </a> </li> <li class="isg-twitter"> <!--TODO: Update the value of data-text to reflect the desired copy for sharing on twitter --> <a href="https://twitter.com/share" class="twitter-share-button" data-url="" data-text="I just found the perfect pair of sunglasses. Frame your style too with Sunglass Hut&#39;s Interactive Style Guide." data-count="none">Tweet</a> <script></script> </li> <li class="isg-pinterest"> <a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png"/></a> </li> </ul> </div> <div class="isg-email" style="display:none;"> <h3>find these looks later</h3> <div class="btn-email"><img src="/wcsstore/SGH/experiences/ISG/img/results/btn_email.jpg"></div> </div> <div class="isg-flavor"> <img src=""> </div> </div> </div> </div><!--.world-view--> </div><!--.isg-wrap--> </div> <!-- TODO: --> <!-- BEGINE JS DELIVERY--> <script src="/wcsstore/SGH/experiences/ISG/js/vendor/underscore-min.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/vendor/backbone-min.js"></script> <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/ISG.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/isg-drag-slider.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/app_data/products.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/models/user.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/router.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/views/worldview.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/views/navview.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/views/breadcrumbview.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/views/questionview.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/views/stageview.js"></script> <!-- Get additional params in url --> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/backbone.queryparams.js"></script> <script> $(document).ready(function(){ ISG.models.userModel = new ISG.User(); ISG.views.worldview = new ISG.WorldView({ model: ISG.models.userModel }); ISG.views.navview = new ISG.NavView({ model: ISG.models.userModel }); ISG.views.breadcrumbview = new ISG.BreadcrumbView({ model: ISG.models.userModel }); ISG.views.stageView = new ISG.StageView({ model: ISG.models.userModel }); ISG.views.questionview = new ISG.QuestionView({ model: ISG.models.userModel }); ISG.router = new ISG.Router(); Backbone.history.start(); }); </script> <!-- END JS DELIVERY -->