-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (117 loc) · 6.33 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyNewPet - Encontre seu novo Pet!</title>
<meta name="description" content="O projeto MyNewPet simplifica o processo de adoção de um Pet, reunindo animais amorosos a tutores responsáveis!">
<link rel="icon" href="img/paw.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Cabeçalho -->
<header>
<div class="container flex">
<div id="logo">
<img src="img/paw.png" alt="pet">
</div>
<nav>
<input type="checkbox" id="check">
<label for="check">⚌</label>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#adocao">Adoção</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</div>
</header>
<!-- Destaque - projeto -->
<main id="inicio">
<div class="container flex2">
<div id="destaqProj">
<img src="img/dog-destaq01.jpg" alt="Cachorro" id="img-main">
</div>
<div id="textProj">
<h1>Projeto - MyNewPet</h1>
<h2>Onde amor e cuidado se encontram!</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae fuga aut exercitationem, architecto quibusdam debitis dolorem ipsam repellat nisi dicta ipsum dolores possimus perferendis dolore! Explicabo pariatur deserunt quasi praesentium. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo dicta ullam qui, neque nisi consequatur praesentium minima mollitia nobis accusamus eius, deleniti quaerat veniam, cupiditate eligendi! Nihil in optio nulla.</p>
</div>
</div>
</main>
<!-- Sobre -->
<section id="sobre">
<div class="container flex3">
<div id="textoSobre">
<h2>Sobre nós</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab voluptas error fugit dicta natus minus distinctio placeat est deserunt facere quo eius adipisci, illum quae reprehenderit quam, magnam modi facilis!</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/UA799498NB8" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
<!-- Adoção -->
<section id="adocao">
<div class="container">
<div class="Card">
<div class="cards">
<div class="image image-dog"></div>
<!-- <img src="img/dog-card01.jpg" alt="dog"> -->
<h3>Caẽs</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi id fugit in placeat cumque! Perferendis natus in quod officiis! Saepe quam quibusdam illum repellat eveniet unde, pariatur quidem? Veniam, odio.</p>
</div>
<div class="cards">
<div class="image image-cat"></div>
<!-- <img src="img/cat-Card01.jpg" alt="cat" > -->
<h3>Gatos</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi id fugit in placeat cumque! Perferendis natus in quod officiis! Saepe quam quibusdam illum repellat eveniet unde, pariatur quidem? Veniam, odio.</p>
</div>
</div>
</div>
</section>
<!-- Rodape -->
<address>
<div class="container flex5">
<div id="contato">
<a href="https://api.whatsapp.com/send?phone=5532998394021" target="_blank">
<img src="img/wpp.png" alt="whatsapp" title="Abrir WhatsApp" id="wpp">
<p>(32) 99839-4021</p>
</a>
<img src="img/fone.png" alt="telefone" id="fone">
<p>(32) 99839-4021</p>
</div>
<div id="end">
<a href="https://goo.gl/maps/DaMjRaf3BNNAu41W7">
<img src="img/mapa.png" alt="mapa" id="MapaLocal">
</a>
<img src="img/local.png" alt="local" id="IconLocal">
<p>Rua example, n 123</p>
<p>Bairro unkown</p>
<p>Barbacena - MG</p>
<a href="mailto:gabrielknpp@gmail?subject=teste">
<img src="img/gmail.png" alt="gmail" title="Enviar E-mail" id="email">
<p>[email protected]</p>
</a>
</div>
<div id="maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7748250.314845248!2d-49.95018132246089!3d-18.51419410156129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xa690a165324289%3A0x112170c9379de7b3!2sMinas%20Gerais!5e0!3m2!1spt-BR!2sbr!4v1662665431153!5m2!1spt-BR!2sbr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</address>
<footer>
<div class="container flex4">
<div id="copyright">
<p>© Developed by Gabriel Knupp</p>
</div>
<div id="social">
<a href="#"><img src="img/facebook.png" alt="facebook"></a>
<a href="#"><img src="img/instagram.png" alt="instagram"></a>
</div>
</div>
</footer>
<a href="#inicio" id="topo"><img src="img/topo.png" alt="Topo do site"></a>
</body>
</html>