My website by @raeshawn - Codewith.it

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

References

enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<head>Tag primario di un documento HTML
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
formnovalidateImpedisce la convalida di un singolo elemento input
<embed>Tag per l'incorporamento di contenuti multimediali

Users

Log in to search for users

Explore

Find inspiration

Attività della settimana

Clona elementi JS

La Storia di Livia

Seasons of the Year

Listino Scontistica test

servizio_fiscale.html

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