X-Dsigner (Blu Eletric) – WebKin by @Darkness977 - Codewith.it

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

References

<h5>Titolo di intestazione di quinto livello
<ol>Crea liste ordinate o numerate.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
_topApre collegamenti ipertestuali nell'elemento parent assoluto
formSpecifica a quale form appartiene un elemento.

Users

Log in to search for users

Explore

Find inspiration

Costruzione di tabella con html5

Autovalutazione.it

Indovina il Numero - Gioco

JS Oggetti ed eventi es2

Page not found - Codewith.it

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 Solutions, Strategist SEO & UX Designer Freelance</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.7;
  -webkit-font-smoothing: antialiased;
  font-size: 15px; /*CTA Call 30min*/
}
a { color: inherit; text-decoration: none; }

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

section { padding: 140px 0; } /* padding uniforme su tutte le sezioni */

/* NAVBAR */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  background: rgba(17,18,24,0.85);
  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: 24px;
  letter-spacing: -0.3px;
  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);
}

/* Wrapper menu */
.nav-menu {
  flex: 1;                   /* occupa spazio tra logo e CTA */
  display: flex;
  justify-content: center;    /* centra le voci */
}

.nav-menu ul {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-menu li {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  transition: color var(--transition);
}
.nav-menu 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;
  background: linear-gradient(180deg, #1a1c27 0%, #111218 100%);
}

.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;
}

.hero-content { max-width: 780px; position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(44px, 6vw, 68px);
  line-height: 1.2;
  margin-bottom: 43px;
  letter-spacing: -1.5px;
  animation: fadeInUp 2.1s 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: 20px; color: var(--text-muted); margin-bottom: 70px; }

.hero-actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.btn-primary,
.btn-secondary {
  padding: 15px 28px;
  border-radius: 19px; /*arrotondo bottoni con stile*/
  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); }
}
@keyframes slowFloat {
  from { transform: translateY(0) translateX(0); }
  to { transform: translateY(-140px) translateX(-60px); }
}

/* SEZIONI ALTERNATE */
.alt-bg { background: linear-gradient(135deg, #1a1c27, #202336); }

/* 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: 810px;
  margin: 0 auto 19px;
  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: 21px; color: var(--text-muted); }

/* CONTACT */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1.9fr 1.0fr;
  gap: 48px;
}
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form .form-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  flex: 1;
  padding: 18px 18px;
  border-radius: var(--radius);
  border: none;
  background: var(--bg-soft);
  color: var(--text);
}
.contact-form textarea { resize: vertical; }
.contact-info { color: var(--text-muted); font-size: 18px; }

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

/* MEDIA QUERY */
@media (max-width: 900px) {
  section { padding: 100px 0; }
  .nav-menu ul { display: none; flex-direction: column; }
  .contact-wrapper { grid-template-columns: 1fr; }
  .contact-form .form-row { flex-direction: column; }
}
</style>
</head>

<body>

<header>
  <div class="container nav">
    <div class="logo">X-Dsigner</div>
    <nav class="nav-menu">
      <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>
    </nav>
    <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>

  <!-- Sezioni con sfondi alternati -->
  <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" style="background: linear-gradient(180deg, #202336 0%, #1a1c27 100%);">
    <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 efficaci se sei munito/a di dati chiari (settore, obiettivi, audience, tipo di sito) 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 e freelancing.</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 piccoli progetti.</p></details>
      <details><summary>Metodi di Pagamento?</summary><p>Accetto pagamenti con PayPal, Stripe e PostePay (anche bonifico, carte di Credito).</p></details>
      <details><summary>Collaborazioni?</summary><p>Sì, su progetti selezionati.</p></details>
      
      <details><summary>Come iniziamo?</summary><p>Con una call conoscitiva, senza impegno e orientata a valutare il tuo progetto effetivo.</p></details>
    </div>
  </section>

  <section id="contatti">
    <div class="container">
      <div class="contact-wrapper">
        <div class="contact-form">
          <h2 class="section-title">Parliamo del tuo progetto</h2>
          <p>Nessuna vendita forzata, raccontami cosa vuoi migliorare.</p><br>
          <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><br>
          <p><strong>Disponibilità</strong><br>Remote · Europa · Italy</p><br>
          <p><strong>Approccio</strong><br>Consulenziale, orientato ai risultati</p><br><br>
          <p><strong>Social</strong><br>LinkedIn · Dribbble · Behance</p>
        </div>
      </div>
    </div>
  </section>

</main>

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