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

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

Referenze

<html>Tag primario di un documento HTML
listCollega un elemento input con una lista di opzioni datalist
<video>Integra e controlla video in una pagina HTML
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
minlengthDetermina il numero minimo di caratteri per un elemento input
<ol>Crea liste ordinate o numerate.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

cambio parola al click

Review of Functions I

Costruzione di tabella con html5

Interactive Map

Esercizio sui cicli

VERDERAME | Serra e Orto Botanico

Riprova verifica di progr

Suono musicista 09/02/24

Grafico a torta

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