My website by @raeshawn - Codewith.it

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

Referenze

enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<textarea>Area di testo libero espandibile per form HTML
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<h1>Titolo di intestazione di primo livello
<nav>Definisce un menu di navigazione
crossoriginGestisce richieste tra documenti provenienti da origini differenti.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazione6.html

Livia e la foresta incantata

esercizio 1.1-1.6

prima volta css

Il mio primo file HTML

Bootstrap List Grid

Pagina di esempio

esame noe e marti

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>Raeshawn Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Raeshawn's  Movie Website</h1>
    </header>
    <div class="main-container">
        <div class="nested-div">
            <h2>Anime</h2>
      
            <img src="https://i.pinimg.com/736x/ea/44/00/ea4400c46a218a77a41a7571d33bcb33.jpg" alt=" 1" width="125px">
            <img src="https://i.pinimg.com/originals/7a/0d/c2/7a0dc24f568b81a39ba1ce797f65d355.jpg" width="270px alt="2">
            <img src="https://lh6.googleusercontent.com/proxy/Bmb2pe_3HP4yJ8D_olkNOz1kiAuweme5-y0UpRPmxbGEm9oDsBZH1FeVMKGNR0W-witzLJmr1JItd7JzURS7jFNA4L0" width="113px" alt="3">
        </div>
        <div class="nested-div">
            <h2>Marvel</h2>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRR9o6VSS_WXQJDqqyPr8w7quybm_qusLxZWg&s" width="100px alt="4">
            <img src="https://i.ebayimg.com/images/g/9GAAAOSwaJli~NsU/s-l400.jpg" width="100px" alt="5">
            <img src="https://www.movieposters.com/cdn/shop/products/108b520c55e3c9760f77a06110d6a73b_e97cf224-d57f-44e3-8477-4f5479cd746b_500x.jpg?v=1573616089" width="100px alt="6">
        </div>
        <div class="nested-div">
            <h2>Disney</h2>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5A29p2im76QQ_8Kh3lWT75UagFadPr2EVKg&s" width="100px" alt="7">
            <img src="https://lumiere-a.akamaihd.net/v1/images/p_treasureplanet_19879_de775942.jpeg" width="100px" alt="8">
            <img src="https://lumiere-a.akamaihd.net/v1/images/p_mulan_20529_83d3893a.jpeg?region=0%2C0%2C513%2C810" width="100px" alt="9">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2PkRy1CjmSv5Gj7qJpb4kzETdGwoE00fbtg&s" width="120px" alt="10">
        </div>
        <a href="#" class="toggle-button">Toggle Content</a>
    </div>
    <footer>
        <p>Footer Content &copy; 2024</p>
    </footer>
    <div class="hidden-content">
        <p>This is hidden content that can be toggled on and off.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    margin: 0;
    padding: 0;
}


header {
    background-color: #4c57af;
    color: white;
    padding: 10px 0;
    text-align: center;
}


.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}


.nested-div {
    border: 2px solid #4c57af;
    margin: 10px;
    padding: 20px;
    width: 80%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.nested-div:hover {
    transform: scale(1.05);
}


img {
    border-radius: 8px;
    margin: 5px;
    transition: opacity 0.3s ease;
}

img:hover {
    opacity: 0.7;
}


a.toggle-button {
    background-color: #4c57af;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

a.toggle-button:hover {
    background-color: #4c57af;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.hidden-content {
    display: none;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
}

document.addEventListener('DOMContentLoaded', function () {
    const toggleButton = document.querySelector('.toggle-button');
    const hiddenContent = document.querySelector('.hidden-content');

    toggleButton.addEventListener('click', function (e) {
        e.preventDefault();
        if (hiddenContent.style.display === 'none' || hiddenContent.style.display === '') {
            hiddenContent.style.display = 'block';
        } else {
            hiddenContent.style.display = 'none';
        }
    });
});