sections.html 8.12 KB
<section id="wl-presentation-video">
    <div class="container-fluid container wl-video-control-container">
        <div class="row">
            <div class="wl-video-control-wrapper">
                <img class="wl-video-control" src="assets/img/wl-icon-play.png">
            </div>
        </div>
    </div>
</section>
<section id="wl-overview">
    <div class="container-fluid container">
        <div class="row">
            <div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-12 wl-section-title">
                        <div class="title">o
                            que
                            já
                            produzimos
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 wl-overview-description">
                <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem
                    sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos
                    e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco
                    séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente
                    inalterado.</p>
            </div>
            <div class="col-xs-12 wl-overview-progress-wrapper">
                <div class="wl-overview-progress">
                    <div class="title">
                        <span>Vídeos enviados</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar -brown" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100" style="width: 10%"></div>
                    </div>
                    <div class="row progress-values">
                        <div class="col-xs-4">
                            Feitos: <span class="value">150</span>
                        </div>
                        <div class="col-xs-4">
                            Meta: <span class="value">410</span>
                        </div>
                        <div class="col-xs-4">
                            <span class="value">10 dias restantes</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 wl-overview-progress-wrapper">
                <div class="wl-overview-progress">
                    <div class="title">
                        <span>Sinais construídos</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar -yellow" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100" style="width: 80%"></div>
                    </div>
                    <div class="row progress-values">
                        <div class="col-xs-4">
                            Feitos: <span class="value">150</span>
                        </div>
                        <div class="col-xs-4">
                            Meta: <span class="value">410</span>
                        </div>
                        <div class="col-xs-4">
                            <span class="value">10 dias restantes</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 wl-overview-progress-wrapper">
                <div class="wl-overview-progress">
                    <div class="title">
                        <span>Sinais construídos</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar -blue" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100" style="width: 40%"></div>
                    </div>
                    <div class="row progress-values">
                        <div class="col-xs-4">
                            Feitos: <span class="value">150</span>
                        </div>
                        <div class="col-xs-4">
                            Meta: <span class="value">410</span>
                        </div>
                        <div class="col-xs-4">
                            <span class="value">10 dias restantes</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
<section id="wl-features">
    <span class="wl-zigzag-border"></span>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 wl-section-title">
                <div class="title">voc
                ê
                pode
                colaborar
                </div>
            </div>
            <div class="col-xs-12 wl-features-container">
                <div class="wl-features-wrapper -salmon">
                    <div class="wl-feature">
                        <div class="wl-feature-img">
                            <img src="assets/img/wl-feature-send-video.png">
                        </div>
                        <div class="btn btn-info wl-btn wl-feature-btn">
                            enviar
                            video
                        </div>
                        <div class="wl-feature-description">
                <span>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI.
                </span>
                        </div>
                    </div>
                    <div class="wl-ellipse-wrapper">
                        <span>ou</span>
                    </div>
                </div>
                <div class="wl-features-wrapper -yellow">
                    <div class="wl-feature">
                        <div class="wl-feature-img">
                            <img src="assets/img/wl-feature-create-sign.png">
                        </div>
                        <div class="btn btn-info wl-btn wl-feature-btn">
                            criar
                            sinal
                        </div>
                        <div class="wl-feature-description">
                <span>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI.
                </span>
                        </div>
                    </div>
                    <div class="wl-ellipse-wrapper">
                        ou
                    </div>
                </div>
                <div class="wl-features-wrapper -blue">
                    <div class="wl-feature">
                        <div class="wl-feature-img">
                            <img src="assets/img/wl-feature-fix-sign.png">
                        </div>
                        <div class="btn btn-info wl-btn wl-feature-btn">
                            corrigir
                            sinal
                        </div>
                        <div class="wl-feature-description">
                <span>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI.
                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="wl-volunteers">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 wl-section-title">
                <div class="title">pessoas
                colaborando</div>
            </div>
            <div class="col-xs-12 wl-volunteers-container">
                <div ng-repeat="avatar in avatars" class="wl-volunteers-wrapper">
                    <img ng-src="{{ avatar.url }}">
                </div>
                <div ng-repeat="avatar in avatars"
                     ng-if="avatars.length % 10 === 0? false: $index <= avatars.length - avatars.length % 10"
                     class="wl-volunteers-wrapper">
                </div>
            </div>
        </div>
    </div>
</section>