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

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

Referenze

titleIndica informazioni aggiuntive riguardo un elemento HTML
<a>Inserisce link e collegamenti ipertestuali
<option>Serve ad inserire una voce in un menu di selezione.
methodDetermina il metodo di invio dei dati di un form al server
listCollega un elemento input con una lista di opzioni datalist
<video>Integra e controlla video in una pagina HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

meraviglieItaliaFrame

JS Strutture dati e funzioni es3

Portfolio Web Developer

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