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

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

References

<nav>Definisce un menu di navigazione
<h4>Titolo di intestazione di quarto livello
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
_topApre collegamenti ipertestuali nell'elemento parent assoluto
relServe a definire la relazione tra il documento e una risorsa.
<strong>Definisce una parte del testo importante con formattazione in grassetto.

Users

Log in to search for users

Explore

Find inspiration

Un Giorno a Napoli: Itinerario Det

Esercitazione n. 3

la mia prima pagina html pt3

cosa sono le specialità

Heads Or Tails Random Tally

JavaScript Debug Console

Esercitazione tabelle

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>