webhost/index.html at main · Aktarus70/webhost · GitHub

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
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marina del Sole – Porto Turistico di Lusso | Ormeggi Premium & Yacht Club</title>
    <meta name="description" content="Marina del Sole: porto turistico di lusso con ormeggi premium, yacht club. Servizi esclusivi per yacht e imbarcazioni.">
    <meta name="keywords" content="marina del sole, porto turistico di lusso, ormeggi yacht, yacht club, cantiere nautico, marina premium, servizi nautici, ormeggi barche">
    <meta property="og:title" content="Marina del Sole – Porto Turistico di Lusso">
    <meta property="og:description" content="Ormeggi premium, yacht club, ristorante vista fiume e servizi nautici esclusivi.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.marinadelsole.it/">
    <meta property="og:image" content="https://www.marinadelsole.it/darsena1.jpg">

    <!-- Bootstrap 5 CDN SOLO per carousel e griglia-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Google Fonts (Titoli, corpo, CTA) -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&family=Roboto:wght@500&display=swap" rel="stylesheet">
    <!-- FontAwesome per icone social -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">
    <style>
        /* rimuovo sottolineatura e imposta colore hover*/
        .dev-link {
            text-decoration: none !important;
            color: #e7eeec !important;
            font-size: 0.89em;
            font-family: var(--font-cta);
        }
        .dev-link:hover, .dev-link:focus {
            color: var(--color-gold) !important;
            text-decoration: none !important;
        }

        /* Fix video hero - elimina flickering */
        .hero-video {
            opacity: 0;
            transition: opacity 0.6s ease-in-out;
        }
        .hero-video.loaded {
            opacity: 1;
        }

        /* Loader video opzionale */
        .video-loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        .video-loader.hidden {
            opacity: 0;
            pointer-events: none;
        }
        .spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- HEADER: Sticky, navigazione orizzontale -->
    <header id="header" class="sticky-top bg-white shadow-sm" aria-label="Principale">
        <nav class="navbar navbar-expand-lg navbar-dark container py-2" role="navigation">
    <a href="./index.html" class="navbar-brand d-flex align-items-center me-auto">
        <img src="Immagine.png" alt="Logo Marina del Sole" height="55">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Coordinate mobile: centro, sempre visibile su mobile -->
    <span class="navbar-text d-flex d-lg-none w-100 justify-content-center align-items-center geo-mobile-center" style="white-space:nowrap;font-size:1.1rem;">
        <a href="https://maps.google.com/?q=45.181583,12.269222" target="_blank" rel="noopener" class="geo-link">
             45°10'53.48"N 12°16'09.2"E
        </a>

    </span>
    <div class="collapse navbar-collapse justify-content-center" id="mainNavbar">
        <ul class="navbar-nav mx-auto mb-2 mb-lg-0 gap-lg-4">
            <li class="nav-item"><a href="#hero" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#chi-siamo" class="nav-link">Chi Siamo</a></li>
            <li class="nav-item"><a href="#servizi" class="nav-link">Servizi</a></li>
            <li class="nav-item"><a href="./prenota.html" class="nav-link">Posti Barca</a></li>
            <li class="nav-item"><a href="#contatti" class="nav-link">Contatti</a></li>
        </ul>
        <!-- Coordinate desktop: destra -->
        <span class="navbar-text d-none d-lg-flex align-items-center geo-desktop-right ms-3" style="white-space:nowrap;font-size:1.1rem;">
            <a href="https://maps.google.com/?q=45.181583,12.269222" target="_blank" rel="noopener" class="geo-link">
                45°10'53.48"N 12°16'09.2"E
            </a>
        </span>
    </div>
