Proposta di Matrimonio Assurda by @Adamm00 - Codewith.it

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

Referenze

<pre>Indica una parte di testo preformattato
formSpecifica a quale form appartiene un elemento.
<textarea>Area di testo libero espandibile per form HTML
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<html>Tag primario di un documento HTML
<table>Tag primario per la creazione di tabelle

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

cosa sono le specialità

mappa del malandrino

copia dicountdownfineanno

esercizi riepilogativi

ESERCIZIO 1.1 WEB

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>Proposta di Matrimonio Assurda</title>
        <!-- Bootstrap CSS -->
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
            <!-- Custom CSS -->
              <style>
                  body {
                        font-family: 'Arial', sans-serif;
                              background: linear-gradient(135deg, #ff9966, #ff5e62);
                                    color: white;
                                          text-align: center;
                                                height: 100vh;
                                                      display: flex;
                                                            align-items: center;
                                                                  justify-content: center;
                                                                        overflow: hidden;
                                                                            }

                                                                                h1 {
                                                                                      font-size: 4rem;
                                                                                            font-weight: bold;
                                                                                                  color: #ffffff;
                                                                                                        text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
                                                                                                              animation: rotate3D 5s infinite alternate;
                                                                                                                  }

                                                                                                                      p {
                                                                                                                            font-size: 1.5rem;
                                                                                                                                  margin-top: 1rem;
                                                                                                                                        color: rgba(255, 255, 255, 0.8);
                                                                                                                                            }

                                                                                                                                                .btn-propose {
                                                                                                                                                      margin-top: 3rem;
                                                                                                                                                            padding: 15px 40px;
                                                                                                                                                                  font-size: 1.5rem;
                                                                                                                                                                        color: white;
                                                                                                                                                                              border: none;
                                                                                                                                                                                    border-radius: 30px;
                                                                                                                                                                                          background-color: #ff5e62;
                                                                                                                                                                                                transition: all 0.5s ease;
                                                                                                                                                                                                      animation: bounce 2s infinite;
                                                                                                                                                                                                          }

                                                                                                                                                                                                              .btn-propose:hover {
                                                                                                                                                                                                                    background-color: #ffffff;
                                                                                                                                                                                                                          color: #ff5e62;
                                                                                                                                                                                                                                box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
                                                                                                                                                                                                                                      transform: scale(1.1);
                                                                                                                                                                                                                                          }

                                                                                                                                                                                                                                              @keyframes bounce {
                                                                                                                                                                                                                                                    0%, 100% {
                                                                                                                                                                                                                                                            transform: translateY(0);
                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                        50% {
                                                                                                                                                                                                                                                                                transform: translateY(-10px);
                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                          }

                                                                                                                                                                                                                                                                                              /* Animazione cuori sullo sfondo */
                                                                                                                                                                                                                                                                                                  .hearts {
                                                                                                                                                                                                                                                                                                        position: absolute;
                                                                                                                                                                                                                                                                                                              top: 0;
                                                                                                                                                                                                                                                                                                                    left: 0;
                                                                                                                                                                                                                                                                                                                          width: 100%;
                                                                                                                                                                                                                                                                                                                                height: 100%;
                                                                                                                                                                                                                                                                                                                                      z-index: -1;
                                                                                                                                                                                                                                                                                                                                            overflow: hidden;
                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                    .heart {
                                                                                                                                                                                                                                                                                                                                                          width: 30px;
                                                                                                                                                                                                                                                                                                                                                                height: 30px;
                                                                                                                                                                                                                                                                                                                                                                      background-color: rgba(255, 255, 255, 0.8);
                                                                                                                                                                                                                                                                                                                                                                            position: absolute;
                                                                                                                                                                                                                                                                                                                                                                                  top: -10px;
                                                                                                                                                                                                                                                                                                                                                                                        animation: heart-fall 5s infinite ease-in;
                                                                                                                                                                                                                                                                                                                                                                                              clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
                                                                                                                                                                                                                                                                                                                                                                                                  }

                                                                                                                                                                                                                                                                                                                                                                                                      @keyframes heart-fall {
                                                                                                                                                                                                                                                                                                                                                                                                            0% {
                                                                                                                                                                                                                                                                                                                                                                                                                    transform: translateY(0) rotate(0deg);
                                                                                                                                                                                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                                                                                                                                                                                                100% {
                                                                                                                                                                                                                                                                                                                                                                                                                                        transform: translateY(110vh) rotate(360deg);
                                                                                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                                                                                                  }

                                                                                                                                                                                                                                                                                                                                                                                                                                                      .heart:nth-child(1) { left: 10%; animation-delay: 1s; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                          .heart:nth-child(2) { left: 20%; animation-delay: 2s; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                              .heart:nth-child(3) { left: 30%; animation-delay: 3s; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  .heart:nth-child(4) { left: 40%; animation-delay: 1.5s; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      .heart:nth-child(5) { left: 50%; animation-delay: 4s; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          .heart:nth-child(6) { left: 60%; animation-delay: 3.5s; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              .heart:nth-child(7) { left: 70%; animation-delay: 2.5s; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  .heart:nth-child(8) { left: 80%; animation-delay: 4.5s; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      .heart:nth-child(9) { left: 90%; animation-delay: 3s; }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          /* Nascondi i cuori finché non si clicca */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              .hearts {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    display: none;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            /* Animazioni tremolio dello schermo */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                @keyframes shake {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      0% { transform: translate(1px, 1px) rotate(0deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            10% { transform: translate(-1px, -2px) rotate(-1deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  20% { transform: translate(-3px, 0px) rotate(1deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        30% { transform: translate(3px, 2px) rotate(0deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              40% { transform: translate(1px, -1px) rotate(1deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    50% { transform: translate(-1px, 2px) rotate(-1deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          60% { transform: translate(-3px, 1px) rotate(0deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                70% { transform: translate(3px, 1px) rotate(-1deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      80% { transform: translate(-1px, -1px) rotate(1deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            90% { transform: translate(1px, 2px) rotate(0deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  100% { transform: translate(1px, -2px) rotate(-1deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          body.shake {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                animation: shake 0.5s;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      animation-iteration-count: 10;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              /* Pioggia di emoji */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  .emoji {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        font-size: 2rem;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              position: absolute;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    top: -50px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          animation: emoji-fall 5s infinite;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  @keyframes emoji-fall {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        0% { transform: translateY(0); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              100% { transform: translateY(100vh); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      .emoji:nth-child(1) { left: 10%; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          .emoji:nth-child(2) { left: 30%; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              .emoji:nth-child(3) { left: 50%; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  .emoji:nth-child(4) { left: 70%; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      .emoji:nth-child(5) { left: 90%; }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          /* Esplosioni di colori */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              body.explosion {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    background: radial-gradient(circle, #ff9966, #ff5e62, #e83e8c, #3a86ff, #8338ec);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          animation: colorExplosion 2s infinite alternate;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  @keyframes colorExplosion {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        0% { background-position: 0 0; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              100% { background-position: 100% 100%; }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      /* Animazioni 3D per il titolo */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          @keyframes rotate3D {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                0% { transform: rotateX(0) rotateY(0); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      50% { transform: rotateX(360deg) rotateY(360deg); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            100% { transform: rotateX(0) rotateY(0); }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  </style>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  </head>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <body>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div class="container">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <h1>Mi vuoi sposare, Anita?</h1>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <p>Sei l'amore della mia vita, non posso immaginare un futuro senza di te.</p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <button class="btn btn-propose" onclick="yesResponse()">Sì, lo voglio Adam!</button>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <button class="btn btn-danger btn-propose" onclick="noResponse()">No, mi dispiace Adam</button>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <!-- Cuori che cadono sullo sfondo -->
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          <div class="hearts" id="fallingHearts">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <div class="heart"></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <div class="heart"></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <div class="heart"></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          <div class="heart"></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <div class="heart"></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <div class="heart"></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <div class="heart"></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          <div class="heart"></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <div class="heart"></div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <!-- Emoji che cadono -->
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div class="emoji">?</div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <div class="emoji">❤️</div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <div class="emoji">?</div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          <div class="emoji">?</div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div class="emoji">?</div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <!-- Audio -->
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <audio id="romanticMusic" src="musica-romantica.mp3"></audio>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <audio id="sadMusic" src="violino-triste.mp3"></audio>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <!-- Bootstrap JS -->
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            function showHearts() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  document.getElementById('fallingHearts').style.display = 'block';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        document.body.classList.add('explosion'); 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  // Esplosioni di colori
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        document.body.classList.add('shake'); // Tremolio dello schermo
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                function yesResponse() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      alert("Sì, lo voglio Adam!");
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            document.getElementById('romanticMusic').play(); // Avvia musica romantica
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  showHearts(); // Mostra cuori e attiva animazioni
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          function noResponse() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                alert("No, mi dispiace Adam.");
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      document.getElementById('sadMusic').play(); // Avvia musica triste
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            showHearts(); // Mostra cuori e attiva animazioni
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  </script>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  </body>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  </html>