test1 pagina principale by @koma93 - Codewith.it

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

Referenze

<html>Tag primario di un documento HTML
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<hr>Inserisce una linea orizzontale

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il mio primo file HTML

Blocco tasto destro mouse

Borsino politico

Collegamenti ipertestuali

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>