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

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

References

maxImposta il valore numerico o temporale massimo per un elemento input
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
srcIndica la provenienza di una risorsa esterna (tramite URL).
<h5>Titolo di intestazione di quinto livello
<tbody>Definisce il contenuto principale di una tabella.
<p>Serve a definire paragrafi di testo

Users

Log in to search for users

Explore

Find inspiration

test-border-on-wrap

Quiz ristrutturazione

La volpe e la cicogna(2)

Brawl Stars final

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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;
}