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

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

Referenze

<tbody>Definisce il contenuto principale di una tabella.
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<nav>Definisce un menu di navigazione
<html>Tag primario di un documento HTML
<meta>Definisce i meta dati di una pagina web.
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Caps Lock Checker

5/10/24 es.1 - palindromi

Estrazione Casuale Studenti

Esercizio fatto benissimo

Notizie dai Monti

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