Proposta di Matrimonio by @Adamm00 - Codewith.it

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

References

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<video>Integra e controlla video in una pagina HTML
<div>Crea contenitori generici o sezioni in una pagina
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
acceptDefinisce e filtra il formato dei file per il tag <input type=file>

Users

Log in to search for users

Explore

Find inspiration

Titolo della pagina

Esercitazione n. 1

Tabella esercitazione esame

Borsino politico

codice per verifica

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

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

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Proposta di Matrimonio</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);
                                                                                                            }

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

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          function yesResponse() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                alert("Sì, lo voglio Adam!");
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      showHearts();
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              function noResponse() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    alert("No, mi dispiace Adam.");
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          showHearts();
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </body>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </html>