My website by @raeshawn - Codewith.it

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

Referenze

titleIndica informazioni aggiuntive riguardo un elemento HTML
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<div>Crea contenitori generici o sezioni in una pagina
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
_selfApre collegamenti ipertestuali nella stessa pagina del browser

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Calcolatrice JavaScript

Form per il torneo misto disfo

Password validator

Costruzione di tabella con html5

esercizi riepilogativi

esercitazione4.html

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