Mappa Visiva (Wire,CTA) - Moduli W by @Darkness977 - Codewith.it

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

Referenze

sizeDetermina le dimensioni dell'elemento in base al valore contenuto
<link>Collega il documento corrente con una risorsa esterna
<h1>Titolo di intestazione di primo livello
<textarea>Area di testo libero espandibile per form HTML
widthImposta la larghezza di un elemento HTML
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

lezione 9 informatica

Link sito di Jacopo Picco

Genera Tavola Pitagorica (PHP)

DEMO: Hi-Lo Game

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>Mappa Visiva Moduli Web Design</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      padding: 20px;
    }
    .module {
      border-radius: 12px;
      margin: 30px 0;
      padding: 50px 30px;
      text-align: left;
      color: #fff;
      position: relative;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .module::before {
      content: attr(data-label);
      position: absolute;
      top: -14px;
      left: 20px;
      background: #222;
      padding: 4px 12px;
      font-weight: bold;
      color: #fff;
      border-radius: 6px;
      font-size: 0.85rem;
    }
    .module:nth-of-type(1) { background: #1E1E2F; }
    .module:nth-of-type(2) { background: #3B3B5B; }
    .module:nth-of-type(3) { background: #4A4A6A; }
    .module:nth-of-type(4) { background: #2D3E50; }
    .module:nth-of-type(5) { background: #607D8B; }
    .module:nth-of-type(6) { background: #546E7A; }
    .module:nth-of-type(7) { background: #B0BEC5; color: #000; }
    .module:nth-of-type(8) { background: #CFD8DC; color: #000; }
    .module:nth-of-type(9) { background: #ECEFF1; color: #000; }
    .module:nth-of-type(10) { background: #FFE082; color: #000; }
    .module:nth-of-type(11) { background: #263238; }
    p {
      margin: 0 0 10px;
      font-size: 1.1rem;
    }
    h3 {
      margin: 0 0 10px;
      font-size: 1.4rem;
    }
  </style>
</head>
<body>
  <!-- Header -->
  <div class="module" data-label="Header">
    <h3>Intestazione del sito</h3>
    <p>Contiene logo, navigazione principale e una call to action in alto a destra.</p>
    <p><strong>Domanda guida:</strong> Come aiuto l’utente a orientarsi subito?</p>
  </div>

  <!-- Hero -->
  <div class="module" data-label="Hero">
    <h3>Hero Section</h3>
    <p>Un titolo forte, una descrizione chiara e un bottone che invita all'azione.</p>
    <p><strong>Domanda guida:</strong> Perché l’utente dovrebbe interessarsi subito?</p>
  </div>

  <!-- USP / Value Proposition -->
  <div class="module" data-label="USP / Value Proposition">
    <h3>Proposta di Valore</h3>
    <p>Tre riquadri con icone, titoli e descrizioni dei vantaggi principali.</p>
    <p><strong>Domanda guida:</strong> Cosa offriamo che ci rende unici?</p>
  </div>

  <!-- Infobox / Feature Grid -->
  <div class="module" data-label="Infobox / Feature Grid">
    <h3>Funzionalità Chiave</h3>
    <p>Griglia con blocchi informativi per spiegare funzionalità o benefit.</p>
    <p><strong>Domanda guida:</strong> Quali caratteristiche principali devo mostrare?</p>
  </div>

  <!-- Testimonial -->
  <div class="module" data-label="Testimonial">
    <h3>Dicono di noi</h3>
    <p>Citazioni reali di clienti soddisfatti con nome e ruolo.</p>
    <p><strong>Domanda guida:</strong> Chi può validare ciò che prometto?</p>
  </div>

  <!-- How It Works -->
  <div class="module" data-label="How It Works">
    <h3>Come Funziona</h3>
    <p>Processo in 3 o 4 passaggi illustrati con icone o numeri.</p>
    <p><strong>Domanda guida:</strong> Quanto è semplice iniziare?</p>
  </div>

  <!-- Pricing Table -->
  <div class="module" data-label="Pricing Table">
    <h3>Prezzi e Piani</h3>
    <p>Tabelle comparative con opzioni e funzionalità a confronto.</p>
    <p><strong>Domanda guida:</strong> Che piano è giusto per chi visita?</p>
  </div>

  <!-- FAQ Accordion -->
  <div class="module" data-label="FAQ Accordion">
    <h3>Domande Frequenti</h3>
    <p>Sezione a fisarmonica con risposte sintetiche ma chiare.</p>
    <p><strong>Domanda guida:</strong> Cosa potrebbe bloccare l’utente prima di agire?</p>
  </div>

  <!-- Blog Preview -->
  <div class="module" data-label="Blog Preview / News Cards">
    <h3>Dal nostro blog</h3>
    <p>Card con immagine, titolo e descrizione degli articoli più recenti.</p>
    <p><strong>Domanda guida:</strong> Come posso ispirare fiducia e interesse nel tempo?</p>
  </div>

  <!-- Pre-Footer CTA -->
  <div class="module" data-label="Pre-Footer CTA">
    <h3>CTA Finale</h3>
    <p>Ultima chiamata all’azione prima del footer, spesso con uno sfondo diverso.</p>
    <p><strong>Domanda guida:</strong> Qual è l’ultimo messaggio che voglio lasciare?</p>
  </div>

  <!-- Footer -->
  <div class="module" data-label="Footer">
    <h3>Piè di Pagina</h3>
    <p>Informazioni legali, social media, link utili e copyright.</p>
    <p><strong>Domanda guida:</strong> Come posso chiudere con chiarezza e affidabilità?</p>
  </div>
</body>
</html>