My website by @raeshawn - Codewith.it

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

Referenze

postDefinisce un metodo di invio di dati al server
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
_parentApre collegamenti ipertestuali nell'elemento genitore
<h3>Titolo di intestazione di terzo livello
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
formSpecifica a quale form appartiene un elemento.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

JavaScript Debug Console

Resiliant Material

Laus Informatica srl - Negozio eBay

Il museo di Leonardo

Quiz ristrutturazione

\\\"Il Razzismo - Un Tema Importa

quello che si vede in alto nella c

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