-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (153 loc) · 17.5 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
<!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">
<meta name="keywords" content="lovet, landing page, html, css, pet, amor, cuide, diego luiz, veterinária, mobile-first">
<meta name="description" content="Landing page fictícia de uma clínica veterinária desenvolvida durante o evento maratona starter pela codar.me">
<meta name="author" content="Diego Luiz">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/main.css">
<title>Lovet landing page - Cuide do seu pet com o amor que ele merece</title>
</head>
<body>
<div class="top-container">
<header class="default-container main-header">
<a href="#" class="logo">
<h1 class="logo__text">lovet</h1>
<svg width="58" height="19" viewBox="0 0 58 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.92 18V0.36H4.184V18H0.92ZM13.6136 18.36C12.3096 18.36 11.1656 18.068 10.1816 17.484C9.19756 16.9 8.42956 16.096 7.87756 15.072C7.33356 14.04 7.06156 12.856 7.06156 11.52C7.06156 10.168 7.34156 8.98 7.90156 7.956C8.46156 6.924 9.23356 6.12 10.2176 5.544C11.2016 4.968 12.3336 4.68 13.6136 4.68C14.9176 4.68 16.0616 4.972 17.0456 5.556C18.0376 6.14 18.8096 6.948 19.3616 7.98C19.9136 9.004 20.1896 10.184 20.1896 11.52C20.1896 12.864 19.9096 14.052 19.3496 15.084C18.7976 16.108 18.0256 16.912 17.0336 17.496C16.0496 18.072 14.9096 18.36 13.6136 18.36ZM13.6136 15.312C14.6616 15.312 15.4416 14.96 15.9536 14.256C16.4736 13.544 16.7336 12.632 16.7336 11.52C16.7336 10.368 16.4696 9.448 15.9416 8.76C15.4216 8.072 14.6456 7.728 13.6136 7.728C12.9016 7.728 12.3176 7.888 11.8616 8.208C11.4056 8.528 11.0656 8.972 10.8416 9.54C10.6256 10.108 10.5176 10.768 10.5176 11.52C10.5176 12.68 10.7776 13.604 11.2976 14.292C11.8256 14.972 12.5976 15.312 13.6136 15.312ZM25.8637 18L21.1597 5.04H24.4237L27.4957 14.016L30.5677 5.04H33.8317L29.1277 18H25.8637ZM41.5556 18.36C40.2276 18.36 39.0556 18.076 38.0396 17.508C37.0316 16.932 36.2396 16.144 35.6636 15.144C35.0956 14.136 34.8116 12.984 34.8116 11.688C34.8116 10.272 35.0916 9.04 35.6516 7.992C36.2116 6.944 36.9836 6.132 37.9676 5.556C38.9516 4.972 40.0836 4.68 41.3636 4.68C42.7236 4.68 43.8796 5 44.8316 5.64C45.7836 6.28 46.4876 7.18 46.9436 8.34C47.3996 9.5 47.5596 10.864 47.4236 12.432H44.1956V11.232C44.1956 9.912 43.9836 8.964 43.5596 8.388C43.1436 7.804 42.4596 7.512 41.5076 7.512C40.3956 7.512 39.5756 7.852 39.0476 8.532C38.5276 9.204 38.2676 10.2 38.2676 11.52C38.2676 12.728 38.5276 13.664 39.0476 14.328C39.5756 14.984 40.3476 15.312 41.3636 15.312C42.0036 15.312 42.5516 15.172 43.0076 14.892C43.4636 14.612 43.8116 14.208 44.0516 13.68L47.3156 14.616C46.8276 15.8 46.0556 16.72 44.9996 17.376C43.9516 18.032 42.8036 18.36 41.5556 18.36ZM37.2596 12.432V10.008H45.8516V12.432H37.2596ZM57.1891 18C56.4611 18.152 55.7411 18.212 55.0291 18.18C54.3251 18.148 53.6931 17.996 53.1331 17.724C52.5811 17.452 52.1611 17.028 51.8731 16.452C51.6411 15.972 51.5131 15.488 51.4891 15C51.4731 14.504 51.4651 13.94 51.4651 13.308V1.44H53.2171V13.236C53.2171 13.78 53.2211 14.236 53.2291 14.604C53.2451 14.964 53.3291 15.284 53.4811 15.564C53.7691 16.1 54.2251 16.42 54.8491 16.524C55.4811 16.628 56.2611 16.604 57.1891 16.452V18ZM48.6931 6.552V5.04H57.1891V6.552H48.6931Z" fill="#19456B"/>
</svg>
</a>
<a href="#" class="default-link main-header__link">Agendar horário</a>
</header>
<section class="default-container hero">
<div class="hero__text-container">
<h2 class="hero__title">Cuide do seu pet com o amor que ele merece</h2>
<p class="hero__description">Nossos especialistas estão prontos para cuidar da saúde e limpeza do seu melhor amigo com um atendimento exclusivo!</p>
<a href="#" class="default-link hero__link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6004 14C16.4004 13.9 15.1004 13.3 14.9004 13.2C14.7004 13.1 14.5004 13.1 14.3004 13.3C14.1004 13.5 13.7004 14.1 13.5004 14.3C13.4004 14.5 13.2004 14.5 13.0004 14.4C12.3004 14.1 11.6004 13.7 11.0004 13.2C10.5004 12.7 10.0004 12.1 9.60039 11.5C9.50039 11.3 9.60039 11.1 9.70039 11C9.80039 10.9 9.90039 10.7 10.1004 10.6C10.2004 10.5 10.3004 10.3 10.3004 10.2C10.4004 10.1 10.4004 9.90004 10.3004 9.80004C10.2004 9.70004 9.70039 8.50004 9.50039 8.00004C9.40039 7.30004 9.20039 7.30004 9.00039 7.30004C8.90039 7.30004 8.70039 7.30004 8.50039 7.30004C8.30039 7.30004 8.00039 7.50004 7.90039 7.60004C7.30039 8.20004 7.00039 8.90004 7.00039 9.70004C7.10039 10.6 7.40039 11.5 8.00039 12.3C9.10039 13.9 10.5004 15.2 12.2004 16C12.7004 16.2 13.1004 16.4 13.6004 16.5C14.1004 16.7 14.6004 16.7 15.2004 16.6C15.9004 16.5 16.5004 16 16.9004 15.4C17.1004 15 17.1004 14.6 17.0004 14.2C17.0004 14.2 16.8004 14.1 16.6004 14ZM19.1004 4.90004C15.2004 1.00004 8.90039 1.00004 5.00039 4.90004C1.80039 8.10004 1.20039 13 3.40039 16.9L2.00039 22L7.30039 20.6C8.80039 21.4 10.4004 21.8 12.0004 21.8C17.5004 21.8 21.9004 17.4 21.9004 11.9C22.0004 9.30004 20.9004 6.80004 19.1004 4.90004ZM16.4004 18.9C15.1004 19.7 13.6004 20.2 12.0004 20.2C10.5004 20.2 9.10039 19.8 7.80039 19.1L7.50039 18.9L4.40039 19.7L5.20039 16.7L5.00039 16.4C2.60039 12.4 3.80039 7.40004 7.70039 4.90004C11.6004 2.40004 16.6004 3.70004 19.0004 7.50004C21.4004 11.4 20.3004 16.5 16.4004 18.9Z" fill="currentColor"/>
</svg>
<span>Agendar horário</span>
</a>
</div>
<div class="hero__img-container">
<img
class="img"
src="./assets/images/img-hero-desktop.png"
alt="Um cachorro preto e branco junto de um gato cinza"
>
</div>
</section>
</div>
<main>
<div>
<section class="default-container main-section services">
<h2 class="section__title">Nossos serviços</h2>
<p class="section__phrase">Veja o que fazemos de melhor</p>
<div class="cards-container">
<section class="services__card">
<img
src="./assets/images/img-card-01-desktop.png"
alt="Veterinária sorrindo e segurando um cachorro peludo e fofo no colo"
class="services__card___img"
>
<div class="services__card___content">
<h3 class="title">Serviços veterinários</h3>
<p class="description">Cuide da saúde do seu amigo com exames, vacinação e consultas.</p>
</div>
</section>
<section class="services__card">
<img
src="./assets/images/img-card-02-desktop.png"
alt="Um cachorro peludo tomando banho com a ajuda de um profissional"
class="services__card___img"
>
<div class="services__card___content">
<h3 class="title">Banho e tosa</h3>
<p class="description">Deixe o seu pet bem limpinho com nossos produtos exclusivos.</p>
</div>
</section>
<section class="services__card">
<img
src="./assets/images/img-card-03-desktop.png"
alt="Veterinário olhando para o cachorro e sua dona felizes"
class="services__card___img"
>
<div class="services__card___content">
<h3 class="title">Hospedagem</h3>
<p class="description">Vai viajar? Conte com a gente para cuidar do seu pet o tempo que precisar!</p>
</div>
</section>
</div>
</section>
</div>
<div class="location-container">
<section class="default-container main-section location">
<h2 class="section__title">Onde estamos</h2>
<p class="section__phrase">Venha nos fazer uma visita!</p>
<div class="location__address">
<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5997 19.4496C19.451 20.5983 16.9847 23.0646 15.4138 24.6355C14.6327 25.4166 13.3679 25.4171 12.5868 24.6361C11.0427 23.0919 8.62595 20.6752 7.40036 19.4496C3.75546 15.8047 3.75546 9.89516 7.40036 6.25027C11.0453 2.60538 16.9548 2.60538 20.5997 6.25027C24.2446 9.89516 24.2446 15.8047 20.5997 19.4496Z" stroke="#16C79A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.5 12.8499C17.5 14.7829 15.933 16.3499 14 16.3499C12.067 16.3499 10.5 14.7829 10.5 12.8499C10.5 10.9169 12.067 9.34993 14 9.34993C15.933 9.34993 17.5 10.9169 17.5 12.8499Z" stroke="#16C79A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p>Rua 27 de abril, 154</p>
</div>
</section>
<div class="location__map" title="google map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1827.3011957579101!2d-46.5403483606979!3d-23.654406346414245!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce42ec1701002d%3A0x60eb0b511830f586!2sRua%208%20de%20Agosto%20-%20Santo%20Andr%C3%A9%2C%20SP%2C%2009090-508!5e0!3m2!1spt-BR!2sbr!4v1660236529992!5m2!1spt-BR!2sbr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</main>
<footer class="main-footer">
<div class="default-container">
<div>
<a href="#" class="logo">
<h2 class="logo__text">lovet</h2>
<svg width="58" height="19" viewBox="0 0 58 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.92 18V0.36H4.184V18H0.92ZM13.6136 18.36C12.3096 18.36 11.1656 18.068 10.1816 17.484C9.19756 16.9 8.42956 16.096 7.87756 15.072C7.33356 14.04 7.06156 12.856 7.06156 11.52C7.06156 10.168 7.34156 8.98 7.90156 7.956C8.46156 6.924 9.23356 6.12 10.2176 5.544C11.2016 4.968 12.3336 4.68 13.6136 4.68C14.9176 4.68 16.0616 4.972 17.0456 5.556C18.0376 6.14 18.8096 6.948 19.3616 7.98C19.9136 9.004 20.1896 10.184 20.1896 11.52C20.1896 12.864 19.9096 14.052 19.3496 15.084C18.7976 16.108 18.0256 16.912 17.0336 17.496C16.0496 18.072 14.9096 18.36 13.6136 18.36ZM13.6136 15.312C14.6616 15.312 15.4416 14.96 15.9536 14.256C16.4736 13.544 16.7336 12.632 16.7336 11.52C16.7336 10.368 16.4696 9.448 15.9416 8.76C15.4216 8.072 14.6456 7.728 13.6136 7.728C12.9016 7.728 12.3176 7.888 11.8616 8.208C11.4056 8.528 11.0656 8.972 10.8416 9.54C10.6256 10.108 10.5176 10.768 10.5176 11.52C10.5176 12.68 10.7776 13.604 11.2976 14.292C11.8256 14.972 12.5976 15.312 13.6136 15.312ZM25.8637 18L21.1597 5.04H24.4237L27.4957 14.016L30.5677 5.04H33.8317L29.1277 18H25.8637ZM41.5556 18.36C40.2276 18.36 39.0556 18.076 38.0396 17.508C37.0316 16.932 36.2396 16.144 35.6636 15.144C35.0956 14.136 34.8116 12.984 34.8116 11.688C34.8116 10.272 35.0916 9.04 35.6516 7.992C36.2116 6.944 36.9836 6.132 37.9676 5.556C38.9516 4.972 40.0836 4.68 41.3636 4.68C42.7236 4.68 43.8796 5 44.8316 5.64C45.7836 6.28 46.4876 7.18 46.9436 8.34C47.3996 9.5 47.5596 10.864 47.4236 12.432H44.1956V11.232C44.1956 9.912 43.9836 8.964 43.5596 8.388C43.1436 7.804 42.4596 7.512 41.5076 7.512C40.3956 7.512 39.5756 7.852 39.0476 8.532C38.5276 9.204 38.2676 10.2 38.2676 11.52C38.2676 12.728 38.5276 13.664 39.0476 14.328C39.5756 14.984 40.3476 15.312 41.3636 15.312C42.0036 15.312 42.5516 15.172 43.0076 14.892C43.4636 14.612 43.8116 14.208 44.0516 13.68L47.3156 14.616C46.8276 15.8 46.0556 16.72 44.9996 17.376C43.9516 18.032 42.8036 18.36 41.5556 18.36ZM37.2596 12.432V10.008H45.8516V12.432H37.2596ZM57.1891 18C56.4611 18.152 55.7411 18.212 55.0291 18.18C54.3251 18.148 53.6931 17.996 53.1331 17.724C52.5811 17.452 52.1611 17.028 51.8731 16.452C51.6411 15.972 51.5131 15.488 51.4891 15C51.4731 14.504 51.4651 13.94 51.4651 13.308V1.44H53.2171V13.236C53.2171 13.78 53.2211 14.236 53.2291 14.604C53.2451 14.964 53.3291 15.284 53.4811 15.564C53.7691 16.1 54.2251 16.42 54.8491 16.524C55.4811 16.628 56.2611 16.604 57.1891 16.452V18ZM48.6931 6.552V5.04H57.1891V6.552H48.6931Z" fill="currentColor"/>
</svg>
</a>
<div class="main-footer__rights">
<p>©2022 - lovet.</p>
<p>Todos os direitos reservados.</p>
</div>
</div>
<ul class="social-media-list">
<h3 class="sr-only">Redes sociais</h3>
<li class="social-media-list__item">
<a href="#">
<span class="sr-only">Facebook</span>
<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.3333 20.0026C32.3338 17.7092 31.6771 15.4638 30.4409 13.532C29.2048 11.6003 27.441 10.0633 25.3584 9.10287C23.2758 8.14249 20.9617 7.799 18.6899 8.11307C16.4181 8.42714 14.2839 9.38562 12.54 10.875C10.7961 12.3644 9.5155 14.3224 8.84985 16.517C8.18419 18.7116 8.16137 21.0511 8.78407 23.2583C9.40677 25.4655 10.6489 27.448 12.3634 28.9712C14.078 30.4943 16.193 31.4943 18.4583 31.8526V23.4706H15.4123V20.0026H18.4583V17.3576C18.3928 16.7404 18.464 16.1163 18.6665 15.5296C18.8691 14.9429 19.1982 14.4079 19.6305 13.9625C20.0629 13.5171 20.5878 13.1722 21.1682 12.9522C21.7486 12.7323 22.3703 12.6426 22.9893 12.6896C23.8893 12.7016 24.7873 12.7796 25.6763 12.9236V15.8806H24.1643C23.9067 15.8468 23.6448 15.8714 23.398 15.9526C23.1512 16.0337 22.9259 16.1694 22.7386 16.3494C22.5513 16.5295 22.407 16.7494 22.3162 16.9928C22.2254 17.2362 22.1906 17.4969 22.2143 17.7556V20.0056H25.5423L25.0103 23.4736H22.2083V31.8606C25.0317 31.414 27.603 29.9741 29.4591 27.8002C31.3153 25.6263 32.3345 22.8612 32.3333 20.0026Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="social-media-list__item">
<a href="#">
<span class="sr-only">Twitter</span>
<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.6666 12.25C31.7666 12.7 30.8666 12.85 29.8166 13C30.8666 12.4 31.6166 11.5 31.9166 10.3C31.0166 10.9 29.9666 11.2 28.7666 11.5C27.8666 10.6 26.5166 10 25.1666 10C22.6166 10 20.3666 12.25 20.3666 14.95C20.3666 15.4 20.3666 15.7 20.5166 16C16.4666 15.85 12.7166 13.9 10.3166 10.9C9.86663 11.65 9.71663 12.4 9.71663 13.45C9.71663 15.1 10.6166 16.6 11.9666 17.5C11.2166 17.5 10.4666 17.2 9.71663 16.9C9.71663 19.3 11.3666 21.25 13.6166 21.7C13.1666 21.85 12.7166 21.85 12.2666 21.85C11.9666 21.85 11.6666 21.85 11.3666 21.7C11.9666 23.65 13.7666 25.15 16.0166 25.15C14.3666 26.5 12.2666 27.25 9.86663 27.25H8.66663C10.9166 28.6 13.4666 29.5 16.1666 29.5C25.1666 29.5 30.1166 22 30.1166 15.55V14.95C31.1666 14.2 32.0666 13.3 32.6666 12.25Z" fill="currentColor"/>
</svg>
</a>
</li>
<li class="social-media-list__item">
<a href="#">
<span class="sr-only">Instagram</span>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.2361 15.4582C26.9661 15.7283 26.5998 15.88 26.2179 15.88C25.8359 15.88 25.4697 15.7283 25.1996 15.4582C24.9296 15.1882 24.7779 14.8219 24.7779 14.44C24.7779 14.0581 24.9296 13.6918 25.1996 13.4218C25.4697 13.1517 25.8359 13 26.2179 13C26.5998 13 26.9661 13.1517 27.2361 13.4218C27.5062 13.6918 27.6579 14.0581 27.6579 14.44C27.6579 14.8219 27.5062 15.1882 27.2361 15.4582Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9999 20.602C13.9999 23.911 16.6909 26.602 19.9999 26.602C23.3089 26.602 25.9999 23.911 25.9999 20.602C25.9999 17.293 23.3089 14.602 19.9999 14.602C16.6909 14.602 13.9999 17.293 13.9999 20.602ZM16.9999 20.602C16.9999 18.947 18.3448 17.602 19.9999 17.602C21.6549 17.602 22.9999 18.947 22.9999 20.602C22.9999 22.257 21.6549 23.602 19.9999 23.602C18.3448 23.602 16.9999 22.257 16.9999 20.602Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99988 26C7.99988 29.084 10.9159 32 13.9999 32H25.9999C29.0839 32 31.9999 29.084 31.9999 26V14C31.9999 10.916 29.0839 8 25.9999 8H13.9999C10.9159 8 7.99988 10.916 7.99988 14V26ZM10.9999 14C10.9999 12.598 12.5979 11 13.9999 11H25.9999C27.4019 11 28.9999 12.598 28.9999 14V26C28.9999 27.402 27.4019 29 25.9999 29H13.9999C12.5699 29 10.9999 27.43 10.9999 26V14Z" fill="currentColor"/>
</svg>
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>