-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (171 loc) · 9.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Versilia Detailing Website">
<title>Versilia Detailing</title>
<link rel="icon" type="image/x-icon" href="Images/loghi/favicon.ico">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<input type="checkbox" id="sidebar-active">
<label id="overlay" for="sidebar-active"></label>
<div class="link-section">
<a href="index.html">
<div class="logo-container">
<img src="Images/loghi/logo ultimo.webp" alt="Versilia Detailing Logo" class="logo">
<label class="service-name">Versilia Detailing</label>
</div>
</a>
<label for="sidebar-active" class="close-sidebar-button">
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#FFFFFF"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
</label>
<ul class="nav-links">
<li><a href="#">Cos'è il detailing</a></li>
<li class="pipe">|</li>
<li><a href="servizi.html">Prezzi e Servizi</a></li>
<li class="pipe">|</li>
<li><a href="galleria.html">Galleria</a></li>
<li class="pipe">|</li>
<li><a href="tel:3887367442"><u>+39 388 736 7442</u></a></li>
<li class="pipe">|</li>
<li class="li-prenota"><button class="navbar-prenota" onclick="scrolldown()">Prenota</button></li>
</ul>
</div>
<label for="sidebar-active" class="open-sidebar-button">
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#FFFFFF"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
</label>
</nav>
</header>
<div class="video-container snap">
<video autoplay muted loop plays-inline src="Images/main-video.mp4" type="video/mp4" width="1080px" height="1920px">
<track src="fgsubtitles_en.vtt" kind="captions" srclang="en" label="English">
</video>
</div>
<section class="snap">
<div class="hero-content">
<div class="text-item">
<div class="text">
<h1>IL PRIMO AUTOLAVAGGIO CHE VIENE DA TE</h1>
<p>Sappiamo quanto sia prezioso il tuo tempo. Ecco perché offriamo un servizio rapido, direttamente a casa tua.</p>
</div>
<button type="button" onclick="scrolldown()">Prenota Un Appuntamento</button>
</div>
</div>
</section>
<section class="snap">
<div class="explanation-container">
<h1>Come funziona?</h1>
<div class="explanation-step hidden">
<div class="text">
<h1>1.</h1><p>COMPILA IL MODULO: Il primo passo è compilare il modulo di contatto con i tuoi dati e il modello dell'auto. Puoi aggiungere richieste particolari o domande. Una volta inviato, sarai ricontattato per discutere insieme i dettagli dell'appuntamento, tra cui data, orario e servizi.</p>
</div>
<img src="Images/Galleria/honda_red_front.webp" class="image" alt="honda red honda_red_front">
</div>
<div class="explanation-step hidden">
<img src="Images/Galleria/bmw1.webp" class="image" alt="bmw picture">
<div class="text">
<h1>2.</h1><p>ASPETTA COMODAMENTE: Dopo aver stabilito i dettagli con il nostro team, non dovrai fare altro che attendere comodamente a casa tua. Il nostro staff si presenterà all’orario concordato, eliminando la necessità di recarti presso un autolavaggio tradizionale.</p>
</div>
</div>
<div class="explanation-step hidden">
<div class="text">
<h1>3.</h1><p>LAVAGGIO SUL POSTO: Il nostro team arriverà al tuo domicilio con tutta l’attrezzatura necessaria (acqua compresa) per eseguire un lavaggio professionale della tua auto utilizzando prodotti di alta qualità per garantire una pulizia impeccabile, lasciando la tua auto perfettamente pulita e brillante.</p>
</div>
<img src="Images/foto video vari/audi-hero-original.webp" class="image" alt="audi picture">
</div>
</div>
</section>
<section class="snap">
<div class="works-container">
<h1>I Nostri Lavori</h1>
<div class="works-panel">
<div class="works-item item-1">
<img defer src="Images/Galleria/audi_white_front.webp" alt="Immagine Lavori 1">
</div>
<div class="works-item item-2">
<img defer src="Images/Lavori/lavori2.webp" alt="Immagine Lavori 2">
</div>
<div class="works-item item-3">
<img defer src="Images/Lavori/lavori5.webp" alt="Immagine Lavori 3">
</div>
<div class="works-item item-4">
<img defer src="Images/Lavori/lavori4.webp" alt="Immagine Lavori 4">
</div>
<div class="works-item item-5">
<img defer src="Images/Galleria/honda_red_wash.webp" alt="Immagine Lavori 3">
</div>
<div class="works-item item-6">
<img defer src="Images/Galleria/bmw1.webp" alt="Immagine Lavori 6">
</div>
</div>
</div>
</section>
<section class="panel contact snap">
<div class="contact-panel" id="contact_panel">
<div class="info-container">
<h2>Leggere attentamente prima di prenotare un appuntamento</h2>
<ul>
<li>Il pagamento potrà essere effettuato in contanti, tramite bonifico bancario o paypal</li>
<li>Vi preghiamo di rimuovere gli oggetti personali dal vostro veicolo prima dell'inizio dei lavori</li>
<li>I nostri prezzi sono indicativi. Ci riserviamo il diritto di addebitare un extra per livelli irragionevoli di sporcizia, peli di animali, vomito, disordine eccessivo o qualsiasi altra cosa che richieda tempo e sforzi aggiuntivi per essere corretta.</li>
<li>In caso di condizioni metereologiche avverse, cerchiamo sempre di portare a termine il lavoro, ma potrebbe essere necessario riprogrammarlo.</li>
<li>Abbiamo bisogno di accesso alla corrente elettrica nel luogo concordato per svolgere qualsiasi lavoro. È richiesta una presa di corrente entro 30 metri</li>
</ul>
</div>
<div class="contact-container">
<h1>Contattaci</h1>
<form action="https://api.web3forms.com/submit" method="POST">
<input type="hidden" name="access_key" value="f578e7ee-03e3-4b5f-bb9b-3483dbe32ce5">
<input type="hidden" name="subject" value="Nuovo Cliente">
<input type="checkbox" name="botcheck" class="hidden" style="display: none;">
<input type="text" id="form-name" name="name" placeholder="Nome" class="contact-input" maxlength='20' required>
<input type="text" id="form-surname" name="surname" placeholder="Cognome" class="contact-input" maxlength='20' required>
<input type="email" id="form-email" name="email" placeholder="Email" class="contact-input span-two" maxlength='40' required>
<input type="tel" id="form-phone" name="phone" placeholder="Telefono" maxlength='12' class="contact-input span-two" required>
<textarea name="Messaggio" id="form-message" placeholder="Località, modello auto e ulteriori informazioni" class="contact-input column-two row-two"></textarea>
<button id="form-submit" onclick="clearform()" type="submit" class="submit-button span-two">Invia</button>
</form>
</div>
</div>
</section>
<footer>
<div class="contact-footer">
<div class="contact-info-container">
<div class="contact-box">
<a href="tel:3887367442">
<img src="Images/Icons/phone_social_icon.svg" width="32px" height="32px" alt="phone icon">
<u>+39 388 736 7442</u>
</a>
</div>
<div class="contact-box">
<a href="mailto:versilia.detailing@gmail.com">
<img src="Images/Icons/mail_message_send_icon.svg" width="32px" height="32px" alt="message icon">
<u>versilia.detailing@gmail.com</u>
</a>
</div>
<div class="contact-box">
<a href="https://www.instagram.com/versilia.detailing/">
<img src="Images/Icons/instagram logo_icon.svg" width="32px" height="32px" alt="Instagram icon">
<u>Instagram</u>
</a>
</div>
<div class="contact-box">
<a href="https://www.facebook.com/profile.php?id=61562475505929&locale=it_IT">
<img src="Images/Icons/facebook logo_icon.svg" width="32px" height="32px" alt="facebook icon">
<u>Facebook</u>
</a>
</div>
</div>
</div>
</footer>
<script src='script.js'></script>
</body>
</html>
<!--
- pagina prezzi e servizi + popup sconto
- pagina cos'è versilia detailing
-->