My website by @raeshawn - Codewith.it

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

References

<meta>Definisce i meta dati di una pagina web.
<map>Inserisce immagini mappa cliccabili in un documento
<h1>Titolo di intestazione di primo livello
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<label>Mostrare un testo di etichetta per un elemento di input.

Users

Log in to search for users

Explore

Find inspiration

Pagine di prova

Esercizi di Riepilogo (3)

Navbar Example 5

Esercitazione n. 1

Alice nel Paese delle Meraviglie

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="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';
        }
    });
});