</nav>
    </header>

    <!-- HERO SECTION con video MP4 ottimizzato -->
    <section id="hero" class="hero-section position-relative" style="min-height:55vh;">
        <!-- Loader opzionale durante caricamento video -->
        <div class="video-loader" id="videoLoader">
            <div class="spinner"></div>
        </div>

        <!-- Video background con preload ottimizzato -->
        <video
            class="hero-video w-100 h-100 position-absolute top-0 start-0"
            id="heroVideo"
            style="object-fit:cover; min-height:55vh; z-index:0;"
            autoplay
            muted
            loop
            playsinline
            preload="auto"
            poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080'%3E%3Crect fill='%231766a6' width='1920' height='1080'/%3E%3C/svg%3E"
        >
            <source src="hero.mp4" type="video/mp4">
            Il tuo browser non supporta il video HTML5.
        </video>

        <!-- Overlay testo hero sopra il video -->
        <div class="carousel-caption d-flex flex-column justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100" style="background: rgba(0,0,0,0.28); z-index:1;">
            <h1 class="display-1 fw-bold text-white text-shadow">Marina del Sole</h1>
            <h2>Il tuo approdo sicuro</h2>
            <a href="#servizi" class="cta-btn btn btn-lg mt-3">Prenota il tuo approdo esclusivo</a>
        </div>
    </section>

    <!-- CHI SIAMO -->
    <section id="chi-siamo" class="container py-5 chi-siamo-section">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <h2 class="section-title">Chi Siamo</h2>
                <p>
                    Marina del Sole è il porto turistico di riferimento per gli amanti della nautica in acque dolci. Fondato nel 1985, offriamo ormeggi sicuri, un esclusivo yacht club e un cantiere nautico specializzato nel refitting di imbarcazioni fino a 25 metri. La nostra missione: unire tradizione marinara e comfort esclusivo.
                </p>
            </div>
            <div class="col-lg-6 text-center">
                <img src="darsena2.jpg" class="img-fluid rounded shadow-lg" alt="Vista Porto Marina del Sole" loading="lazy">
            </div>
        </div>
    </section>

    <!-- SERVIZI -->
    <section id="servizi" class="py-5 bg-light">
        <div class="container">
            <h2 class="section-title text-center mb-4">I Nostri Servizi</h2>
            <div class="row justify-content-center gx-0 gy-0">
                <div class="col-12 col-md-6 col-lg-6 d-flex">
                    <div class="servizi-card flex-fill p-3 text-center rounded shadow-sm m-0">
                        <img src="./darsena1.jpg" class="mb-3 rounded card-img-uniform" alt="Ormeggi Premium (Pexels)" width="100%" loading="lazy">
                        <div class="card-content">
                            <h5>Ormeggi Premium</h5>
                            <p>I nostri posti barca sono progettati per offrire la massima comodità e sicurezza. Ampi e ben attrezzati, sono dotati di assistenza h24 per garantire la tranquillità dei nostri ospiti. I servizi integrati a terra includono elettricità, acqua, Wi-Fi e molto altro, per rendere il tuo soggiorno in acqua il più piacevole possibile. Il nostro team è sempre disponibile per aiutarti con le tue esigenze, dalle riparazioni alle raccomandazioni per esplorare la zona. Goditi il tuo tempo in acqua con noi, in un ambiente protetto e curato nei minimi dettagli. Siamo qui per aiutarti a creare ricordi indimenticabili.</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-6 d-flex">
                    <div class="servizi-card flex-fill p-3 text-center rounded shadow-sm m-0">
                        <img src="./travelift.jpg" class="mb-3 rounded card-img-uniform" alt="Cantiere Nautico (Unsplash)" width="100%" loading="lazy">
                        <div class="card-content">
                            <h5>Cantiere Nautico</h5>
                            <p>Il nostro cantiere nautico è equipaggiato con le migliori tecnologie e personale altamente qualificato per offrire servizi di riparazione, refitting e manutenzione per imbarcazioni fino a 25m. Dai lavori di ordinaria manutenzione alle riparazioni più complesse. Il nostro obiettivo è quello di mantenere la tua imbarcazione in condizioni ottimali, garantendo la tua sicurezza e il tuo piacere di navigare. Affidati a noi per tutte le tue esigenze di manutenzione. Scopri la differenza che fa la nostra esperienza e professionalità, in modo che tu possa goderti il mare in tutta sicurezza e tranquillità.</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-6 d-flex">
                    <div class="servizi-card flex-fill p-3 text-center rounded shadow-sm m-0">
                        <img src="./yachtclub1.jpg" class="mb-3 rounded card-img-uniform" alt="Yacht Club Esclusivo" width="100%" loading="lazy">
                        <div class="card-content">
                            <h5>Yacht Club Esclusivo</h5>
                            <p>Benvenuti al nostro Yacht Club esclusivo! Come socio, avrai accesso a un mondo di privilegi e servizi di alta qualità. Goditi la nostra piscina, perfetta per rilassarti e socializzare con altri appassionati di mare. Partecipa ai nostri eventi esclusivi, dalle cene di gala ad eventi sportivi, crea ricordi indimenticabili con la nostra comunità. <br>Il nostro club è progettato per offrire un'esperienza unica e personalizzata, con servizi e strutture pensate per soddisfare ogni tua esigenza. Unisciti a noi e diventa parte di una comunità di appassionati di mare che condividono la tua passione.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FORM CONTATTI -->
    <section id="contatti" class="container py-5">
        <h2 class="section-title text-center mb-4">Contattaci</h2>
        <form id="contactForm" action="https://formspree.io/f/yourFormId" method="POST" novalidate autocomplete="off" aria-label="Modulo di contatto">
            <div class="row g-3">
                <div class="col-md-6">
                    <label for="nome" class="form-label">Nome*</label>
                    <input type="text" class="form-control" id="nome" name="nome" required minlength="2" pattern="[A-Za-zÀ-ÖØ-öø-ÿ\s\-]+" aria-required="true" aria-describedby="nomeHelp">
                    <div id="nomeError" class="invalid-feedback"></div>
                </div>
                <div class="col-md-6">
                    <label for="cognome" class="form-label">Cognome*</label>
                    <input type="text" class="form-control" id="cognome" name="cognome" required minlength="2" pattern="[A-Za-zÀ-ÖØ-öø-ÿ\s\-]+" aria-required="true" aria-describedby="cognomeHelp">
                    <div id="cognomeError" class="invalid-feedback"></div>
                </div>
                <div class="col-md-6">
                    <label for="dob" class="form-label">Data di nascita* <span class="text-muted small">(gg/mm/aaaa, ≥ 18 anni)</span></label>
                    <input type="text" class="form-control" id="dob" name="dob" required pattern="\d{2}/\d{2}/\d{4}" aria-required="true" aria-describedby="dobHelp" placeholder="Es: 13/09/1990">
                    <div id="dobError" class="invalid-feedback"></div>
                </div>
                <div class="col-md-6">
                    <label for="localita" class="form-label">Località di residenza</label>
                    <input type="text" class="form-control" id="localita" name="localita" aria-describedby="localitaHelp">
                </div>
                <div class="col-12">
                    <label for="messaggio" class="form-label">Messaggio*</label>
                    <textarea class="form-control" id="messaggio" name="messaggio" required minlength="10" rows="4" aria-required="true" aria-describedby="messaggioHelp"></textarea>
                    <div id="messaggioError" class="invalid-feedback"></div>
                </div>
            </div>
            <button type="submit" class="btn submit-btn mt-4" id="submitBtn">Invia</button>
        </form>
    </section>

    <!-- FOOTER -->
    <footer class="footer py-3 px-4 d-flex justify-content-between align-items-center bg-white border-top" role="contentinfo">
        <span class="developed-by"><a href="https://www.linkedin.com/in/attilio-comes-b0248159/" target="_blank" rel="noopener" class="dev-link">Codebase dev'd by Attilio Comes</a></span>
        <span class="social-icons d-flex gap-3">
            <a href="tel:+39041490896" aria-label="Chiama Marina del Sole" class="text-dark"><i class="fas fa-phone fa-lg"></i></a>
            <a href="https://www.facebook.com/marinadelsolechioggia/?locale=it_IT" aria-label="Facebook" class="text-dark"><i class="fab fa-facebook fa-lg"></i></a>
            <a href="https://www.instagram.com/explore/locations/1024565268/osteria-marina-del-sole/" aria-label="Instagram" class="text-dark"><i class="fab fa-instagram fa-lg"></i></a>
            <a href="https://www.youtube.com/watch?v=756mxwyo0b4" aria-label="YouTube" class="text-dark"><i class="fab fa-youtube fa-lg"></i></a>
        </span>
    </footer>

    <!-- Bootstrap JS (solo carousel e griglia) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Custom JS -->
    <script src="script.js"></script>
</body>
</html>