Design Responsivo Completo

<!
DOCTYPE html>
<html lang="pt">
<head>
<title>Curso de Design Responsivo Completo do Bobrinha.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/caixas.css">
<link rel="stylesheet" href="bibliotecas/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="bibliotecas/fancybox/helpers/jquery.fancybox-
buttons.css">
<link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet'>
<link rel="shortcut icon" href="imagens/favicon.ico"/>
</head>
<body>
<div class="carregando" id="carregando">
<img src="imagens/carregando.gif" alt="Carregando" title="Carregando">
</div><div class="corpo" id="corpo">
<header class="fundoVerdeFloresta limpa" id="topo">
<div class="conteudo"> <div class="caixa-g-4">
<form name="busca" method="post" class="formularioBusca">
<input type="search" name="s" placeholder="BUSCAR" required/>
<input class="botaoBusca" type="submit" value=""/>
</form>
</div>
<div class="caixa-g-4">
<div class="logo">
<a href="./" title="Curso de Design Responsivo do Bobrinha.com">
<img src="imagens/logo.png" alt="" title="" class="logo">
</a>
</div>
</div>
<div class="caixa-g-4 caixa-m-12">
<div class="caixa">
<nav> <div class="botaoMenu">
</div>
<ul>
<li>
<a href='./' title="Home">Home</a>
</li>
<li>
<ul>
<li>
<a href="#galeria" class="scrollSuave" title="Galeria">Galeria</a>
</li>
<li>
<a href="#castrar" class="scrollSuave" title="Castração">Castração</a>
</li>
<li>
<a href="#denuncie" class="scrollSuave" title="Denuncie">Denuncie</a>
</li>
<li>
<a href="#conselhos" class="scrollSuave" title="Conselhos">Conselhos</a>
</li>
</ul>
</li>
<li>
<a href='#' title="Redes Sociais">Redes Sociais</a>
<ul>
<li>
<a href="https://www.facebook.com/bobrinhacursos" title="Acompanhe no
Facebook">Facebook</a>
</li>
<li>
<a href="https://www.youtube.com/c/Bobrinha" title="Acompanhe no
Youtube">Youtube</a>
</li>
<li>
<a href="https://twitter.com/bobrinhacursos" title="Acompanhe no
Twitter">Twitter</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="slide limpa">
<div id="slideshow-banner">
<ul>
<li class="slideshow-item"><img src="uploads/slide1.jpg" alt="Slide 1"/>
</li>
</li>
</li>
</ul>
</div>
</div><section class="fundoVerde limpa">
<div class="conteudo galeria" id="galeria">
<h1>Quer adotar um cão ou gato?</h1>
<p>Se você deseja ter um amiguinho fiel, companheiro e leal, não precisa pagar por
um, pois um amigo não se compra! Amigo a gente ama, cuida e respeita. Amigo não tem
raça, não tem pedigree. Então, procure um cão ou gato para adotar aqui.</p>
<div class="caixa">
<a class="fancybox" href="uploads/galeria1.jpg" data-fancybox-group="gallery"
title="Cachorro 1">
<img src="uploads/galeria1.jpg" alt=""/>
</a>
</div>
</div>
<div class="caixa">
title="Gato 1">
<img src="uploads/galeria2.jpg" alt=""/></a>
</div>
</div>
<div class="caixa">
title="Cachorro 2">
</div>
</div>
<div class="caixa">
title="Gato 2">
</div>
</div>
<div class="caixa">
title="Gato 3">
</div>
</div>
<div class="caixa">
title="Cachorro 3">
</div></div><div class="caixa-g-3 caixa-m-6">
<div class="caixa">
title="Gato 4">
</div>
</div>
<div class="caixa">
title="Cachorro 4">
</div>
</div>
<a class="fancyboxFormulario fancybox.iframe botao botaoGrande botaoVerde"
href="formulario.html">Adotar um amigo fiel</a>
</div>
</section>
<section class="fundoVerdePrimavera limpa">
<div class="conteudo" id="castrar">
<h2>castre seu bichinho, não há lares para todos</h2>
<p>Castrar seu animal é um ato para melhorar a qualidade de vida dele. Mais do que
isso, a cirurgia é uma forma de fazer sua parte na grave questão do abandono de
cães e gatos no Brasil. A castração é um processo definitivo e não possui
contraindicações. Por meio dela é possível evitar crias indesejadas e previne o
abandono de ﬁlhotes.</p>
<p>Um casal de animais pode originar em 5 anos em sucessivas gerações, com duas
crias por ano de 2 a 8 filhotes por cria</p>
<ul class="estatisticas">
<li>
<p>12</p>
<p>Filhotes no 1º ano</p>
</li>
<li>
<p>66</p>
</li>
<li>
<p>382</p>
</li>
<li>
<p>2.201</p>
</li>
<li>
<p>12.680</p>
</li>
</ul>
</div>
</section>
<section class="fundoVerdeGrama limpa">
<div class="conteudo">
<div class="caixa destaque fundoDestaque1">
<h2>Como podemos mudar o mundo?</h2>
<h3>Com uma atitude real de carinho e amor de cada vez!</h3>
<span>
<a class="fancyboxFormulario fancybox.iframe" href="formulario.html">Pedir
castração</a>
</span>
</div>
</div>
<div class="caixa destaque fundoDestaque2 fundoVerde">
<h2>Castrar seu animal</h2> <h3>É um ato de amor e responsabilidade!</h3>
<span>
<a class="fancyboxFormulario fancybox.iframe" href="formulario.html">Pedir
castração</a>
</span>
</div>
</div>
</div>
</section>
<section class="fundoVerdeBandeira limpa">
<div class="caixa-g-6 caixa-m-6" id="denuncie">
<div class="caixa">
<h2>Denuncie Maus tratos</h2>
<p>Caso você veja ou saiba de maus tratos cometidos contra qualquer tipo de animal,
não pense duas vezes, vá à Delegacia de Polícia mais próxima para lavrar Boletim de
Ocorrência. Abandono e maus tratos à animais é crime.</p>
<table>
<thead>
<tr>
<th>Cães</th>
<th>Gatos</th>
<th>Motivo</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">A pena prevista pelo Art. 32 da Lei de Crime Ambientais é de
detenção de 3 meses a 1 ano e multa. A pena prevista pelo Art. 164 do Código Penal
é de detenção, de 15 (quinze) dias a 6 (seis) meses, ou multa.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>18,5%</td>
<td>37,7%</td>
<td>Sujar a casa</td>
</tr>
<tr>
<td>12,6%</td>
<td>11,4%</td>
<td>Destrutivo fora de casa</td>
</tr>
<tr>
<td>12,1%</td>
<td>16,9%</td>
<td>Agressivo com as pessoas</td>
</tr>
<tr>
<td>10,9%</td>
<td>6,9%</td>
<td>Requer muita atenção</td>
</tr>
<tr>
<td>20,0%</td>
<td>14,6%</td>
<td>Destrutivo dentro de casa</td>
</tr>
<tr>
<td>9,7%</td>
<td>9,0%</td>
<td>Morde</td>
</tr>
<tr>
<td>11,4%</td>
<td>4,6%</td>
<td>Ativo de mais</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="caixa-g-6 caixa-m-6" id="conselhos">
<div class="caixa">
<h2>Conselhos</h2>
<p>De fato, se você estiver avaliando a possibilidade de adotar um pet e quiser
definir as bases de um relacionamento duradouro e feliz, talvez se interesse pelos
conselhos elaborados pela Fundação Affinity para evitar o abandono de animais</p>
<ul class="conselhos">
<li>
<img src="uploads/conselho1.jpg" alt="Decida em família" title="Decida em
família"/>
<h3>Decida em família</h3>
<p>A decisão de ter um animal deve ser tomada em família, dividindo as diferentes
tarefas e responsabilidades entre todos os membros dela.</p>
</li>
<li>
<img src="uploads/conselho2.jpg" alt="Decida antes de adotar" title="Decida antes
de adotar"/>
<h3>Decida antes de adotar</h3>
<p>É preciso informar-se e decidir que tipo de animal melhor adapta-se as suas
necessidades, gostos, estilo de vida e tamanho do lar: cachorro, gato ou outro tipo
de pet; macho ou fêmea; filhote ou adulto; no caso de cachorros, pequeno, médio ou
grande porte...</p>
</li>
<li>
<img src="uploads/conselho3.jpg" alt="Ensine comandos básicos" title="Ensine
comandos básicos"/>
<h3>Ensine comandos básicos</h3>
<p>Ensinar ao animal, principalmente no caso dos cachorros, os comandos básicos de
adestramento. Dessa maneira, a convivência será mais fácil e você aproveitará mais
a companhia do seu pet.</p>
</li>
<li>
<img src="uploads/conselho4.jpg" alt="Informe-se" title="Informe-se"/>
<h3>Informe-se</h3>
<p>Informar-se com o veterinário sobre a esterilização para exercer não só o papel
de dono responsável, mas também uma "paternidade responsável" e evitar as ninhadas
não desejadas.</p>
</li>
</ul>
</div>
</div>
</div>
</section>
<div class="fundoVerdeFloresta">
<footer class="conteudo limpa">
<article class="caixa-g-3 caixa-m-3">
<div class="caixa">
<h4>Bobrinha</h4>
<ul>
<li>
<span class="icones iconeHome"></span>
<a href="http://www.bobrinha.com" title="Home Page">Site Oficial</a>
</li>
<li>
<span class="icones iconeHost"></span>
<a href="https://www.hostgator.com.br/1298.html" title="Hospedagem Profissional de
Sites">Hospedagem de Sites</a>
</li>
</ul>
</div>
</article>
<div class="caixa">
<h4>Siga-me</h4>
<ul>
<li>
<span class="icones iconeFacebook"></span>
<a href="https://www.facebook.com/bobrinhacursos" title="Acompanhe no
Facebook">Facebook</a>
</li>
<li>
<span class="icones iconeYoutube"></span>
<a href="https://www.youtube.com/c/Bobrinha" title="Acompanhe no
Youtube">Youtube</a>
</li>
<li>
<span class="icones iconeTwitter"></span>
<a href="https://twitter.com/bobrinhacursos" title="Acompanhe no
Twitter">Twitter</a>
</li>
</ul>
</div>
</article>
<div class="caixa"> <h4>Newsletter</h4>
<p>Faça parte da nossa lista de emails e receba nossas atualizaçãos</p>
<form name="newsletter" method="post"> <input type="email" name="email"
class="campoNewslleter">
<input type="submit" value="Enviar" name="enviar" class="botao botaoVerde
botaoMedio">
</form>
</div>
</article>
<div class="caixa">
<h4>Denuncie</h4>
<p>Maus tratos e abandono de animais são crimes. Lei Federal nº 9.605 / 98</p>
<div class="numero">
<p>Ligue</p>
<span>181</span>
</div>
</div>
</article >
</footer>
<a href="#topo" class="voltarTopo scrollSuave" id="voltarTopo"></a>
<div class="alerta">
<p>© 2016 - Bobrinha Treinamentos. Todos Os Direitos Reservados. Este site é um
projeto final do curso de Design Responsivo do Bobrinha.com. Serve apenas para
ilustração do conteúdo parcial aprendido no curso. O curso ensina a construir este
site completo do inicio ao fim, além de apresentar os principais conceitos atuais
do design responsivo, apresenta também outros conceitos fundamentais do HTML5 e
CSS3, além de uma introdução ao JavaScript e a utilização de bibliotecas JQuery
para aumentar todo conhecimento já adquirido sendo um curso completo e de fácil
aprendizagem indicado para todos que desejam de forma profissional se tornar um
desenvolvedor web front-end completo.</p>
<p>Esse site foi desenvolvido de acordo com os padrões W3C</p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-
validator/images/vcss" alt="CSS válido!"/>
</a> <a href="http://validator.w3.org/check/referer">
<img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-
xhtml10" alt="Valid XHTML 1.0!"/>
</a>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/funcoes.js"></script>
<script src="js/slide.js"></script>
<script src="bibliotecas/fancybox/jquery.fancybox.js"></script>
<script src="bibliotecas/fancybox/helpers/jquery.fancybox-buttons.js"></script>
</div>
</body>
</html>

Design Responsivo Completo

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Design Responsivo Completo

Caricato da

Copyright:

Formati disponibili

<!

Potrebbero piacerti anche