Mappa Visiva (Wireframe) - Moduli by @Darkness977 - Codewith.it

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

Referenze

typeSpecifica la tipologia/funzione di un elemento.
<hr>Inserisce una linea orizzontale
listCollega un elemento input con una lista di opzioni datalist
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<br>Inserisce uno spazio vuoto tra due elementi HTML.
hreflangConsente di dichiarare la lingua del documento collegato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Table HOTEL STELLA MARIS

Costruzione di un form

4395-Indovina numero mio

Esercitazione n.1

Vendi Casa da Privato Guida Gratui

Random Website Demo1

Menu a tendina CSS

cpa continuing professional educat

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: #f9f9f9;
      padding: 20px;
    }
    .module {
      border: 2px dashed #999;
      border-radius: 8px;
      background: #fff;
      margin: 15px 0;
      padding: 30px;
      text-align: center;
      color: #555;
      position: relative;
    }
    .module::before {
      content: attr(data-label);
      position: absolute;
      top: -10px;
      left: 20px;
      background: #fff;
      padding: 2px 8px;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>
  <!-- Header -->
  <div class="module" data-label="Header">
    <p>&lt;header&gt; Logo · Nav · CTA &lt;/header&gt;</p>
  </div>

  <!-- Hero -->
  <div class="module" data-label="Hero">
    <p>&lt;section class=\"hero\"&gt; Headline · Subline · CTA &lt;/section&gt;</p>
  </div>

  <!-- USP / Value Proposition -->
  <div class="module" data-label="USP / Value Proposition">
    <p>&lt;section class=\"usp\"&gt; 3 Feature Boxes &lt;/section&gt;</p>
  </div>

  <!-- Infobox / Feature Grid -->
  <div class="module" data-label="Infobox / Feature Grid">
    <p>&lt;section class=\"features\"&gt; Icon + Title + Caption &lt;/section&gt;</p>
  </div>

  <!-- Testimonial -->
  <div class="module" data-label="Testimonial">
    <p>&lt;blockquote&gt; Citazione Cliente &lt;/blockquote&gt;</p>
  </div>

  <!-- How It Works -->
  <div class="module" data-label="How It Works">
    <p>&lt;section class=\"how-it-works\"&gt; 4 Steps &lt;/section&gt;</p>
  </div>

  <!-- Pricing Table -->
  <div class="module" data-label="Pricing Table">
    <p>&lt;section class=\"pricing\"&gt; Comparazione Piani &lt;/section&gt;</p>
  </div>

  <!-- FAQ Accordion -->
  <div class="module" data-label="FAQ Accordion">
    <p>&lt;section class=\"faq\"&gt; Question & Answers &lt;/section&gt;</p>
  </div>

  <!-- Blog Preview -->
  <div class="module" data-label="Blog Preview / News Cards">
    <p>&lt;section class=\"blog-preview\"&gt; Card Grid Articoli &lt;/section&gt;</p>
  </div>

  <!-- Pre-Footer CTA -->
  <div class="module" data-label="Pre-Footer CTA">
    <p>&lt;section class=\"pre-footer-cta\"&gt; Immediata CTA Finale &lt;/section&gt;</p>
  </div>

  <!-- Footer -->
  <div class="module" data-label="Footer">
    <p>&lt;footer&gt; Link · Copyright · Social &amp; Policy &lt;/footer&gt;</p>
  </div>
</body>
</html>