Fix Header and Footer on each print page

Question

Fix Header and Footer on each print page

Asked 8 years, 2 months ago

Viewed 761 times

1

~~I wonder how do I fix a Header and a Footer on each page to be printed~~, keeping the content between them [Edit] respecting the header space and footer. I would also like to take advantage and ask how it makes the div’s zebras appear at the time of printing.

Follows current code

body {
  width: 99%;
  height: 950px;
}
.brasao-umuarama {
  width: 99%;
  height: auto;
}
.logo-drz {
  width: 85%;
  margin-top: 5%;
}
.logo-maptriz {
  width: 23%;
}
.categoria {
  padding: 1%;
}
.edificacoes {
  page-break-before: always;
}
.zoneamento {
  page-break-before: always;
}
.bold {
  font-weight: bold;
}
.small {
  font-size: small;
}
.smaller {
  font-size: smaller;
}
.strip {
  background-color: #f0f0f0;
  -webkit-print-color-adjust: exact;
}
/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* Styles */
}
/* Smartphones (landscape) ----------- */

@media only screen and (min-width: 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}
/* iPads (landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
}
/* Desktops and laptops ----------- */

@media only screen and (min-width: 1224px) {
  /* Styles */
}
/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}
@media print {
  header {
    position: fixed;
    display: block;
  }
  footer {
    position: fixed;
    display: block;
    bottom: 0px;
  }
}
@page{

mso-title-page:yes;

}

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" media="print">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <title>Consulta de Viabilidade</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-/questions/ask#bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" />
  <link rel="stylesheet" href="css/index.css" />
</head>

