index.html

---
layout: home
---

<section class="row section-feature">
  <div class="col-sm-4 col-sm-offset-1">
    <img class="img-responsive" src="https://cloud.githubusercontent.com/assets/1139893/10844038/f4dc3938-7ee3-11e5-97b7-62b2ba7bb5da.png">
  </div>
  <div class="col-sm-4 col-sm-offset-2">
    <h3>Design</h3>
    <p class="lead">Desenhado com base nas normas do manual de identidade visual oficial do Centro Paula Souza.</p>
    <p><a href="{{ "branding/" | prepend: site.baseurl | prepend: site.url }}" class="btn btn-default">Identidade <i class="fa fa-arrow-right"></i></a></p>
  </div>
</section>

<section class="row section-feature">
  <div class="col-sm-4 col-sm-offset-1">
    <h3>Responsivo</h3>
    <p class="lead">Grids com design responsivo, que adaptam o layout para todos os tipos de aparelhos, seja celular, tablets, laptops e outros.</p>
    <p><a href="{{ "components/grid/" | prepend: site.baseurl | prepend: site.url }}" class="btn btn-default">Grids <i class="fa fa-arrow-right"></i></a></p>
  </div>
  <div class="col-sm-4 col-sm-offset-2">
    <img class="img-responsive" src="https://cloud.githubusercontent.com/assets/1139893/10844439/b16089fe-7ee6-11e5-9ad9-e338c9ed5aa2.gif">
  </div>
</section>

<section class="row section-feature">
  <div class="col-sm-4 col-sm-offset-1">
    <img class="img-responsive" src="https://cloud.githubusercontent.com/assets/1139893/10844440/b1717566-7ee6-11e5-8f55-a7497d3d1b4b.gif">
  </div>
  <div class="col-sm-4 col-sm-offset-2">
    <h3>Front-end</h3>
    <p class="lead">O núcleo do {{ site.title }} é construído a partir do framework Bootstrap, isto significa que ao usar-lo você provavelmente se familiarizará.</p>
    <p><a href="{{ "getting-started/introduction/" | prepend: site.baseurl | prepend: site.url }}" class="btn btn-default">Introdução <i class="fa fa-arrow-right"></i></a></p>
  </div>
</section>

<section class="row section-feature">
  <div class="col-sm-4 col-sm-offset-1">
    <h3>Manual de boas práticas</h3>
    <p class="lead">Dicas práticas para organizar e desenvolver códigos mais limpo, flexível e reaproveitável.</p>
    <p><a href="{{ "getting-started/best-practices/" | prepend: site.baseurl | prepend: site.url }}" class="btn btn-default">Boas práticas <i class="fa fa-arrow-right"></i></a></p>
  </div>
  <div class="col-sm-4 col-sm-offset-2">
    <img class="img-responsive" src="https://cloud.githubusercontent.com/assets/1139893/10844443/b17c0166-7ee6-11e5-8630-ad372fd2de21.gif">
  </div>
</section>

<section class="row section-feature">
  <div class="col-sm-4 col-sm-offset-1">
    <img class="img-responsive" src="https://cloud.githubusercontent.com/assets/1139893/10844442/b17739ce-7ee6-11e5-84b0-0aa275990d1c.gif">
  </div>
  <div class="col-sm-4 col-sm-offset-2">
    <h3>Templates</h3>
    <p class="lead">Muitos modelos de templates para você se basear ao desenhar suas páginas e aplicativos web.</p>
    <p><a href="{{ "templates/" | prepend: site.baseurl | prepend: site.url }}" class="btn btn-default">Templates <i class="fa fa-arrow-right"></i></a></p>
  </div>
</section>

<section class="section-showcase">
  <h2>Projetos criados com {{ site.title }}</h2>
  <p class="lead">Páginas e aplicações web de Etecs, Fatecs e do Centro Paula Souza desenvolvidos com {{site.title}}.</p>
  <div class="row">
    {% for case in site.data.showcases limit: 3 %}
      <div class="col-md-4">
        <a href="{% if case.url contains 'http://' %}{{ case.url }}{% else %}{{ case.url | prepend: site.baseurl | prepend: site.url }}{% endif %}" target="_blank">
          <img src="{{ site.baseurl_content }}showcases/{{ case.screenshot }}" alt="" class="img-responsive thumbnail">
          <h3 class="h6">{{ case.title }}</h3>
        </a>
      </div>
    {% endfor %}
  </div>
  <br><br>
  <p><a href="{{ "about/showcases/" | prepend: site.baseurl | prepend: site.url }}" class="btn btn-primary btn-lg">Explorar mais</a></p>
</section>