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

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

References

<li>Inserisce voci all'interno di una lista
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<html>Tag primario di un documento HTML
animationDefinisce i parametri dell'animazione di un elemento o selettore

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

Esercitazione Morra cines

Prep. Esame pt.3

Promo Weber 2025

Editor di testo HTML

Calcolatrice classica

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