brand-assets/nike/web/views/tester-education-template.html

<div class="tester-education">
    <section class="steps" ng-show="vm.selectedTab === 0">

        <div class="nike_header">
            <h3 class="tleLines"><span translate="TESTER_EDUCATION.WELCOME"></span></h3>
        </div>

        <div class="row carousel-row">
            <div class="col-md-6 col-xs-12 carousel-holder">
                <landing-carousel
                    carousel-landing-images="vm.carouselImages"
                    main-landing-carousel="vm.testerEducationCarouselConfig"
                    use-custom-template="true"
                ></landing-carousel>
            </div>
            <div class="col-md-6 col-xs-12 col-lg-5">
                <div class="presentation">
                    <p translate="TESTER_EDUCATION.PRESENTATION.P1"></p>
                    <p translate="TESTER_EDUCATION.PRESENTATION.P2"></p>
                    <p translate="TESTER_EDUCATION.PRESENTATION.P3"></p>
                    <p translate="TESTER_EDUCATION.PRESENTATION.P4"></p>
                </div>
            </div>
        </div>

        <div class="testerInnovation">
            <h3 class="tleLines"><span translate="TESTER_EDUCATION.INNOVATION.TITLE"></span></h3>
            <h5 translate="TESTER_EDUCATION.INNOVATION.DESCRIPTION"></h5>

            <div class="row feedbackloop">
                <div class="col-xs-12 col-sm-2">
                    <h3>
                        <span translate="TESTER_EDUCATION.INNOVATION.START"></span>
                        <br/>
                        <small>
                            <span translate="TESTER_EDUCATION.INNOVATION.PRODUCT_IS_DESIGNED"></span>
                        </small>
                    </h3>
                </div>

                <div class="col-xs-12 col-sm-8">
                    <img translate-attr="{ src: 'TESTER_EDUCATION.INNOVATION.IMAGES.PROCESS_VERTICAL', alt: 'TESTER_EDUCATION.INNOVATION.IMAGES.PROCESS_VERTICAL_ALT' }"
                         width="100%" class="visible-xs" />
                    <img translate-attr="{ src: 'TESTER_EDUCATION.INNOVATION.IMAGES.PROCESS', alt: 'TESTER_EDUCATION.INNOVATION.IMAGES.PROCESS_ALT' }"
                         width="100%" class="hidden-xs" />
                </div>

                <div class="col-xs-12 col-sm-2">
                    <h3>
                        <span translate="TESTER_EDUCATION.INNOVATION.END"></span>
                        <br/>
                        <small>
                            <span translate="TESTER_EDUCATION.INNOVATION.PRODUCT_FINALIZED"></span>
                            <br/>
                            <span translate="TESTER_EDUCATION.INNOVATION.READY_FOR_ACTION"></span>
                        </small>
                    </h3>
                </div>
            </div><!-- /.feedbackloop -->
        </div><!-- /.testerInnovation -->

        <div class="testerRules">
            <h3 class="tleLines"><span translate="TESTER_EDUCATION.TESTER_RULES.TITLE"></span></h3>
            <h5 translate="TESTER_EDUCATION.TESTER_RULES.DESCRIPTION"></h5>

            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4 col-md-offset-1 col-lg-offset-2 testerRules-dos">
                    <h2 translate="TESTER_EDUCATION.TESTER_RULES.DO"></h2>
                    <ul>
                        <li><span class="dosIcon"></span><span translate="TESTER_EDUCATION.TESTER_RULES.DO.1"></span></li>
                        <li><span class="dosIcon"></span><span translate="TESTER_EDUCATION.TESTER_RULES.DO.2"></span></li>
                        <li><span class="dosIcon"></span><span translate="TESTER_EDUCATION.TESTER_RULES.DO.3"></span></li>
                        <li><span class="dosIcon"></span><span translate="TESTER_EDUCATION.TESTER_RULES.DO.4"></span></li>
                    </ul>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4 testerRules-dos testerRules-donts">
                    <h2 translate="TESTER_EDUCATION.TESTER_RULES.DONT"></h2>
                    <ul>
                        <li><span class="dosIcon"></span><span translate="TESTER_EDUCATION.TESTER_RULES.DONT.1"></span></li>
                        <li><span class="dosIcon"></span><span translate="TESTER_EDUCATION.TESTER_RULES.DONT.2"></span></li>
                        <li><span class="dosIcon"></span><span translate="TESTER_EDUCATION.TESTER_RULES.DONT.3"></span></li>
                        <li><span class="dosIcon"></span><span translate="TESTER_EDUCATION.TESTER_RULES.DONT.4"></span></li>
                    </ul>
                </div>
            </div><!-- /.row -->
        </div><!-- /.testerRules -->

    </section>

    <section class="steps" ng-show="vm.selectedTab === 1">

        <div class="steps-center-container">
            <div class="col-xs-12">
                <h2>Most frequently asked questions and answers about testing</h2>
                <hr />
                <p>If there is no answer to your questions please <a href="#"> <i class="fa fa-paper-plane" aria-hidden="true"></i> send us a message</a></p>
                <div class="searchbox">
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <input type="text" placeholder="Spotlight search" />
                </div>
                <h3>My profile / Application</h3>
                <div class="panel-group accordionPanel" id="accordion" accordion-arrow-switcher>
                        <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" href="">How do I edit my test profile?</a><span><i class="fa indicator pull-right fa-angle-down"></i></span> </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse">
                            <div class="panel-body">
                                <hr>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt porttitor neque. Curabitur feugiat lectus nec neque tempor malesuada. Vestibulum a eros vel neque sollicitudin lobortis. Nullam dictum neque in justo finibus, convallis hendrerit purus hendrerit. Integer et ipsum lobortis, egestas metus vel, mollis odio.</p>
                        </div>
                        </div>
                        </div>
                        <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" href="">How do I update my ship address information?</a><span><i class="fa fa-angle-down indicator pull-right"></i></span> </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                <hr>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt porttitor neque. Curabitur feugiat lectus nec neque tempor malesuada. Vestibulum a eros vel neque sollicitudin lobortis. Nullam dictum neque in justo finibus, convallis hendrerit purus hendrerit. Integer et ipsum lobortis, egestas metus vel, mollis odio.</p>
                        </div>
                        </div>
                        </div>
                        <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree" href="">How do I submit a test application for another sport?</a><span><i class="fa fa-angle-down indicator pull-right"></i></span> </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse">
                            <div class="panel-body">
                                <hr>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt porttitor neque. Curabitur feugiat lectus nec neque tempor malesuada. Vestibulum a eros vel neque sollicitudin lobortis. Nullam dictum neque in justo finibus, convallis hendrerit purus hendrerit. Integer et ipsum lobortis, egestas metus vel, mollis odio.</p>
                        </div>
                        </div>
                        </div>
                </div>
                <h3>Receive / Return product</h3>
                <div class="panel-group accordionPanel" id="accordion2" accordion-arrow-switcher>
                        <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="" data-target="#collapseFour">I accepted a test, what is next?</a><span><i class="fa indicator pull-right fa-angle-down"></i></span> </h4>
                        </div>
                        <div id="collapseFour" class="panel-collapse collapse">
                            <div class="panel-body">
                                <hr>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt porttitor neque. Curabitur feugiat lectus nec neque tempor malesuada. Vestibulum a eros vel neque sollicitudin lobortis. Nullam dictum neque in justo finibus, convallis hendrerit purus hendrerit. Integer et ipsum lobortis, egestas metus vel, mollis odio.</p>
                        </div>
                        </div>
                        </div>
                        <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="" data-target="#collapseFive">I received test shoes, what do I do next?</a><span><i class="fa fa-angle-down indicator pull-right"></i></span> </h4>
                        </div>
                        <div id="collapseFive" class="panel-collapse collapse">
                            <div class="panel-body">
                                <hr>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt porttitor neque. Curabitur feugiat lectus nec neque tempor malesuada. Vestibulum a eros vel neque sollicitudin lobortis. Nullam dictum neque in justo finibus, convallis hendrerit purus hendrerit. Integer et ipsum lobortis, egestas metus vel, mollis odio.</p>
                        </div>
                        </div>
                        </div>
                        <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="" data-target="#collapseSix">How do I return test shoes?</a><span><i class="fa fa-angle-down indicator pull-right"></i></span> </h4>
                        </div>
                        <div id="collapseSix" class="panel-collapse collapse">
                            <div class="panel-body">
                                <hr>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt porttitor neque. Curabitur feugiat lectus nec neque tempor malesuada. Vestibulum a eros vel neque sollicitudin lobortis. Nullam dictum neque in justo finibus, convallis hendrerit purus hendrerit. Integer et ipsum lobortis, egestas metus vel, mollis odio.</p>
                        </div>
                        </div>
                        </div>
                </div>
            </div>
        </div>
    </section>
</div><!-- /.tester-education -->