test1 pagina principale by @koma93 - Codewith.it

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

Referenze

<video>Integra e controlla video in una pagina HTML
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
placeholderDefinisce un testo segnaposto per un elemento input o textarea
requiredRende obbligatorio un campo di input
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

JS Istruzioni condizionali es3

Esercitazione 3

Creatore Badge Aziendale

congettura collatz

CodeMirror preview

Weather Forecast

Curriculum vitae

basic structure

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>Il Tuo Sito</title>
    <link rel="stylesheet" href="style.css">
    <style>
        body {
            background: linear-gradient(45deg, #4527a0, #5e35b1, #7e57c2, #a074c2, #bf5af2);
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background: linear-gradient(45deg, #4527a0, #5e35b1, #7e57c2, #a074c2, #bf5af2);
            padding: 15px;
            text-align: center;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .menu-btn {
            cursor: pointer;
            display: none;
            font-size: 20px;
        }

        h1 {
            color: #17; /* Colore testo nero */
            background: none; /* Nessun background */
            padding: 10px;
            border-radius: 5px;
            margin: 0;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(0, 0, 0, 0); /* Colore di sfondo trasparente */
            padding: 15px;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        nav ul li {
            margin-right: 10px;
        }

        nav ul li a {
            text-decoration: none;
            color: white;
            background-color: #111; /* Colore del bottone */
            padding: 10px 15px;
            border-radius: 5px;
        }

        nav ul li a:hover {
            background-color: #333; /* Cambia colore al passaggio del mouse */
        }

        main {
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .preview-box {
            width: calc(33.33% - 20px);
            margin-bottom: 20px;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
        }

        .preview-box img {
            width: 100%;
            height: auto;
            border-radius: 8px 8px 0 0;
        }

        .preview-box:hover {
            transform: scale(1.05);
        }

        .button-section {
            background: none; /* Nessun background */
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .button-section a {
            text-decoration: none;
            color: white;
            background-color: rgba(0, 0, 0, 0.1); /* Colore del bottone con opacità */
            padding: 10px 15px;
            border-radius: 5px;
        }

        .button-section a:hover {
            background-color: rgba(0, 0, 0, 0.3); /* Cambia colore al passaggio del mouse con opacità */
        }

        footer {
            background: linear-gradient(45deg, #4527a0, #5e35b1, #7e57c2, #a074c2, #bf5af2);
            color: white;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        @media (max-width: 768px) {
            .menu-btn {
                display: block;
            }

            nav {
                flex-direction: column;
                position: absolute;
                top: 70px;
                left: 0;
                background: rgba(0, 0, 0, 0); /* Colore di sfondo trasparente */
                width: 100%;
                text-align: center;
                display: none;
            }

            nav.show {
                display: flex;
            }

            nav ul {
                flex-direction: column;
                align-items: center;
            }

            nav ul li {
                margin: 10px 0;
            }

            main {
                padding: 20px;
            }

            .preview-box {
                width: calc(50% - 20px);
            }
        }
    </style>
</head>
<body>

    <header>
        <div class="menu-btn" onclick="toggleMenu()">☰</div>
        <h1>Benvenuto nel Mio Sito Web</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Servizi</a></li>
                <li><a href="#">Contattaci</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <div class="preview-box">
            <img src="immagine1.jpg" alt="Anteprima 1">
            <p>Descrizione Anteprima 1</p>
        </div>

        <div class="preview-box">
            <img src="immagine2.jpg" alt="Anteprima 2">
            <p>Descrizione Anteprima 2</p>
        </div>

        <div class="preview-box">
            <img src="immagine3.jpg" alt="Anteprima 3">
            <p>Descrizione Anteprima 3</p>
        </div>

        <!-- Aggiungi altre anteprime di immagini e descrizioni qui -->
    </main>

    <footer>
        <p>&copy; 2024 Il Tuo Nome. Tutti i diritti riservati.</p>
    </footer>

    <script>
        function toggleMenu() {
            var nav = document.querySelector('nav');
            nav.classList.toggle('show');
        }
    </script>
</body>
</html>