-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
184 lines (171 loc) · 14.9 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>R&R FUNILARIA E PINTURA</title>
<link rel="stylesheet" href="./src/style/style-desktop.css">
<link rel="stylesheet" href="./src/style/styles-mobile.css">
<link rel="stylesheet" href="./src/style/hover.css">
<link rel="stylesheet" href="./src/style/root.css">
<link rel="icon" type="image/x-icon" href="./src/imgs/favicon.svg">
</head>
<body>
<main>
<header>
<img src="./src/imgs/rr-logo.svg" alt="rr-logo">
<nav>
<a href="#home">Home</a>
<a href="#about-us">Sobre nós</a>
<a href="#cards">Diferencial</a>
<a href="#contacts">Contato</a>
</nav>
<button type="button">Fale Conosco <img src="./src/imgs/whats-icon.svg" alt="whats"></button>
</header>
<div class="text-wrapper header-wrapper">
<h1>Facilidade, com qualidade</h1>
<p>Sua mecânica favorita está ao alcance de um clique <br>
Consulte nossos serviços on-line de forma fácil e rápida!</p>
<button>Descubra <svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 7.5L7 21.5M9.33333 7.5H21V19.1667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</main>
<section id="about-us">
<h1>QUEM SOMOS</h1>
<div class="info-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
<img src="./src/imgs/img-background/man-on-engine.svg" alt="man-doing-engines">
</div>
</section>
<div class="brands-list">
<div class="icons-wrapper">
<img src="./src/imgs/carousel-icons/audi.svg" alt="audi-icon">
<img src="./src/imgs/carousel-icons/chevrolet.svg" alt="chevrolet-icon">
<img src="./src/imgs/carousel-icons/citroen.svg" alt="citroen-icon">
<img src="./src/imgs/carousel-icons/fiat.svg" alt="fiat-icon">
<img src="./src/imgs/carousel-icons/ford.svg" alt="ford-icon">
<img src="./src/imgs/carousel-icons/honda.svg" alt="honda-icon">
<img src="./src/imgs/carousel-icons/hyundai.svg" alt="hyundai-icon">
<img src="./src/imgs/carousel-icons/infiniti.svg" alt="infiniti-icon">
<img src="./src/imgs/carousel-icons/jeep.svg" alt="jeep-icon">
<img src="./src/imgs/carousel-icons/mazda.svg" alt="mazda-icon">
<img src="./src/imgs/carousel-icons/mitsubishi.svg" alt="mitsubishi-icon">
<img src="./src/imgs/carousel-icons/nissan.svg" alt="nissan-icon">
<img src="./src/imgs/carousel-icons/toyota.svg" alt="toyota-icon">
<img src="./src/imgs/carousel-icons/volkswagen.svg" alt="volkswagen-icon">
<img src="./src/imgs/carousel-icons/audi.svg" alt="audi-icon">
<img src="./src/imgs/carousel-icons/chevrolet.svg" alt="chevrolet-icon">
<img src="./src/imgs/carousel-icons/citroen.svg" alt="citroen-icon">
<img src="./src/imgs/carousel-icons/fiat.svg" alt="fiat-icon">
<img src="./src/imgs/carousel-icons/ford.svg" alt="ford-icon">
<img src="./src/imgs/carousel-icons/honda.svg" alt="honda-icon">
<img src="./src/imgs/carousel-icons/hyundai.svg" alt="hyundai-icon">
<img src="./src/imgs/carousel-icons/infiniti.svg" alt="infiniti-icon">
<img src="./src/imgs/carousel-icons/jeep.svg" alt="jeep-icon">
<img src="./src/imgs/carousel-icons/mazda.svg" alt="mazda-icon">
<img src="./src/imgs/carousel-icons/mitsubishi.svg" alt="mitsubishi-icon">
<img src="./src/imgs/carousel-icons/nissan.svg" alt="nissan-icon">
<img src="./src/imgs/carousel-icons/toyota.svg" alt="toyota-icon">
<img src="./src/imgs/carousel-icons/volkswagen.svg" alt="volkswagen-icon">
</div>
</div>
<section class="cards-section" id="cards">
<h1>DIFERENCIAL</h1>
<div class="cards">
<div class="card green-card">
<img src="./src/imgs/location.svg" alt="location-icon">
<div class="card-wrapper">
<h3>ÓTIMA LOCALIZAÇÃO</h3>
<p>Após deixar seu carro, você não terá problemas para pedir um carro de app!
</p>
<a href="#map">Clique aqui para abrir o mapa.</a>
</div>
</div>
<div class="card yellow-card">
<img src="./src/imgs/car.svg" alt="car-icon">
<div class="card-wrapper">
<h3>ATENDIMENTO CUIDADOSO</h3>
<p>Cuidamos do seu carro com carinho e capricho, respeitando o seu patrimônio.</p>
</div>
</div>
<div class="card red-card">
<img src="./src/imgs/cash.svg" alt="-cash-icon">
<div class="card-wrapper">
<h3>CONDIÇÕES ESPECIAIS</h3>
<p>Condições especiais para frotistas e motoristas de aplicativo.</p>
</div>
</div>
</div>
</section>
<article id="contacts">
<div class="text-wrapper">
<h1>Contato</h1>
<p>Para mais informações sobre atendimento ou serviços preencha o formulário para resposta por name ou nos
ligue.</p>
</div>
<form>
<div class="column">
<input placeholder="Nome" type="name" name="name" id="name">
<input placeholder="E-mail" type="email" name="email" id="email">
</div>
<div class="column">
<input placeholder="Telefone" type="tel" name="tel" id="tel">
<input placeholder="Localização" type="location" name="location" id="location">
</div>
<textarea placeholder="Mensagem" name="message" id="message" cols="30" rows="10"></textarea>
<button type="submit">Enviar</button>
</form>
</article>
<map>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d383.96932866386163!2d-46.6961522899673!3d-23.71339164180655!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce4fa135bebfe3%3A0x9154174e3715f25c!2sR%26R%20Funilaria%20e%20Pintura!5e0!3m2!1spt-PT!2sbr!4v1714695596499!5m2!1spt-PT!2sbr"
id="map" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</map>
<footer>
<h1>R&R Funilaria e Pintura</h1>
<div>
<div class="footer-wrapper">
<h3>Localização</h3>
<a target="_blank"
href="https://www.google.com/maps/place/R%26R+Funilaria+e+Pintura/@-23.713605,-46.696096,20z/data=!4m6!3m5!1s0x94ce4fa135bebfe3:0x9154174e3715f25c!8m2!3d-23.713604!4d-46.696081!16s%2Fg%2F11c1s1111g?hl=pt-PT&entry=ttu">Rua
Antônio Le Voci, 415 - Terceira Divisão de Interlagos, São Paulo - SP, 04809-220</a>
</div>
<div class="footer-wrapper">
<h3>Acesso Rápido</h3>
<a href="#about-us">Quem Somos</a>
<a href="#cards">Diferencial</a>
<a href="#contacts">Contato</a>
</div>
<div class="footer-wrapper">
<h3>Email</h3>
</div>
<div class="footer-wrapper">
<h3>Ligue já</h3>
<p>+55 11 94758-5251</p>
<div class="footer-icons">
<a href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 17.9333 4.33333 22.8667 10 23.8667L10.0669 23.8132C10.0446 23.8088 10.0223 23.8045 10 23.8V15.3333H7V12H10V9.33333C10 6.33333 11.9333 4.66667 14.6667 4.66667C15.5333 4.66667 16.4667 4.8 17.3333 4.93333V8H15.8C14.3333 8 14 8.73333 14 9.66667V12H17.2L16.6667 15.3333H14V23.8C13.9777 23.8045 13.9554 23.8088 13.9331 23.8132L14 23.8667C19.6667 22.8667 24 17.9333 24 12C24 5.4 18.6 0 12 0C5.4 0 0 5.4 0 12Z" fill="#AAAAAA"/>
</svg>
</a>
<a href="#">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.6767 15.6655L14.6595 15.6827L14.6486 15.7045C14.6095 15.7827 14.5604 15.8102 14.5069 15.8178C14.4437 15.8268 14.3558 15.8098 14.2506 15.7572L14.2507 15.757L14.2426 15.7535C13.4161 15.3993 12.5924 14.9284 11.8878 14.3423C11.2989 13.7528 10.7104 13.0465 10.2391 12.341C10.1661 12.1849 10.2398 12.0173 10.3345 11.9225C10.372 11.8851 10.4072 11.8407 10.4389 11.7996C10.4463 11.7901 10.4535 11.7807 10.4606 11.7714C10.4862 11.7381 10.511 11.7057 10.5385 11.6728C10.6077 11.5897 10.6819 11.5178 10.7749 11.4712L10.7967 11.4604L10.8139 11.4431C10.8887 11.3684 10.9572 11.2637 11.0068 11.1645C11.0444 11.0893 11.0796 11.0006 11.0924 10.9189C11.159 10.8301 11.1875 10.7197 11.1875 10.618C11.1875 10.4992 11.1487 10.3687 11.0558 10.2744C11.0552 10.2736 11.0521 10.2695 11.0461 10.2601C11.0376 10.2469 11.0268 10.2283 11.0135 10.204C10.987 10.1554 10.9542 10.0898 10.9163 10.0104C10.8407 9.85171 10.7479 9.64388 10.6507 9.41976C10.4602 8.97998 10.2551 8.48228 10.1347 8.18179C10.074 7.76867 9.97997 7.52065 9.84015 7.38083C9.69099 7.23167 9.51534 7.23188 9.39973 7.23201C9.39627 7.23202 9.39286 7.23202 9.38951 7.23202H8.79026C8.63035 7.23202 8.45235 7.30827 8.31292 7.38573C8.16959 7.46536 8.03747 7.56314 7.9651 7.63551C7.21976 8.38085 6.84251 9.25724 6.84251 10.2584V10.2667L6.84343 10.275C6.96562 11.3748 7.33265 12.479 8.06914 13.462C9.39927 15.396 11.0958 16.9729 13.1608 17.9447L13.1607 17.945L13.169 17.9483C13.3004 18.0008 13.4275 18.0541 13.5526 18.1066C13.9813 18.2864 14.3868 18.4564 14.8598 18.5526C15.49 18.8013 16.1163 18.7973 16.8432 18.6763C17.7383 18.5478 18.4895 17.9126 18.9825 17.1731L18.9877 17.1653L18.9918 17.157C19.2517 16.6372 19.249 16.1191 19.123 15.6153L19.1063 15.5484L19.0446 15.5175L18.5652 15.2778C18.4435 15.217 17.9948 15.0076 17.549 14.7995L17.5428 14.7967C17.0917 14.5861 16.6452 14.3778 16.5278 14.319C16.3906 14.2504 16.2405 14.2097 16.0825 14.2294C15.9229 14.2494 15.7737 14.3288 15.6355 14.467C15.5081 14.5944 15.324 14.8398 15.1501 15.0717L15.1422 15.0823C14.9588 15.3267 14.787 15.5552 14.6767 15.6655ZM21.6033 4.40246L21.6033 4.40242L21.6004 4.39955C16.8677 -0.333184 9.22218 -0.333184 4.48944 4.39955C0.620251 8.26874 -0.116156 14.1848 2.51695 18.9073L0.855351 24.9603L0.786372 25.2116L1.03831 25.145L7.33362 23.4821C9.13736 24.4337 11.0606 24.9103 12.985 24.9103C19.6587 24.9103 24.9986 19.5713 25.0002 12.898C25.1209 9.73642 23.7831 6.7034 21.6033 4.40246ZM7.55428 21.1394L4.08748 22.0341L4.98014 18.6866L4.9976 18.6211L4.96001 18.5647L4.7223 18.2082C1.89035 13.4847 3.30708 7.58404 7.91241 4.6319C12.5124 1.68317 18.4127 3.21383 21.2473 7.70111C24.0816 12.3078 22.78 18.326 18.1798 21.1569C16.6417 22.1034 14.8708 22.6927 12.985 22.6927C11.2174 22.6927 9.56582 22.2222 8.02862 21.3956L7.67497 21.1598L7.61919 21.1227L7.55428 21.1394Z" fill="#AAAAAA" stroke="#AAAAAA" stroke-width="0.3"/>
</svg>
</a>
<a href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8582 0.363647C8.69809 0.363647 8.30149 0.377466 7.06032 0.433951C5.82157 0.490678 4.97602 0.686799 4.23616 0.974557C3.47085 1.27177 2.82166 1.66934 2.17489 2.31637C1.52764 2.96316 1.13007 3.61237 0.8319 4.37747C0.543424 5.11759 0.347067 5.96341 0.291311 7.20171C0.235797 8.44292 0.221252 8.83977 0.221252 12C0.221252 15.1603 0.235313 15.5556 0.291554 16.7969C0.348522 18.0356 0.544637 18.8812 0.832143 19.6211C1.12959 20.3864 1.52715 21.0356 2.17416 21.6824C2.82069 22.3297 3.46988 22.7283 4.23471 23.0255C4.97505 23.3132 5.82084 23.5093 7.05935 23.5661C8.30052 23.6226 8.69687 23.6364 11.8568 23.6364C15.0172 23.6364 15.4126 23.6226 16.6537 23.5661C17.8925 23.5093 18.739 23.3132 19.4793 23.0255C20.2444 22.7283 20.8926 22.3297 21.5392 21.6824C22.1864 21.0356 22.584 20.3864 22.8821 19.6213C23.1682 18.8812 23.3646 18.0354 23.4227 16.7971C23.4785 15.5559 23.493 15.1603 23.493 12C23.493 8.83977 23.4785 8.44316 23.4227 7.20195C23.3646 5.96316 23.1682 5.11759 22.8821 4.37771C22.584 3.61237 22.1864 2.96316 21.5392 2.31637C20.8919 1.6691 20.2446 1.27153 19.4786 0.974557C18.7368 0.686799 17.8908 0.490678 16.652 0.433951C15.4109 0.377466 15.0157 0.363647 11.8546 0.363647H11.8582ZM10.8144 2.46062C11.1242 2.46013 11.4699 2.46062 11.8582 2.46062C14.965 2.46062 15.3333 2.47177 16.5602 2.52753C17.6947 2.57941 18.3104 2.76898 18.7206 2.92825C19.2636 3.13916 19.6507 3.39128 20.0577 3.79856C20.465 4.20583 20.7171 4.59371 20.9285 5.13674C21.0878 5.54643 21.2776 6.16219 21.3292 7.29674C21.385 8.5234 21.3971 8.89189 21.3971 11.9973C21.3971 15.1028 21.385 15.4713 21.3292 16.698C21.2773 17.8325 21.0878 18.4483 20.9285 18.858C20.7176 19.401 20.465 19.7876 20.0577 20.1947C19.6505 20.6019 19.2638 20.8541 18.7206 21.065C18.3109 21.225 17.6947 21.4141 16.5602 21.466C15.3335 21.5217 14.965 21.5338 11.8582 21.5338C8.75117 21.5338 8.38295 21.5217 7.15632 21.466C6.0218 21.4136 5.40606 21.224 4.99565 21.0647C4.45264 20.8538 4.06477 20.6017 3.65751 20.1944C3.25025 19.7872 2.99814 19.4003 2.78675 18.857C2.62748 18.4473 2.43767 17.8315 2.38604 16.697C2.33028 15.4703 2.31913 15.1018 2.31913 11.9944C2.31913 8.88704 2.33028 8.5205 2.38604 7.29383C2.43791 6.15928 2.62748 5.54353 2.78675 5.13334C2.99765 4.59031 3.25025 4.20244 3.65751 3.79516C4.06477 3.38789 4.45264 3.13577 4.99565 2.92437C5.40582 2.76437 6.0218 2.57528 7.15632 2.52316C8.22974 2.47468 8.64573 2.46013 10.8144 2.45771V2.46062ZM18.0694 4.39274C17.2986 4.39274 16.6731 5.01747 16.6731 5.78862C16.6731 6.55953 17.2986 7.18498 18.0694 7.18498C18.8403 7.18498 19.4658 6.55953 19.4658 5.78862C19.4658 5.01771 18.8403 4.39225 18.0694 4.39225V4.39274ZM11.8582 6.02425C8.55821 6.02425 5.88266 8.69989 5.88266 12C5.88266 15.3001 8.55821 17.9746 11.8582 17.9746C15.1583 17.9746 17.8328 15.3001 17.8328 12C17.8328 8.69989 15.158 6.02425 11.858 6.02425H11.8582ZM11.8582 8.12122C14.0002 8.12122 15.7369 9.85771 15.7369 12C15.7369 14.1421 14.0002 15.8788 11.8582 15.8788C9.71599 15.8788 7.97956 14.1421 7.97956 12C7.97956 9.85771 9.71599 8.12122 11.8582 8.12122Z" fill="#AAAAAA"/>
</svg>
</a>
</div>
</div>
</div>
</footer>
</body>
</html>