AirPods Shop by @vladv2xx - Codewith.it

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

Referenze

valueValore alfanumerico o booleano contenuto in un elemento
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<h3>Titolo di intestazione di terzo livello
<select>Usato per creare un menu a tendina.
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Cubo 3D animato

\\\"Il Razzismo - Un Tema Importa(2)

Background Property > filter() met

Scheda Lavorazione CNC

Heads Or Tails Random Tally

esercitazione5.html

Analisi Drive Synology: RS814RP+ &

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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AirPods Shop</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #DAD2D2;
        }
        .sopra {
            background-color: black; /* Sfondo nero per la sezione delle operazioni */
            padding: 20px; /* Aggiungi spazio intorno alla sezione delle operazioni */
            text-align: center; /* Centra il contenuto orizzontalmente */
            color: #abcdef;
            position: relative;
        }
        .login {
            font-size: 13px; /* Dimensione del font del testo nel pulsante */
       
            background-color: black; /* Colore di sfondo del pulsante */
            color: white; /* Colore del testo del pulsante */
            cursor: pointer; /* Cambia il cursore quando si passa sopra il pulsante */
            text-align: center; /* Centra il testo all'interno del pulsante */
            position: absolute; /* Posiziona il pulsante assolutamente */
            top: 10px; /* Posizione dall'alto */
            right: 10px; /* Posizione da destra */
        
        }
        .button {
            width: 200px; /* Larghezza del pulsante */
            height: 50px; /* Altezza del pulsante */
            font-size: 18px; /* Dimensione del font del testo nel pulsante */
            padding: 10px; /* Padding interno del pulsante */
            margin: 10px; /* Margine intorno al pulsante */
            background-color: black; /* Colore di sfondo del pulsante */
            color: white; /* Colore del testo del pulsante */
            border: none; /* Rimuove il bordo del pulsante */
            border-radius: 5px; /* Angoli arrotondati del pulsante */
            cursor: pointer; /* Cambia il cursore quando si passa sopra il pulsante */
            text-align: center; /* Centra il testo all'interno del pulsante */
            opacity: 0;
            transition: opacity 2s ease-in-out;
        }
        .button.show {
            opacity: 1;
        }
        .prodotti {
            font-size: 30px; /* Dimensione del font */
            font-style: italic; /* Stile del font */
            font-weight: 0; /* Peso del font */
            padding-left: 20px; /* Spazio a partire da sinistra */
        }
        .dynamic-container {
            background-color: white; /* Sfondo bianco per il contenitore del testo dinamico */
            text-align: center; /* Centra il testo */
            padding: 1px; /* Spazio interno verticale */
        }
        #dynamicText {
            font-size: 25px; /* Dimensione del font */
            color: black; /* Colore del testo */
        }
    </style>
    
    <script>
        function showIntro(){
            var testo1 = "PAGAMENTO ALLA CONSEGNA 24/48H";
            var testo2 = "SPEDIZIONE GRATUITA SOPRA I 99.99$";
            var dynamicText = document.getElementById("dynamicText");
            dynamicText.innerText = testo1;
            setInterval(function() {
                if (dynamicText.innerText === testo1) {
                    dynamicText.innerText = testo2;
                } else {
                    dynamicText.innerText = testo1;
                }
            }, 3000); // Cambia testo ogni 3 secondi
        }

        function showButtons() {
            const buttons = document.querySelectorAll('.button');
            buttons.forEach((button, index) => {
                setTimeout(() => {
                    button.classList.add('show');
                }, index * 1000); // Un secondo di intervallo
            });
        }

        window.onload = function() {
            showIntro();
            showButtons();
        };
    </script>
</head>
<body>
    <div class="dynamic-container">
        <p id="dynamicText"></p> <!-- Elemento per visualizzare la frase scritta con JS -->
    </div>
    <div class="sopra">
        <h1>CONNECTION SHOP</h1>
        <button class="login">Login</button>
    </div>
    <div align="center">
        <input type="button" value="I nostri prodotti" class="button">
        <a href="Chi siamo.html">
            <input type="button" value="Chi siamo" class="button">
        </a>
        <a href="Lavora con noi.html">
            <input type="button" value="Lavora con noi" class="button">
        </a>
    </div>
    <br>
    <div class="prodotti">I nostri prodotti</div>
</body>
</html>