UX / Web Design Green – Progetto by @Darkness977 - Codewith.it

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

Referenze

enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<h4>Titolo di intestazione di quarto livello
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<canvas>Tag per disegnare grafica dinamica su pagine web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

FuturaDesign - Design che Definisc

sito mattia chiarabini

Quiz ristrutturazione

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" />
  <title>UX / Web Design – Progetto B2B</title>
  <meta name="description" content="UX e Web Design per professionisti e aziende. Siti chiari, credibili e pronti a vendere." />

  <style>
    /* =========================
       DESIGN SYSTEM
    ========================== */
    :root {
      --bg: #0e0f13;
      --bg-soft: #141621;
      --card: #1b1e2b;
      --text: #e6e7eb;
      --muted: #a2a6b3;
      --accent: #6ee7ff;
      --accent-soft: rgba(110,231,255,0.15);
      --border: rgba(255,255,255,0.08);

      --radius-lg: 24px;
      --radius-md: 16px;
      --radius-sm: 10px;

      --space-xs: 8px;
      --space-sm: 16px;
      --space-md: 32px;
      --space-lg: 64px;
      --space-xl: 120px;

      --font-base: 16px;
      --font-lg: 20px;
      --font-xl: 40px;
      --font-xxl: 56px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Inter, sans-serif;
      font-size: var(--font-base);
      line-height: 1.6;
      color: var(--text);
      background: var(--bg);
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--space-md);
    }

    /* =========================
       NAVBAR
    ========================== */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(14,15,19,0.8);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
    }

    .logo {
      font-weight: 600;
      letter-spacing: 0.4px;
      transition: transform .3s ease, filter .3s ease;
    }

    .logo:hover {
      transform: scale(1.04);
      filter: brightness(1.2);
    }

    .nav ul {
      display: flex;
      flex-direction: row;
      gap: var(--space-md);
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .nav a {
      color: var(--muted);
      transition: color .3s ease;
    }

    .nav a:hover { color: var(--text); }

    /* =========================
       HERO
    ========================== */
    .hero {
      position: relative;
      padding: var(--space-xl) 0 180px;
      overflow: hidden;
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);
      opacity: .25;
      filter: blur(80px);
      animation: float 22s ease-in-out infinite alternate;
    }

    .hero::after {
      right: -120px;
      bottom: -120px;
      animation-duration: 28s;
    }

    @keyframes float {
      from { transform: translate(0,0); }
      to { transform: translate(60px,-40px); }
    }

    .hero-content {
      max-width: 720px;
      position: relative;
      z-index: 1;
    }

    .hero h1 {
      font-size: var(--font-xxl);
      line-height: 1.1;
      margin-bottom: var(--space-md);
    }

    .hero p {
      font-size: var(--font-lg);
      color: var(--muted);
      margin-bottom: var(--space-lg);
    }

    .cta {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: 14px 28px;
      background: var(--accent);
      color: #000;
      border-radius: var(--radius-md);
      font-weight: 600;
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 40px var(--accent-soft);
    }

    /* =========================
       SECTIONS
    ========================== */
    section { padding: var(--space-xl) 0; }

    .section-title {
      font-size: var(--font-xl);
      margin-bottom: var(--space-md);
    }

    .section-intro {
      color: var(--muted);
      max-width: 640px;
    }

    /* =========================
       PORTFOLIO
    ========================== */
    .portfolio-grid {
      margin-top: var(--space-lg);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: var(--space-md);
    }

    .project {
      background: var(--card);
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--border);
      transition: transform .3s ease;
    }

    .project:hover { transform: translateY(-6px); }

    .project-thumb {
      aspect-ratio: 16 / 10;
      background: linear-gradient(135deg, #2a2e45, #1a1d2e);
    }

    .project-body {
      padding: var(--space-sm);
    }

    .project-body h3 { margin: 0 0 6px; }
    .project-body p { margin: 0; color: var(--muted); font-size: 14px; }

    /* =========================
       SOCIAL PROOF
    ========================== */
    .testimonials {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: var(--space-md);
      margin-top: var(--space-lg);
    }

    .testimonial {
      background: var(--card);
      padding: var(--space-md);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
    }

    .testimonial strong { display: block; margin-bottom: 4px; }
    .stars { color: var(--accent); font-size: 14px; }

    /* =========================
       FAQ
    ========================== */
    .faq {
      max-width: 840px;
      margin: 0 auto;
    }

    details {
      background: linear-gradient(180deg, #1b1e2b, #151826);
      padding: var(--space-md);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      margin-bottom: var(--space-sm);
    }

    summary {
      cursor: pointer;
      font-weight: 600;
    }

    summary::marker { display: none; }

    details p { color: var(--muted); margin-top: var(--space-sm); }

    /* =========================
       CONTACT
    ========================== */
    .contact {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: var(--space-lg);
    }

    form {
      background: var(--card);
      padding: var(--space-lg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      display: grid;
      gap: var(--space-sm);
    }

    input, textarea {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: #0f111a;
      color: var(--text);
      font-family: inherit;
    }

    textarea { resize: vertical; min-height: 120px; }

    .contact-info {
      padding: var(--space-lg);
    }

    .contact-info p { color: var(--muted); }

    /* =========================
       FOOTER
    ========================== */
    footer {
      padding: var(--space-lg) 0;
      border-top: 1px solid var(--border);
      color: var(--muted);
      text-align: center;
    }

    /* =========================
       RESPONSIVE
    ========================== */
    @media (max-width: 900px) {
      .contact { grid-template-columns: 1fr; }
      .hero h1 { font-size: 44px; }
    }
  </style>
</head>

<body>
  <header>
    <div class="container nav">
      <div class="logo">Nome Studio</div>
      <ul>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#contatti">Contatti</a></li>
      </ul>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="container hero-content">
        <h1>Siti chiari, credibili e pronti a vendere</h1>
        <p>Progetto e realizzo esperienze digitali per professionisti e aziende che vogliono comunicare valore, non rumore.</p>
        <a class="cta" href="#contatti">Parliamo del tuo progetto</a>
      </div>
    </section>

    <section id="portfolio">
      <div class="container">
        <h2 class="section-title">Portfolio selezionato</h2>
        <p class="section-intro">Una scelta mirata di progetti reali, costruiti su obiettivi concreti.</p>

        <div class="portfolio-grid">
          <article class="project">
            <div class="project-thumb"></div>
            <div class="project-body">
              <h3>Studio Legale</h3>
              <p>Riposizionamento e lead qualificati</p>
            </div>
          </article>
          <article class="project">
            <div class="project-thumb"></div>
            <div class="project-body">
              <h3>Consulente IT</h3>
              <p>Brand personale e autorevolezza</p>
            </div>
          </article>
          <article class="project">
            <div class="project-thumb"></div>
            <div class="project-body">
              <h3>PMI B2B</h3>
              <p>Sito corporate e conversione soft</p>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section>
      <div class="container">
        <h2 class="section-title">Cosa dicono i clienti</h2>
        <div class="testimonials">
          <div class="testimonial">
            <strong>Marco R. · Avvocato</strong>
            <div class="stars">★★★★★</div>
            <p>Sito finalmente coerente con il mio posizionamento professionale.</p>
          </div>
          <div class="testimonial">
            <strong>Laura P. · Consulente</strong>
            <div class="stars">★★★★★</div>
            <p>Metodo chiaro, niente fuffa. Risultato concreto.</p>
          </div>
          <div class="testimonial">
            <strong>Andrea S. · CEO</strong>
            <div class="stars">★★★★☆</div>
            <p>Ottimo equilibrio tra design e business.</p>
          </div>
        </div>
      </div>
    </section>

    <section id="faq">
      <div class="container faq">
        <h2 class="section-title">Domande frequenti</h2>
        <details>
          <summary>Con chi lavori?</summary>
          <p>Professionisti, freelance e aziende B2B che vogliono comunicare in modo serio e credibile.</p>
        </details>
        <details>
          <summary>Quanto dura un progetto?</summary>
          <p>In media 3–5 settimane, a seconda della complessità.</p>
        </details>
        <details>
          <summary>Posso partire senza idee chiare?</summary>
          <p>Sì. Il lavoro parte proprio dall'analisi e dalla chiarezza.</p>
        </details>
      </div>
    </section>

    <section id="contatti">
      <div class="container contact">
        <form>
          <input type="text" placeholder="Nome" required />
          <input type="email" placeholder="Email" required />
          <input type="text" placeholder="Ruolo / Azienda" />
          <textarea placeholder="Raccontami il progetto"></textarea>
          <button class="cta" type="submit">Invia richiesta</button>
        </form>

        <div class="contact-info">
          <h3>Disponibilità</h3>
          <p>Accetto un numero limitato di progetti per garantire qualità e focus.</p>
          <p><strong>Email:</strong> info@esempio.it</p>
          <p><strong>LinkedIn:</strong> /nomeprofilo</p>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">Progettato con ? by X-Designer© 2025 — Tutti i diritti riservati</div>
  </footer>
</body>
</html>