<body class="container">
  <header>
    <div class="row" style="border-bottom: 1px solid #000">
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <img src="images/brasao-umuarama.svg" alt="Brasão de Umuarama" class="brasao-umuarama img-responsive">
      </div>

      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
        <div class="text-center">
          <h2>Prefeitura de Umuarama - PR</h2>
          <h3>Secretaria Municipal do Urbanismo</h3>
        </div>
      </div>
      <div class="col-xs-2 col-sm-2col-md-2 col-lg-2">
        <img src="images/logo-drz.svg" class="logo-drz img-responsive" />
      </div>
    </div>
  </header>
  <!-- Conteúdo -->
  <div class="conteudo">
    <!-- Informações Cadastrais -->
    <section class="categoria">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">Informações Cadastrais</h4>
        </div>

        <div class="conteudo"></div>
        <div class="panel-body">
          <!-- Dados Imobiliários -->
          <div class="row strip">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Inscrição Imobiliária</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">n/d</i>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Número Lote</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">2</i>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Cadastro</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">478100</i>
            </div>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Seção</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">1</i>
            </div>
          </div>

          <div class="row strip">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Número de Quadra</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">38</i>
            </div>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Setor</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">1</i>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Endereço</span>
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-10">
              <i class="small">RUA PADRE CICERO ROMAO BATISTA </i>
            </div>
          </div>

          <div class="row strip">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Complemento</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">n/d</i>
            </div>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Número</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">1630</i>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Bairro</span>
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-10">
              <i class="small">CENTRO</i>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="categoria">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">Mockup</h4>
        </div>
        <div class="panel-body">
          <div class="mapa text-center">
            <img src="images/exemplo_mapa.png" class="img-rounded img-responsive" width="98%" />
          </div>
        </div>
      </div>
    </section>

    <section class="categoria edificacoes">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">Edificações</h4>
        </div>
        <div class="panel-body">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">Edificação 1</h4>
            </div>
            <div class="panel-body">
              <!-- Proprietário -->
              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Nome Proprietário</span>
                </div>

                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                  <i class="smaller">SEBASTIÃO RIBAS MACHADO E SILVA</i>
                </div>
              </div>
              <!-- Complemento Endereço -->
              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="visible-sm visible-xs bold"><abbr title="Complemento">Comp. Endereço</abbr></span>
                  <span class="hidden-sm hidden-xs bold">Complemento Endereço</span>
                </div>

                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                  <i class="smaller">EDIFICIO MINAS GERAIS, APTO 101, GAR-01</i>
                </div>
              </div>

              <!--Dimensões Edificação -->
              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Área Cadastro</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">100 m²</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Área Imagem </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">150 m²</i>
                </div>
              </div>

              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Categoria Edificão</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Uso Habitacional</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold hidden-xs">Situação Edificação </span>
                  <span class="bold visible-xs">Situação <abbr title="complemento">Edif.</abbr></span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Fundos</i>
                </div>
              </div>

              <!-- Conservação -->
              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold hidden-xs hidden-sm">Estado Conservação</span>
                  <span class="bold visible-xs visible-sm">Estado <abbr title="complemento">Conserv.</abbr></span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Ótimo</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Idade Aparente </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Nova</i>
                </div>
              </div>

              <!-- Beiral -->
              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Percentual Beiral</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">10 %</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold  hidden-xs">Largura Beiral </span>
                  <span class="bold visible-xs"><abbr title="complemento">Nova</abbr></span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">15 m</i>
                </div>
              </div>

              <!-- Caracteristicas da Edificação -->
              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Tipo Construção</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Alvenaria</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Estrutura </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Concreto</i>
                </div>
              </div>

              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Forro</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Madeira</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Paredes </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Rebocadas</i>
                </div>
              </div>

              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Piso</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">n/d</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Fachada </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">n/d</i>
                </div>
              </div>

              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Instalação Elétrica</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Sim</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Instação Sanitária</span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Sim</i>
                </div>
              </div>

              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Posicionamento</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Recuada</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Alinhamento </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">n/d</i>
                </div>
              </div>

              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Situação</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Recuada</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Cor</span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">n/d</i>
                </div>
              </div>

              <!-- Imagens -->
              <div class="row categoria strip">
                <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                  <img src="photos/foto_1.jpg" alt="Foto 1" class="img-thumbnail img-responsive" />
                  <span style="font-size: smaller">Foto_1.jpg</span>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                  <img src="photos/foto_2.jpg" alt="Foto 1" class="img-thumbnail img-responsive" />
                  <span style="font-size: smaller">Foto_2.jpg</span>
                </div>
              </div>

              <!-- Documentos 7 -->
              <div class="row text-center" style="padding: 1%">
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento1.doc</p>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento2.doc</p>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento3.doc</p>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento4.doc</p>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento5.doc</p>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento6.doc</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="categoria zoneamento">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">Zoneamento</h4>
        </div>
        <div class="panel-body">
          <div class="row strip">
            <div class="col-xs-4 col-sm-6 col-md-6 col-lg-6">
              <span class="bold">Categoria Zoneamento</span>
            </div>
            <div class="col-xs-8 col-sm-6 col-md-6 col-lg-6">
              <i class="small">Categoria 1</i>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-4 col-sm-6 col-md-6 col-lg-6">
              <span class="bold">Subcategoria Zoneamento</span>
            </div>
            <div class="col-xs-8 col-sm-6 col-md-6 col-lg-6">
              <i class="small">Subcategoria 1</i>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">Permissões</h4>
        </div>
        <div class="panel-body">

          <!-- Permitidos -->
          <div class="row strip">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
              <span class="bold">Permitidos</span>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1col-lg-1">
              <i class="small">H1</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">C1</i>
            </div>
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
              <span></span>
            </div>
          </div>

          <!-- Permissiveis -->
          <div class="row">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
              <span class="bold">Permissiveis</span>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">H2</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <span>H5</span>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">C2</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">CS1</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i>I1</i>
            </div>
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
              <span></span>
            </div>
          </div>

          <div class="row strip">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
              <span class="bold">Proíbidos</span>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">H3</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">H4</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">C3</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">C4</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">CS2</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">I2</i>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-1 col-lg-4"></div>
          </div>
        </div>
      </div>
    </section>

  </div>
  <footer style="border-top: 1px solid #000">
    <div class="row">
      <!-- Telefone -->
      <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
        <span class="fa fa-phone"></span>
        <small>(44) 3621 - 4141</small>
      </div>

      <!-- Endereço -->
      <div class="col-xs-4 col-sm-5 col-md-7 col-lg-8">
        <span class="fa fa-home"></span>
        <small>Avenida Rio Branco, 3717, Centro Umuarama - PR Cep 87000-000</small>
      </div>

      <div class="col-xs-4 col-sm-3 col-md-3 col-lg-2">
        <span class="fa fa-globe"></span>
        <small>www.umuarama.gov.pr.br</small>
      </div>
    </div>
  </footer>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>

</html>

FIXAR, in your case means creating a header and a footer for all pages, without duplicating code?

– Kenny Rafael

2016/10/14 at 13:26
Yes, this page is a kind of report. Then you would need to fix them.

– Douglas Dreer

2016/10/14 at 13:27
1

@Guilhermepressutto Yes, I was asked to ask a new question. So I deleted that one and created a new one.

– Douglas Dreer

