UX / Web Design, Freelance – Pro by @Darkness977 - Codewith.it

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

Referenze

animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<b>Formatta il testo in grassetto
minImposta il valore numerico o temporale minimo per un elemento input
selectedPre-seleziona un elemento di input
<blockquote>Inserisce citazioni in un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

specialità scout2

numeri primi e divisori pro

basi html e tag

pagina di prova

Review of Functions I

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, Freelance – 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: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      height: 72px;
    }

    .logo {
      font-weight: 900;
      font-size: 20px;
      color: var(--accent);
      letter-spacing: 0.6px;
      transition: transform .3s ease, filter .3s ease, text-shadow .3s ease;
    }

    .logo:hover {
      transform: scale(1.06);
      filter: brightness(1.3);
      text-shadow: 0 0 18px var(--accent-soft);
    }

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

    .nav ul,
    .nav-center {
      display: flex;
      justify-content: center;
      gap: var(--space-md);
      list-style: none;
      padding: 0;
      margin: 0 auto;
    }

    .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 12s ease-in-out infinite alternate;
    }

    .hero::after {
      right: -120px;
      bottom: -120px;
      animation-duration: 12s;
    }
/* centra menu principale */
.nav-center {
  transform: translateX(100px);
}

    form .cta {
  justify-content: center;
}


    @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: #070707ff;
      border-radius: var(--radius-md);
      font-weight: 700;
      transition: transform .3s ease, box-shadow .3s ease;
    }

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

    .cta.secondary {
      background: transparent;
      color: var(--accent);
      border: 1px solid var(--accent-soft);
      margin-left: 300px;
    }

    .cta.secondary:hover {
      background: 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);
      font-size: 16px;
      line-height: 1.7;
    }

    .contact-info h3 { margin-top: 0; }

    .social-icons {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }

    .social-icons a {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--card);
      border: 1px solid var(--border);
      transition: background .3s ease, transform .3s ease;
    }

    .social-icons a:hover {
      background: var(--accent-soft);
      transform: translateY(-2px);
    }

    .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">X-Designer Studio</div>

    <nav class="nav-center">
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#contatti">Contatti</a></li>
      </ul>
    </nav>

    <a class="cta secondary nav-cta" href="#contatti"> <link type="image/png" sizes="32x32" rel="icon" href=".../icons8-whatsapp-color-32.png"> Call GRATUITA</a>
  </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="about">
  <div class="container about">
    
    <!-- Colonna testo -->
    <div class="about-content">
      <h2 class="section-title">Design che chiarisce, non che confonde</h2>
      <p class="section-intro">
        Aiuto professionisti e aziende B2B a trasformare la propria presenza digitale
        in uno strumento chiaro, credibile e orientato al risultato.
      </p>

      <p>
        Ogni progetto parte dall’analisi: obiettivi, posizionamento e percezione.
        Il design non è decorazione, ma una leva strategica che guida l’utente,
        rafforza la fiducia e supporta il business.
      </p>

      <a class="cta" href="#contatti">Parliamo del tuo progetto</a>
    </div>

    <!-- Colonna immagine -->
    <div class="about-image">
      <img src="https://images.pexels.com/photos/35203716/pexels-photo-35203716.jpeg?_gl=1*yf2tu8*_ga*OTYzNTY1NzA1LjE3NTcxNDQ3ODI.*_ga_8JE65Q40S6*czE3NjU3OTM4NTkkbzExJGcxJHQxNzY1NzkzOTEzJGo2JGwwJGgw/400x500" alt="Designer al lavoro">
    </div>

  </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 style="padding-top:150px; padding-bottom:150px;">
      <div class="container">
        <h2 class="section-title">Risultati misurabili</h2>
        <p class="section-intro">Il design come leva concreta di crescita.</p>

        <div style="display:grid; gap:32px; max-width:720px;">
          <div>
            <strong>Conversion rate</strong>
            <div style="height:8px; background:#1a1d2e; border-radius:4px; overflow:hidden;">
              <div style="width:78%; height:100%; background:var(--accent);"></div>
            </div>
          </div>
          <div>
            <strong>Progetti completati</strong>
            <p style="font-size:40px; font-weight:700;">120+</p>
          </div>
          <div>
            <strong>Clienti soddisfatti</strong>
            <p style="font-size:40px; font-weight:700;">96%</p>
          </div>
        </div>
      </div>
    </section>

    <section style="padding-top:150px; padding-bottom:100px;">
      <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>
      <div class="container">
        <h2 class="section-title">Collaborazioni e brand</h2>
        <p class="section-intro">Esperienza maturata lavorando e collaborando con piattaforme e strumenti leader del settore.</p>
        <div style="display:flex; flex-wrap:wrap; gap:24px; margin-top:48px;">
          <span style="color:#6ee7ff; font-weight:700;">Figma</span>
          <span style="color:#a78bfa; font-weight:700;">Adobe</span>
          <span style="color:#38bdf8; font-weight:700;">Webflow</span>
          <span style="color:#22d3ee; font-weight:700;">AWS</span>
          <span style="color:#f472b6; font-weight:700;">Vercel</span>
          <span style="color:#34d399; font-weight:700;">Netlify</span>
        </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><br>
          <p><strong>Email:</strong> info@esempio.it</p>
          <p><strong>LinkedIn:</strong> /nomeprofilo</p>
          <div class="social-icons">
            <a href="#">in</a>
            <a href="#">ig</a>
            <a href="#">dr</a>
            <a href="#">yt</a>
          </div>
        </div>
      </div>
    </section>
  </main>

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