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

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

Referenze

acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<object>Incorpora risorse varie nella pagina web.
maxImposta il valore numerico o temporale massimo per un elemento input
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<address> Definisce una sezione contenente indirizzi, contatti e informazioni

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercizio fatto benissimo

CAPODANNO SENZA LUCI

Obiettivi futuri.html

immagine per HTML

Mostra/nascondi password

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