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

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

Referenze

<textarea>Area di testo libero espandibile per form HTML
text/plainDefinisce un metodo di non codifica dei valori di un form
postDefinisce un metodo di invio di dati al server
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<option>Serve ad inserire una voce in un menu di selezione.
<ul>Usato per la creazione di liste non ordinate.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercizi 05/03/2024 es1

La Storia di Cappuccetto Rosso

esercizio gatto

Il mio primo file HTML

JS Strutture dati e funzioni es2

UI/UX Dashboard

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>