X-Dsigner (Blu Eletric)– Web & U by @Darkness977 - Codewith.it

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

References

animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<h6>Titolo di intestazione di sesto livello
valueValore alfanumerico o booleano contenuto in un elemento
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<q>Indica una parte di testo come citazione breve
<option>Serve ad inserire una voce in un menu di selezione.

Users

Log in to search for users

Explore

Find inspiration

affettiminoriwill

Link sito di Jacopo Picco

Heads Or Tails Random Tally

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" />
  <meta name="description" content="Portfolio freelance di Web Design, UX Design e Content Creation per B2B, freelance e liberi professionisti." />
  <title>X-Dsigner – Web & UX Design</title>

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

  <style>
    :root {
      --bg: #111218;
      --bg-soft: #1a1c27;
      --bg-alt: linear-gradient(135deg, #1a1c27, #202336);
      --text: #f5f6fa;
      --text-muted: #c2c6d8;
      --accent: #7c7cff;
      --accent-2: #4fd1c5;
      --accent-soft: rgba(124,124,255,0.15);
      --radius: 20px;
      --transition: 0.35s ease;
      --max-width: 1180px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
    }

    a { color: inherit; text-decoration: none; }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
    }

    section { padding: 180px 0; }

    /* NAVBAR */
    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      backdrop-filter: blur(12px);
      background: rgba(17,18,24,0.75);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

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

    .logo {
      font-weight: 900;
      font-size: 22px;
      letter-spacing: -0.5px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: transform var(--transition), filter var(--transition);
    }

    .logo:hover {
      transform: scale(1.05);
      filter: brightness(1.15);
    }
    }

    .nav ul {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 36px;
      list-style: none;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
    }(-50%);
      font-size: 16px;
    }

    .nav li { color: var(--text-muted); transition: color var(--transition); }
    .nav li:hover { color: var(--text); }

    .cta {
      padding: 11px 22px;
      border-radius: 19px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      color: #fff;
      font-weight: 600;
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(124,124,255,0.35); }

    /* HERO */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 40% 60% 55% 45%;
      background: radial-gradient(circle, var(--accent-soft), transparent 70%);
      animation: slowFloat 28s infinite alternate ease-in-out;
    }

    .hero::after {
      background: radial-gradient(circle, rgba(79,209,197,0.16), transparent 70%);
      top: 20%;
      right: -180px;
      animation-delay: 10s;
    }


    /* centra menu principale (verifica-errori-navbar)*/


    @keyframes slowFloat {
      from { transform: translateY(0) translateX(0); }
      to { transform: translateY(-140px) translateX(-60px); }
    }

    @keyframes float {
      from { transform: translateY(0); }
      to { transform: translateY(-120px); }
    }

    .hero-content { max-width: 780px; position: relative; z-index: 2; }

    .hero h1 {
      font-size: clamp(44px, 6vw, 68px);
      line-height: 1.1;
      margin-bottom: 32px;
      letter-spacing: -1.5px;
      animation: fadeInUp 1.8s ease forwards;
    }

    .hero h1 span {
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero p { font-size: 22px; color: var(--text-muted); margin-bottom: 56px; }

    .hero-actions {
      display: flex;
      gap: 28px;
      align-items: center;
      flex-wrap: wrap;
    }

    .btn-primary,
    .btn-secondary {
      padding: 15px 28px;
      border-radius: 19px;
      font-weight: 600;
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    }

    .btn-primary {
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      color: #fff;
    }

    .btn-secondary { color: var(--text-muted); }

    .btn-primary:hover,
    .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(124,124,255,0.3); }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ALTERNATE SECTIONS */
    .alt-bg { background: var(--bg-alt); }

    /* SERVICES, METRICS, PORTFOLIO */
    .services, .metrics, .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 32px;
    }

    .card {
      background: var(--bg-soft);
      border-radius: var(--radius);
      padding: 40px;
      transition: transform var(--transition), background var(--transition);
    }

    .card:hover { transform: translateY(-6px); background: #22243a; }

    .metric strong {
      font-size: 52px;
      color: var(--accent);
      display: block;
    }

    /* PORTFOLIO TABS */
    .tabs { display: flex; gap: 24px; margin-bottom: 48px; }
    .tab { cursor: pointer; color: var(--text-muted); font-weight: 600; }
    .tab.active { color: var(--accent); }

    /* FAQ */
    details {
      max-width: 840px;
      margin: 0 auto 16px;
      background: linear-gradient(135deg, #262845, #1b1d33);
      border-radius: var(--radius);
      padding: 16px 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    }
    }

    details summary { font-weight: 600; cursor: pointer; }
    details p { margin-top: 16px; color: var(--text-muted); }

    /* CONTACT */
    .contact-wrapper {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 48px;
    }

    .contact-info {
      color: var(--text-muted);
      font-size: 16px;
    }

    footer { padding: 80px 0 40px; text-align: center; color: var(--text-muted); font-size: 14px; }

    @media (max-width: 900px) {
      section { padding: 120px 0; }
      .nav ul { display: none; }
      .contact-wrapper { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>

<header>
  <div class="container nav">
    <div class="logo">X-Dsigner</div>
    <ul>
      <li><a href="#servizi">Servizi</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#faq">FAQ</a></li>
      <li><a href="#contatti">Contatti</a></li>
    </ul>
    <a href="#contatti" class="cta">Call GRATUITA 30min</a>
  </div>
</header>

<main>
  <section class="hero">
    <div class="container hero-content">
      <h1>Progetto <span>esperienze digitali</span> chiare, uniche e orientate ai risultati.</h1>
      <p>Aiuto freelance, professionisti e realtà B2B a trasformare siti e contenuti in strumenti di business, senza fronzoli inutili.</p>
      <div class="hero-actions">
        <a href="#contatti" class="btn-primary">Prenota una call gratuita</a>
        <a href="#servizi" class="btn-secondary">Scopri come lavoro</a>
      </div>
    </div>
  </section>

  <section id="servizi" class="alt-bg">
    <div class="container">
      <div class="services">
        <div class="card"><h3>Web Design & UI</h3><p>Siti eleganti, veloci e coerenti con il tuo posizionamento.</p></div>
        <div class="card"><h3>UX & Conversione</h3><p>Flussi e architettura pensati per ridurre attrito.</p></div>
        <div class="card"><h3>Content & Strategia</h3><p>Contenuti chiari e orientati al business.</p></div>
      </div>
    </div>
  </section>


  <section id="portfolio" class="alt-bg">
    <div class="container">
      <h2 class="section-title">Portfolio selezionato</h2>
      <p class="section-intro">Una selezione di progetti rappresentativi che mostrano approccio, metodo e risultati.</p>

      <div class="tabs">
        <div class="tab active">Web Design</div>
        <div class="tab">UX Design</div>
        <div class="tab">Content</div>
      </div>

      <div class="portfolio-grid">
        <div class="card">
          <img src="https://via.placeholder.com/600x420" alt="Progetto 1">
          <p>Sito corporate per consulente B2B</p>
        </div>
        <div class="card">
          <img src="https://via.placeholder.com/600x420" alt="Progetto 2">
          <p>Redesign UX piattaforma SaaS</p>
        </div>
        <div class="card">
          <img src="https://via.placeholder.com/600x420" alt="Progetto 3">
          <p>Landing page conversion-oriented</p>
        </div>
        <div class="card">
          <img src="https://via.placeholder.com/600x420" alt="Progetto 4">
          <p>Identità digitale freelance</p>
        </div>
      </div>
    </div>
  </section>


  <section class="alt-bg">
    <div class="container">
      <h2 class="section-title">Cosa dicono i clienti</h2>
      <p class="section-intro">Professionisti e aziende che hanno già lavorato con me.</p>
      <div class="services">
        <div class="card">
          <img src="https://via.placeholder.com/64" alt="Cliente 1">
          <h4>Marco, 42</h4>
          <p>★★★★★</p>
          <p>Professionale, chiaro e orientato ai risultati.</p>
        </div>
        <div class="card">
          <img src="https://via.placeholder.com/64" alt="Cliente 2">
          <h4>Laura, 36</h4>
          <p>★★★★★</p>
          <p>Ha migliorato radicalmente la qualità del nostro sito.</p>
        </div>
        <div class="card">
          <img src="https://via.placeholder.com/64" alt="Cliente 3">
          <h4>Andrea, 39</h4>
          <p>★★★★☆</p>
          <p>Metodo solido e comunicazione trasparente.</p>
        </div>
      </div>
    </div>
  </section>


  <section style="margin-top:250px" id="faq" class="alt-bg">
    <div class="container">
      <details open><summary>Quanto dura la call gratuita?</summary><p>30 minuti senza impegno. Per risposte più efficaci se sei dotato e munito/a di dati e info del tuo progetto, mi aiuta a valutare la soluzione ottimale in tempi rapidi</p></details>
      <details><summary>Lavori solo su progetti completi?</summary><p>No, anche consulenze singole. Adotto tecniche di fast prototyphing e framework modulari</p></details>
      <details><summary>Segui solo B2B?</summary><p>Principalmente sì. Ma posso, se richiesto sviluppare per liberi professionisti, creativi o il mondo del business</p></details>
      <details><summary>Costi indicativi?</summary><p>Dipende dal progetto.</p></details>
      <details><summary>Tempistiche?</summary><p>Variabili. Ma si parte da 3-4 settimane per progetti piccoli</p></details>
      <details><summary>Collaborazioni?</summary><p>Sì, su progetti selezionati.</p></details>
      <details><summary>Come iniziamo?</summary><p>Con una call conoscitiva.</p></details>
    </div>
  </section>

<section id="contatti">
  <div class="container">
    <div class="contact-box contact-wrapper">
      <div class="contact-form">
        <h2 class="section-title">Parliamo del tuo progetto</h2>
        <p>Nessuna vendita forzata, raccontami cosa vuoi migliorare e capiamo insieme se posso aiutarti.</p>
        <form>
          <div class="form-row">
            <input type="text" placeholder="Nome e cognome" required>
            <input type="email" placeholder="Email" required>
          </div>
          <div class="form-row">
            <input type="text" placeholder="Ruolo / Azienda">
            <select required>
              <option value="">Come mi hai conosciuto?</option>
              <option value="linkedin">LinkedIn</option>
              <option value="dribbble">Dribbble</option>
              <option value="behance">Behance</option>
              <option value="passaparola">Passaparola</option>
              <option value="altro">Altro</option>
            </select>
          </div>
          <div class="form-row">
            <textarea placeholder="Descrivi brevemente il progetto" rows="5"></textarea>
          </div>
          <div class="form-row">
            <select required>
              <option value="">Budget progetto</option>
              <option value="1k-3k">€1.000 – €3.000</option>
              <option value="3k-5k">€3.000 – €5.000</option>
              <option value="5k-10k">€5.000 – €10.000</option>
              <option value="10k+">€10.000+</option>
            </select>
          </div>
          <button type="submit" class="btn-primary">Invia richiesta</button>
        </form>
      </div>
      <div class="contact-info">
        <p><strong>Email</strong><br>hello@x-dsigner.it</p>
        <p><strong>Disponibilità</strong><br>Remote · Europa · Italy</p>
        <p><strong>Approccio</strong><br>Consulenziale, orientato ai risultati</p><br>
        <p><strong>Social</strong><br>LinkedIn · Dribbble · Behance</p>
      </div>
    </div>
  </div>
</section>

<style>
.contact-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form .form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: none;
  background: var(--bg-soft);
  color: var(--text);
}

.contact-form textarea { resize: vertical; }

@media (max-width: 900px) {
  .contact-wrapper { grid-template-columns: 1fr; }
  .contact-form .form-row { flex-direction: column; }
}
</style>


  </section>


</main>


<script>
  // FAQ accordion
  const details = document.querySelectorAll('details');
  details.forEach(d => d.addEventListener('toggle', e => {
    if (d.open) details.forEach(o => o !== d && o.removeAttribute('open'));
  }));
</script>

<footer>
  <div class="container">JustDesign © Thinked & Developed 2025 – X-Dsigner · Web & UX Designer Freelance</div>
</footer>


</body>
</html>