La Vita di Pablo Picasso by @bicubica - Codewith.it

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

Referenze

downloadConsente di scaricare file al click di collegamento ipertestuale.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<a>Inserisce link e collegamenti ipertestuali
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<blockquote>Inserisce citazioni in un documento HTML
multipart/form-dataCodifica dei caratteri di un form

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Pro Vercelli LB

Il bambino e le stelle ma(2)

Riprova verifica di progr(2)

UX / Web Design, Freelance – Pro

Dario Di Fazio - Portfolio CV & Co

HTML con classi

Esercitazione 1

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="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Vita di Pablo Picasso</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>La Vita di Pablo Picasso</h1>
            <img src="https://upload.wikimedia.org/wikipedia/commons/9/98/Pablo_picasso_1.jpg" alt="Pablo Picasso">
        </div>
        <h2>Introduzione</h2>
        <p>
            Pablo Ruiz Picasso è stato un pittore, scultore e disegnatore spagnolo, uno dei più noti artisti del XX secolo. 
            È nato a Málaga, in Spagna, il 25 ottobre 1881 e morto a Mougins, in Francia, l'8 aprile 1973.
        </p>
        <h2>Primi Anni</h2>
        <p>
            Fin dalla giovane età, Picasso ha mostrato un talento artistico straordinario. Suo padre, anch'egli pittore, 
            ha riconosciuto presto il talento del figlio e ha fatto di tutto per supportare la sua formazione artistica.
        </p>
        <h2>Carriera</h2>
        <p>
            Picasso è conosciuto per aver co-fondato il movimento cubista, rivoluzionando il modo di rappresentare la realtà 
            nelle arti visive. Ha prodotto migliaia di opere durante la sua vita, tra cui dipinti, sculture, ceramiche e disegni.
        </p>
        <h2>Vita Personale</h2>
        <p>
            La vita personale di Picasso è stata intensa e tumultuosa, caratterizzata da numerose relazioni amorose e amicizie 
            con altre figure artistiche di rilievo del suo tempo.
        </p>
        <h2>Eredità</h2>
        <p>
            L'eredità di Picasso è immensa; la sua influenza si estende ben oltre l'arte visiva, influenzando la cultura popolare 
            e il modo in cui percepiamo l'arte e la creatività oggi.
        </p>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

/* styles.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    color: #333;
}

.container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
    text-align: center;
    margin-bottom: 20px;
}

.header img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

h2 {
    font-size: 1.5em;
    margin-top: 20px;
    color: #555;
    cursor: pointer;
}

p {
    line-height: 1.6;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.2em;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const sections = document.querySelectorAll('h2');
    
    sections.forEach(section => {
        section.addEventListener('click', () => {
            const content = section.nextElementSibling;
            content.style.display = content.style.display === 'none' ? 'block' : 'none';
        });
    });
});