2016/10/14 at 13:39

1 answer

Browser other questions tagged html5 twitter-bootstrap css3 impression

You are not signed in. Login or sign up in order to post.

by Kenny Rafael • **6,698** points · Answer 1 · 2016-10-14T14:19:52+00:00

body {
  width: 99%;
  height: 950px;
}
.brasao-umuarama {
  width: 99%;
  height: auto;
}
.logo-drz {
  width: 85%;
  margin-top: 5%;
}
.logo-maptriz {
  width: 23%;
}
.categoria {
  padding: 1%;
}
.edificacoes {
  page-break-before: always;
}
.zoneamento {
  page-break-before: always;
}
.bold {
  font-weight: bold;
}
.small {
  font-size: small;
}
.smaller {
  font-size: smaller;
}
.strip {
  background-color: #f0f0f0;
  -webkit-print-color-adjust: exact;
}
/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* Styles */
}
/* Smartphones (landscape) ----------- */

@media only screen and (min-width: 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}
/* iPads (landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
}
/* Desktops and laptops ----------- */

@media only screen and (min-width: 1224px) {
  /* Styles */
}
/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

  header {
    width: 100%;
    background: #fff;
    z-index: 9999;
    max-width: 1140px;
    position: fixed;
    display: block;
  }
  footer {
    width: 100%;
    background: #fff;
    z-index: 9999;
    max-width: 1140px;
    position: fixed;
    display: block;
    bottom: 0px;
  }
  body > .conteudo {
      margin-top: 100px;
  }

@page{

mso-title-page:yes;

}

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" media="print">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <title>Consulta de Viabilidade</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-/questions/ask#bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" />
  <link rel="stylesheet" href="css/index.css" />
</head>

