Idee background personaggio by @fabiana - Codewith.it

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

Referenze

<link>Collega il documento corrente con una risorsa esterna
<table>Tag primario per la creazione di tabelle
hrefDefinisce l'URL della risorsa/pagina di destinazione.
selectedPre-seleziona un elemento di input
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<map>Inserisce immagini mappa cliccabili in un documento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazione8.html

REVIEW: For Loops

console elements

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">
  <title>Scheda Personaggio</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: 'Lora', serif;
      background: #f4f4f4;
      color: #222;
    }

    .hero {
      position: relative;
      text-align: center;
      color: white;
    }

    .hero img {
      width: 60%;
      height: 40%;
      filter: grayscale(60%) contrast(110%) saturate(70%);
    }

    .overlay {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.7);
      padding: 20px 40px;
      border-radius: 8px;
      width: 200px;
      height: 80px;
    }

    .overlay h1 {
      font-family: 'Playfair Display', serif;
      font-size: 13px;
      letter-spacing: 5px;
      margin: 0;
    }

    .overlay h2 {
      font-family: 'Playfair Display', serif;
      font-size: 9px;
      letter-spacing: 2px;
      margin: 5px 0 0 0;
    }

    .content {
      max-width: 450px;
      margin: 20px auto;
      line-height: 1.8;
      padding: 0 20px;
      font-size: 11px;
      text-align: justify;
    }
  </style>
</head>
<body>

  <div class="hero">
    <img src="https://i.pinimg.com/1200x/b8/96/14/b89614a793b94cf462f11f2def95b9f7.jpg" alt="Immagine personaggio">
    <div class="overlay">
      <h1>NOME PERSONAGGIO</h1>
      <h2>“Motto o citazione”</h2>
    </div>
  </div>

  <div class="content">
    <p>
      Qui puoi inserire il background del tuo personaggio, scritto come un articolo di giornale o una descrizione narrativa.  
      Usa paragrafi ben separati e mantieni lo stile elegante.  
    </p>
  </div>

</body>
</html>