One Magic Moment - Eventi Unici by @TomMullica - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

disabledImpedisce la modifica di un input
<tfoot>Definisce il footer o sezione inferiore di una tabella.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<h4>Titolo di intestazione di quarto livello
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
_blankApre i collegamenti ipertestuali in una nuova scheda del browser

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il mio primo file HTML

Heads Or Tails Random Tally

Lola Harrel Project 3

ESERCIZIO: LE REGIONI ITALIANE E

Test Gaming HTML MEME

JS Istruzioni condizionali es2

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>One Magic Moment - Eventi Unici</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <h1>One Magic Moment</h1>
    <p>Organizziamo feste a sorpresa indimenticabili</p>
</header>

<section id="chiSiamo">
    <h2>Chi Siamo</h2>
    <div class="chiSiamo-content">
        <div class="chiSiamo-text">
            <p>Benvenuti in One Magic Moment, dove ogni evento diventa una sorpresa indimenticabile. Il nostro team esperto ha più di 20 anni di esperienza nell'organizzazione di feste a sorpresa, rendendo ogni momento speciale e unico.</p>
        </div>
        <div class="chiSiamo-images">
            <!-- Immagini fittizie per esempio -->
            <img src="https://via.placeholder.com/300" alt="Immagini Team">
            <img src="https://via.placeholder.com/300" alt="Momenti Indimenticabili">
        </div>
    </div>
</section>

<section id="servizi">
    <h2>Servizi</h2>
    <div class="servizi-content">
        <div class="servizi-text">
            <p>Scopri i nostri servizi personalizzati per rendere ogni evento un'esperienza unica. Dai pacchetti per feste a sorpresa a eventi aziendali di lusso, curiamo ogni dettaglio con maestria. Esplora i nostri servizi e trasforma il tuo evento in qualcosa di straordinario.</p>
            <a href="#pacchetti">Scopri i Nostri Pacchetti</a>
            <a href="#galleria">Esplora la Nostra Galleria</a>
        </div>
        <div class="servizi-images">
            <!-- Immagini fittizie per esempio -->
            <img src="https://via.placeholder.com/300" alt="Pacchetti Personalizzati">
            <img src="https://via.placeholder.com/300" alt="Galleria Fotografica">
        </div>
    </div>
</section>

<section id="collaborazioni">
    <h2>Collaborazioni Esclusive</h2>
    <div class="collaborazioni-content">
        <div class="collaborazioni-text">
            <p>Intensifica l'esperienza del tuo evento con le nostre collaborazioni esclusive. Partner con locali di prestigio, aziende di lusso e fornitori di servizi di alta qualità. Ogni partnership è selezionata con cura per garantire vantaggi unici e un'esperienza senza pari per i nostri clienti.</p>
            <a href="#vantaggiCollaborazioni">Scopri i Vantaggi delle Collaborazioni</a>
        </div>
        <div class="collaborazioni-images">
            <!-- Immagini fittizie per esempio -->
            <img src="https://via.placeholder.com/300" alt="Locali di Prestigio">
            <img src="https://via.placeholder.com/300" alt="Aziende di Lusso">
        </div>
    </div>
</section>

<section id="contatti">
    <h2>Contatti e Richiesta Preventivo</h2>
    <p>Scopri come possiamo rendere unico il tuo prossimo evento! Compila il modulo di contatto e richiedi un preventivo personalizzato. Lascia che One Magic Moment trasformi il tuo evento in qualcosa di straordinario.</p>
    <form id="contattoForm">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="messaggio">Messaggio:</label>
        <textarea id="messaggio" name="messaggio" rows="4" required></textarea>

        <button type="submit">Invia Messaggio</button>
    </form>
</section>

<footer>
    <p>&copy; 2023 One Magic Moment</p>
</footer>

</body>
</html>

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #111;
    color: #fff;
}

header {
    text-align: center;
    padding: 50px 0;
    background-color: #222;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
}

header p {
    font-size: 1.2em;
    opacity: 0.8;
}

section {
    padding: 50px;
    background-color: #333;
    border-radius: 15px;
    margin-bottom: 20px;
}

h2 {
    color: #3498db; /* Cambiato il colore a uno più elegante */
}

p {
    opacity: 0.9;
}

.chiSiamo-content,
.servizi-content,
.collaborazioni-content,
.contatti-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chiSiamo-text,
.servizi-text,
.collaborazioni-text,
.contatti-text {
    flex: 1;
    margin-right: 20px;
}

.chiSiamo-images,
.servizi-images,
.collaborazioni-images,
.contatti-form {
    flex: 1;
}

.chiSiamo-images img,
.servizi-images img,
.collaborazioni-images img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 0; /* Aggiunto per ridurre lo spazio tra le immagini */
}

form {
    max-width: 600px;
    padding: 20px;
    background-color: #444;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

form label,
form input,
form textarea {
    color: #fff;
    display: block;
    width: 100%;
}

form input,
form textarea {
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #222;
    margin-bottom: 15px;
    padding: 10px;
}

form button {
    background-color: #3498db; /* Cambiato il colore a uno più elegante */
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form button:hover {
    background-color: #2980b9; /* Cambiato il colore a uno più elegante */
}

footer {
    text-align: center;
    padding: 20px 0;
    background-color: #222;
    color: #777;
    border-top: 1px solid #444;
}