-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
189 lines (185 loc) · 9.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=width-device, initial-scale=1" />
<link rel="stylesheet" href="css/estilo.css" />
<link rel="stylesheet" href="css/material/material.min.css" />
<link rel="stylesheet" href="css/conteudo.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="manifest" href="manifest.json">
<title>Home</title>
</head>
<body>
<!-- Inicio versao mobile -->
<!-- Barra de menu sempre visivel. -->
<div id="mat-header" class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div id="barra_menu" class="mdl-layout__header-row">
<!-- Title -->
<span id="topo_menu" class="mdl-layout-title">Amigo Cão
<img src="multimidia/lacinho.png" width="20%" heigth="auto" />
</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="mdl-layout__drawer">
<span id="menu_lateral_fundo_superior" class="mdl-layout-title">
<img src="multimidia/focinho-pet.png" /> PETSHOP</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="index.html">Home</a>
<a class="mdl-navigation__link" href="quem-somos.html">Quem Somos</a>
<a class="mdl-navigation__link" href="produtos.html">Produtos</a>
<a class="mdl-navigation__link" href="agendamento.html">Banho e Tosa</a>
<a class="mdl-navigation__link" href="curiosidades.html">Curiosidades</a>
</nav>
<span id="menu_lateral_fundo_inferior" class="mdl-layout-title">Amigo Cão
<img src="multimidia/ossinho.png" />
</span>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- conteudo da pagina com conexao dos elementos do topo com menu mat -->
<hgroup>
<picture>
<img id="logo-topo" src="multimidia/meu-amigo-cao-petshop-header.png" alt="nosso-espaco-luxo-pet" max-width="100%" height="auto"
/>
</picture>
<a href="boletim.html">
<button id="news" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Assine Nossa Newsletter </button>
</a>
<div>
<p id="chamar_acao"> nos acompanhe: </p>
<a href="https://facebook.com" target="_blank">
<img src="multimidia/ms-facebook.gif" alt="facebook-logo" / max-width="100%" />
</a>
<a href="https://twitter.com" target="_blank">
<img src="multimidia/ms-twitter.gif" alt="twitter-logo" / max-width="100%" />
</a>
<a href="https://youtube.com" target="_blank">
<img src="multimidia/ms-youtube.gif" alt="youtube-logo" / max-width="100%" />
</a>
<a href="https://br.pinterest.com" target="_blank">
<img src="multimidia/ms-pinterest.gif" alt="pintrest-logo" / max-width="100%" />
</a>
<a href="https://plus.google.com/" target="_blank">
<img src="multimidia/ms-gmais.gif" alt="google-plus-logo" / max-width="100%" />
</a>
</div>
</hgroup>
<!-- Fim elementos do topo -->
<!-- Inicio conteudo do corpo versao mobile -->
<section id="conteudo-movel">
<article>
<h1>O melhor para o nosso amigo cão</h1>
<h2>Quisque venenatis urna ac nulla. Maecenas quis turpis nec nulla auctor mattis. Curabitur mi libero, scelerisque
eu, cursus semper, tempor quis, ante. Etiam iaculis, nisl eu imperdiet tincidunt, neque lacus ornare leo,
non ultrices arcu justo ut enim. Morbi pulvinar sagittis sapien. Sed adipiscing purus nec tortor. Cras nisi
sapien, ultricies nec, dapibus ut, vehicula ac, pede. Donec venenatis lorem sit amet erat vehicula hendrerit.
In convallis odio id augue. Sed nunc. Donec id tellus nec urna placerat consectetuer. Maecenas eget metus.
Etiam et risus. Cras nunc mi, aliquam semper, suscipit a, dictum elementum, velit. Curabitur
</h2>
<div id="foto-1"><h2>Brincadeiras</h2></div>
<div id="foto-2"><h2>Cuidados</h2></div>
<div id="foto-3"><h2>Saúde</h2></div>
</article>
<aside id="mov_esq">
<p>Ouça a dica do veterinário!</p>
<video id="video-home-mobile" controls="controls">
<source src="multimidia/cao_brincando.mp4" type="video/mp4"/>
<source src="multimidia/cao_brincando.ogv" type="video/ogg"/>
Sua versão do navegador esta desatualizado e nao suporta video em html5
</video>
<img src="multimidia/anuncio_pet1.jpg" alt="mr.dog-card" />
<p>Brinque sempre com seu cãozinho!</p>
<audio id="audio-home-mobile" controls="controls">
<source src="multimidia/brincar_com_cuidado.mp3" type="audio/mpeg"/>
<source src="multimidia/brincar_com_cuidado.ogg" type="audio/ogg"/>
Sua versão do navegador esta desatualizado e nao suporta audio em html5
</audio>
<img src="multimidia/anuncio_pet2.jpg" alt="mr.dog-card" />
</aside>
</section>
<footer id="rodape-mobile">Atendimento:
<a href="mailto:[email protected]"> [email protected]</a> - (0XX) 99999-9999 / (0XX) 88888-8888</footer>
<!-- Fim do conteudo do corpo versao mobile -->
</div>
</main>
</div>
<!-- Fim versao mobile -->
<!-- Inicio versao pc -->
<header class="menu-pc">
<hgroup id="espaco_topo">
<a href="boletim.html">
<button id="news" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Assine Nossa Newsletter </button>
</a>
<div>
<p id="chamar_acao"> nos acompanhe: </p>
<a href="https://facebook.com" target="_blank">
<img src="multimidia/ms-facebook.gif" alt="facebook-logo" / max-width="100%" />
</a>
<a href="https://twitter.com" target="_blank">
<img src="multimidia/ms-twitter.gif" alt="twitter-logo" / max-width="100%" />
</a>
<a href="https://youtube.com" target="_blank">
<img src="multimidia/ms-youtube.gif" alt="youtube-logo" / max-width="100%" />
</a>
<a href="https://br.pinterest.com" target="_blank">
<img src="multimidia/ms-pinterest.gif" alt="pintrest-logo" / max-width="100%" />
</a>
<a href="https://plus.google.com/" target="_blank">
<img src="multimidia/ms-gmais.gif" alt="google-plus-logo" / max-width="100%" />
</a>
</div>
</hgroup>
<nav>
<a href="index.html"> Home </a>
<a href="quem-somos.html"> Quem Somos </a>
<a href="produtos.html"> Produtos </a>
<a href="agendamento.html"> Banho e Tosa </a>
<a href="curiosidades.html"> Curiosidades </a>
</nav>
</header>
<!-- Inicio conteudo do corpo versao pc -->
<section id="conteudo-pc">
<article>
<h1>O melhor para o nosso amigo cão</h1>
<h2>Quisque venenatis urna ac nulla. Maecenas quis turpis nec nulla auctor mattis. Curabitur mi libero, scelerisque eu,
cursus semper, tempor quis, ante. Etiam iaculis, nisl eu imperdiet tincidunt, neque lacus ornare leo, non ultrices
arcu justo ut enim. Morbi pulvinar sagittis sapien. Sed adipiscing purus nec tortor. Cras nisi sapien, ultricies
nec, dapibus ut, vehicula ac, pede. Donec venenatis lorem sit amet erat vehicula hendrerit. In convallis odio id
augue. Sed nunc. Donec id tellus nec urna placerat consectetuer. Maecenas eget metus. Etiam et risus. Cras nunc
mi, aliquam semper, suscipit a, dictum elementum, velit. Curabitur.
</h2>
<div id="foto-1"><h2>Brincadeiras</h2></div>
<div id="foto-2"><h2>Cuidados</h2></div>
<div id="foto-3"><h2>Saúde</h2></div>
<br>
</article>
<aside id="esq">
<p>Ouça a dica do veterinário!</p>
<video id="video-home" controls="controls" poster="multimidia/pet-surpresa.png">
<source src="multimidia/cao_brincando.mp4" type="video/mp4"/>
<source src="multimidia/cao_brincando.ogv" type="video/ogg"/>
Sua versão do navegador esta desatualizado e nao suporta video em html5
</video>
<img src="multimidia/anuncio_pet1.jpg" alt="mr.dog-card" />
<p>Brinque sempre com seu cãozinho!</p>
<audio id="audio-home" controls="controls">
<source src="multimidia/brincar_com_cuidado.mp3" type="audio/mpeg"/>
<source src="multimidia/brincar_com_cuidado.ogg" type="audio/ogg"/>
Sua versão do navegador esta desatualizado e nao suporta audio em html5
</audio>
<img src="multimidia/anuncio_pet2.jpg" alt="mr.dog-card" />
</aside>
<!-- Fim do conteudo do corpo versao pc -->
</section>
<footer id="rodape-pc">Atendimento:
<a href="mailto:[email protected]"> [email protected]</a> - (0XX) 99999-9999 / (0XX) 88888-8888</footer>
</body>
<script src="js/material/material.min.js"></script>
<script src="js/funcoes.js"></script>
</html>