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

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

References

<th>Definisce una cella di intestazione di una tabella HTML.
<i>Formatta il testo in corsivo/italico non enfatizzato
formmethodDefinisce il metodo di invio dei dati oltre a method
methodDetermina il metodo di invio dei dati di un form al server
<b>Formatta il testo in grassetto
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.

Users

Log in to search for users

Explore

Find inspiration

HOTEL STELLA MARIS

Scheda Lavorazione CNC

Research Profiles

Riconoscitore tasti

Tabella esercitazione esame

Stelle e Pianeti

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" />
  <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>