-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
201 lines (180 loc) · 9.24 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
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Labrador</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<nav class="navbar">
<div class="logo">Labrador 🐕✨🚀</div>
<ul class="nav-links">
<li><a href="#">Início</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#cuidados">Cuidados e Treinamento</a></li>
<li><a href="#galeria">Galeria</a></li>
<li><a href="#depoimentos">Depoimentos</a></li>
</ul>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
<div class="hero">
<div class="hero-content">
<iframe id="youtube-short" src="https://www.youtube.com/embed/6uO72zt3WBk?autoplay=1"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div class="controls">
<button id="prev">⬅️</button>
<button id="next">➡️</button>
</div>
</div>
<div class="text">Em Memória do Bud. "O amigo ama em todos os momentos; é um irmão na adversidade.", Provérbios
17:17
</div>
</div>
<section id="sobre" class="about-section">
<h2>Sobre a Raça</h2>
<div class="about-content">
<div class="about-text">
<h3>História</h3>
<p>O Labrador Retriever é originário da Terra Nova, no Canadá, e foi desenvolvido no Reino Unido. Eles
foram inicialmente usados por pescadores para ajudar a puxar redes e pegar peixes que escapavam.</p>
<h3>Características</h3>
<p>Os Labradores são conhecidos por seu pelo curto e denso, que pode ser preto, chocolate ou amarelo.
Eles são cães de porte médio a grande, com uma constituição robusta e atlética.</p>
<h3>Temperamento</h3>
<p>Os Labradores são famosos por sua natureza amigável e extrovertida. Eles são inteligentes, fáceis de
treinar e se dão bem com crianças e outros animais. São cães leais e afetuosos, ideais para
famílias.</p>
</div>
<div class="about-image">
<img src="images/Labrador-Retriever.png" alt="Labrador Retriever" onclick="openFullscreen(this.src)">
</div>
</div>
</section>
<section id="cuidados" class="care-section">
<h2>Cuidados e Treinamento</h2>
<div class="card-container">
<div class="card">
<h3>Cuidados Gerais</h3>
<p>Os Labradores precisam de cuidados regulares com o pelo, incluindo escovação semanal para remover
pelos soltos e manter o pelo saudável.</p>
</div>
<div class="card">
<h3>Alimentação</h3>
<p>Uma dieta balanceada é essencial. Consulte um veterinário para determinar a quantidade e o tipo de
alimento adequado para o seu Labrador.</p>
</div>
<div class="card">
<h3>Exercícios</h3>
<p>Labradores são cães ativos que precisam de exercícios diários. Caminhadas, corridas e brincadeiras
são ótimas maneiras de mantê-los saudáveis.</p>
</div>
<div class="card">
<h3>Treinamento</h3>
<p>O treinamento deve começar cedo. Labradores são inteligentes e respondem bem a comandos, mas a
consistência é fundamental.</p>
</div>
</div>
</section>
<section id="galeria" class="gallery-section">
<h1 class="gallery-title">Galeria</h1>
<div class="filters">
<button class="filter-btn active" data-filter="all">Todos</button>
<button class="filter-btn" data-filter="filhotes">Filhotes</button>
<button class="filter-btn" data-filter="adultos">Labradores Adultos</button>
<button class="filter-btn" data-filter="acao">Labradores em Ação</button>
</div>
<div class="gallery-grid">
<!-- Exemplo de item de galeria -->
<div class="gallery-item filhotes">
<img src="images/Labrador-puppy.png" alt="Labrador Filhote" onclick="openFullscreen(this.src)">
</div>
<div class="gallery-item filhotes">
<img src="images/Labrador-puppy-1.png" alt="Labrador Filhote" onclick="openFullscreen(this.src)">
</div>
<div class="gallery-item filhotes">
<img src="images/Labrador-puppy-2.png" alt="Labrador Filhote" onclick="openFullscreen(this.src)">
</div>
<div class="gallery-item adultos">
<img src="images/Labrador-brown-black.png" alt="Labrador Filhote" onclick="openFullscreen(this.src)">
</div>
<div class="gallery-item adultos">
<img src="images/Labrador-brown-black-1.png" alt="Labrador Filhote" onclick="openFullscreen(this.src)">
</div>
<div class="gallery-item adultos">
<img src="images/Labrador-brown-black-2.png" alt="Labrador Filhote" onclick="openFullscreen(this.src)">
</div>
<div class="gallery-item acao">
<img src="images/um-labrador-adulto-pulando-alto.png" alt="Labrador Adulto Pulando"
onclick="openFullscreen(this.src)">
</div>
<div class="gallery-item acao">
<img src="images/um-labrador-como-cao-guia.png" alt="Labrador como cão guia"
onclick="openFullscreen(this.src)">
</div>
<div class="gallery-item acao">
<img src="images/um-labrador-fazendo-exercicios-de-agilidade.png" alt="Labrador fazendo exercícios"
onclick="openFullscreen(this.src)">
</div>
<!-- <div class="gallery-item acao"> -->
<!-- <video src="videos/acao1.mp4" controls></video> -->
<!-- <iframe src="https://www.youtube.com/embed/XwA3n-ltd1E" frameborder="0" allowfullscreen></iframe> -->
<!-- </div> -->
<!-- Adicione mais itens conforme necessário -->
</div>
</section>
<section id="depoimentos" class="testimonials-section">
<h2 class="section-title">Depoimentos</h2>
<h3 class="section-subtitle">Histórias emocionantes de amor e companheirismo da IA Copilot</h3>
<div class="testimonials-grid">
<div class="testimonial-card">
<img src="images/avatar-maria-50.png" alt="Foto de Maria" class="testimonial-photo"
onclick="openFullscreen(this.src)">
<h4>Maria, 45 anos</h4>
<p>"Meu Labrador, Max, salvou minha vida. Durante uma caminhada, ele percebeu que algo estava errado e
me trouxe de volta para casa. Ele é meu herói."</p>
</div>
<div class="testimonial-card">
<img src="images/avatar-joao-32.png" alt="Foto de João" class="testimonial-photo"
onclick="openFullscreen(this.src)">
<h4>João, 32 anos</h4>
<p>"Desde que adotei Luna, minha vida mudou completamente. Ela é sempre alegre e me faz sorrir, mesmo
nos dias mais difíceis. Ela é minha melhor amiga."</p>
</div>
<div class="testimonial-card">
<img src="images/avatar-ana-50.png" alt="Foto de Ana'" class="testimonial-photo"
onclick="openFullscreen(this.src)">
<h4>Ana 50 anos</h4>
<p>"Meu Labrador, Bruno, é incrivelmente inteligente. Ele aprendeu truques incríveis e sempre faz a
alegria dos visitantes. Ele é um verdadeiro showman!"</p>
</div>
<div class="testimonial-card">
<img src="images/avatar-pedro-28.png" alt="Foto de João" class="testimonial-photo"
onclick="openFullscreen(this.src)">
<h4>Pedro, 28 anos</h4>
<p>"Adotei Toby quando ele era apenas um filhote. Agora ele é meu companheiro de aventuras. Nós
exploramos trilhas e praias juntos. Ele é meu parceiro perfeito."</p>
</div>
<div class="testimonial-card">
<img src="images/avatar-lucia-38.png" alt="Foto de João" class="testimonial-photo"
onclick="openFullscreen(this.src)">
<h4>Lucia, 38 anos</h4>
<p>"Minha Labrador, Bella, é a melhor terapeuta. Ela tem um temperamento tão calmo e amoroso que todos
se sentem melhor ao seu lado. Ela é uma verdadeira anjo."</p>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-content">
<iframe src="https://github.com/sponsors/fvandrad/button" title="Sponsor fvandrad" height="32" width="114"
class="sponsors"></iframe>
<p>© 2025</p>
</div>
</footer>
</body>
</html>