<body class="container">
  <header>
    <div class="row" style="border-bottom: 1px solid #000">
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <img src="images/brasao-umuarama.svg" alt="Brasão de Umuarama" class="brasao-umuarama img-responsive">
      </div>

      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
        <div class="text-center">
          <h2>Prefeitura de Umuarama - PR</h2>
          <h3>Secretaria Municipal do Urbanismo</h3>
        </div>
      </div>
      <div class="col-xs-2 col-sm-2col-md-2 col-lg-2">
        <img src="images/logo-drz.svg" class="logo-drz img-responsive" />
      </div>
    </div>
  </header>
  <!-- Conteúdo -->
  <div class="conteudo">
    <!-- Informações Cadastrais -->
    <section class="categoria">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">Informações Cadastrais</h4>
        </div>

        <div class="conteudo"></div>
        <div class="panel-body">
          <!-- Dados Imobiliários -->
          <div class="row strip">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Inscrição Imobiliária</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">n/d</i>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Número Lote</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">2</i>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Cadastro</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">478100</i>
            </div>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Seção</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">1</i>
            </div>
          </div>

          <div class="row strip">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Número de Quadra</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">38</i>
            </div>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Setor</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">1</i>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Endereço</span>
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-10">
              <i class="small">RUA PADRE CICERO ROMAO BATISTA </i>
            </div>
          </div>

          <div class="row strip">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Complemento</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">n/d</i>
            </div>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Número</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
              <i class="small">1630</i>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
              <span class="bold">Bairro</span>
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-10">
              <i class="small">CENTRO</i>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="categoria">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">Mockup</h4>
        </div>
        <div class="panel-body">
          <div class="mapa text-center">
            <img src="images/exemplo_mapa.png" class="img-rounded img-responsive" width="98%" />
          </div>
        </div>
      </div>
    </section>

    <section class="categoria edificacoes">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">Edificações</h4>
        </div>
        <div class="panel-body">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">Edificação 1</h4>
            </div>
            <div class="panel-body">
              <!-- Proprietário -->
              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Nome Proprietário</span>
                </div>

                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                  <i class="smaller">SEBASTIÃO RIBAS MACHADO E SILVA</i>
                </div>
              </div>
              <!-- Complemento Endereço -->
              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="visible-sm visible-xs bold"><abbr title="Complemento">Comp. Endereço</abbr></span>
                  <span class="hidden-sm hidden-xs bold">Complemento Endereço</span>
                </div>

                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                  <i class="smaller">EDIFICIO MINAS GERAIS, APTO 101, GAR-01</i>
                </div>
              </div>

              <!--Dimensões Edificação -->
              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Área Cadastro</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">100 m²</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Área Imagem </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">150 m²</i>
                </div>
              </div>

              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Categoria Edificão</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Uso Habitacional</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold hidden-xs">Situação Edificação </span>
                  <span class="bold visible-xs">Situação <abbr title="complemento">Edif.</abbr></span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Fundos</i>
                </div>
              </div>

              <!-- Conservação -->
              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold hidden-xs hidden-sm">Estado Conservação</span>
                  <span class="bold visible-xs visible-sm">Estado <abbr title="complemento">Conserv.</abbr></span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Ótimo</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Idade Aparente </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Nova</i>
                </div>
              </div>

              <!-- Beiral -->
              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Percentual Beiral</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">10 %</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold  hidden-xs">Largura Beiral </span>
                  <span class="bold visible-xs"><abbr title="complemento">Nova</abbr></span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">15 m</i>
                </div>
              </div>

              <!-- Caracteristicas da Edificação -->
              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Tipo Construção</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Alvenaria</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Estrutura </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Concreto</i>
                </div>
              </div>

              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Forro</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Madeira</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Paredes </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Rebocadas</i>
                </div>
              </div>

              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Piso</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">n/d</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Fachada </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">n/d</i>
                </div>
              </div>

              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Instalação Elétrica</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Sim</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Instação Sanitária</span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Sim</i>
                </div>
              </div>

              <div class="row strip">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Posicionamento</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Recuada</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Alinhamento </span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">n/d</i>
                </div>
              </div>

              <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Situação</span>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">Recuada</i>
                </div>

                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <span class="bold">Cor</span>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                  <i class="smaller">n/d</i>
                </div>
              </div>

              <!-- Imagens -->
              <div class="row categoria strip">
                <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                  <img src="photos/foto_1.jpg" alt="Foto 1" class="img-thumbnail img-responsive" />
                  <span style="font-size: smaller">Foto_1.jpg</span>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                  <img src="photos/foto_2.jpg" alt="Foto 1" class="img-thumbnail img-responsive" />
                  <span style="font-size: smaller">Foto_2.jpg</span>
                </div>
              </div>

              <!-- Documentos 7 -->
              <div class="row text-center" style="padding: 1%">
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento1.doc</p>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento2.doc</p>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento3.doc</p>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento4.doc</p>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento5.doc</p>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <i class="fa fa-file-text-o fa-5x"></i>
                  <p style="font-size: smaller">Documento6.doc</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="categoria zoneamento">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">Zoneamento</h4>
        </div>
        <div class="panel-body">
          <div class="row strip">
            <div class="col-xs-4 col-sm-6 col-md-6 col-lg-6">
              <span class="bold">Categoria Zoneamento</span>
            </div>
            <div class="col-xs-8 col-sm-6 col-md-6 col-lg-6">
              <i class="small">Categoria 1</i>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-4 col-sm-6 col-md-6 col-lg-6">
              <span class="bold">Subcategoria Zoneamento</span>
            </div>
            <div class="col-xs-8 col-sm-6 col-md-6 col-lg-6">
              <i class="small">Subcategoria 1</i>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">Permissões</h4>
        </div>
        <div class="panel-body">

          <!-- Permitidos -->
          <div class="row strip">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
              <span class="bold">Permitidos</span>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1col-lg-1">
              <i class="small">H1</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">C1</i>
            </div>
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
              <span></span>
            </div>
          </div>

          <!-- Permissiveis -->
          <div class="row">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
              <span class="bold">Permissiveis</span>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">H2</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <span>H5</span>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">C2</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">CS1</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i>I1</i>
            </div>
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
              <span></span>
            </div>
          </div>

          <div class="row strip">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
              <span class="bold">Proíbidos</span>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">H3</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">H4</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">C3</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">C4</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">CS2</i>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
              <i class="small">I2</i>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-1 col-lg-4"></div>
          </div>
        </div>
      </div>
    </section>

  </div>
  <footer style="border-top: 1px solid #000">
    <div class="row">
      <!-- Telefone -->
      <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
        <span class="fa fa-phone"></span>
        <small>(44) 3621 - 4141</small>
      </div>

      <!-- Endereço -->
      <div class="col-xs-4 col-sm-5 col-md-7 col-lg-8">
        <span class="fa fa-home"></span>
        <small>Avenida Rio Branco, 3717, Centro Umuarama - PR Cep 87000-000</small>
      </div>

      <div class="col-xs-4 col-sm-3 col-md-3 col-lg-2">
        <span class="fa fa-globe"></span>
        <small>www.umuarama.gov.pr.br</small>
      </div>
    </div>
  </footer>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>

</html>