Portfolio Base Freelance – Web, by @Darkness977 - Codewith.it

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

References

mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
getDefinisce un metodo di invio di dati al server
_topApre collegamenti ipertestuali nell'elemento parent assoluto
postDefinisce un metodo di invio di dati al server
<div>Crea contenitori generici o sezioni in una pagina
sizeDetermina le dimensioni dell'elemento in base al valore contenuto

Users

Log in to search for users

Explore

Find inspiration

Favola dei tre porcellini(2)

ES01a\\index.html

Round+ - social bar

BuzzTech Blog | News blog Magazine

Quiz ristrutturazione

CodeALongButton

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>Portfolio Freelance – Web & UX Design</title>

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

  <style>
    :root {
      --bg: #0e0f13;
      --bg-soft: #151720;
      --text: #f5f6fa;
      --text-muted: #b5b8c5;
      --accent: #7c7cff;
      --accent-soft: rgba(124,124,255,0.15);
      --radius: 20px;
      --transition: 0.3s 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;
    }

    img {
      max-width: 100%;
      display: block;
    }

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

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

    section {
      padding: 200px 0;
    }

    /* Navbar */
    header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      backdrop-filter: blur(10px);
      background: rgba(14,15,19,0.6);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }

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

    .nav .logo {
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .nav ul {
      display: flex;
      gap: 32px;
      list-style: none;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .nav li {
      font-size: 14px;
      color: var(--text-muted);
      transition: color var(--transition);
    }

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

    .nav .cta {
      padding: 10px 18px;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
    }

    /* Hero */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    .hero-content {
      max-width: 760px;
    }

    .hero h1 {
      font-size: clamp(40px, 6vw, 64px);
      line-height: 1.1;
      margin-bottom: 32px;
      letter-spacing: -1.5px;
    }

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

    .hero-actions {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
      padding: 16px 28px;
      border-radius: 999px;
      font-weight: 500;
      transition: transform var(--transition), box-shadow var(--transition);
    }

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

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

    /* Sections */
    .section-title {
      font-size: 36px;
      margin-bottom: 24px;
      letter-spacing: -0.8px;
    }

    .section-intro {
      max-width: 620px;
      color: var(--text-muted);
      margin-bottom: 80px;
    }

    /* Services */
    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 32px;
    }

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

    .service-card:hover {
      transform: translateY(-6px);
      background: #1a1c27;
    }

    .service-card h3 {
      margin-bottom: 16px;
      font-size: 20px;
    }

    .service-card p {
      color: var(--text-muted);
      font-size: 15px;
    }

    /* Authority */
    .metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 48px;
    }

    .metric {
      text-align: center;
    }

    .metric strong {
      display: block;
      font-size: 48px;
      margin-bottom: 8px;
      color: var(--accent);
    }

    .metric span {
      color: var(--text-muted);
      font-size: 14px;
    }

    /* FAQ */
    details {
      background: var(--bg-soft);
      border-radius: var(--radius);
      padding: 24px 32px;
      margin-bottom: 16px;
      cursor: pointer;
    }

    details summary {
      font-weight: 500;
      list-style: none;
    }

    details p {
      margin-top: 16px;
      color: var(--text-muted);
      font-size: 15px;
    }

    /* Contact */
    .contact-box {
      background: linear-gradient(135deg, var(--accent-soft), transparent);
      border-radius: var(--radius);
      padding: 80px;
    }

    .contact-box p {
      color: var(--text-muted);
      max-width: 520px;
      margin-bottom: 40px;
    }

    form {
      display: grid;
      gap: 24px;
      max-width: 520px;
    }

    input, textarea {
      background: #0c0d12;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 16px 18px;
      border-radius: 12px;
      color: var(--text);
      font-family: inherit;
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

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

    /* Responsive */
    @media (max-width: 768px) {
      section {
        padding: 120px 0;
      }

      .nav ul {
        display: none;
      }

      .contact-box {
        padding: 48px 32px;
      }
    }
  </style>
</head>
<body>

<header>
  <div class="container nav">
    <div class="logo">Nome Cognome</div>
    <ul>
      <li><a href="#servizi">Servizi</a></li>
      <li><a href="#metodo">Metodo</a></li>
      <li><a href="#faq">FAQ</a></li>
      <li><a href="#contatti">Contatti</a></li>
    </ul>
    <a href="#contatti" class="cta">Call gratuita</a>
  </div>
</header>

<main>
  <section class="hero">
    <div class="container hero-content">
      <h1>Progetto esperienze digitali chiare, utili 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">
    <div class="container">
      <h2 class="section-title">Come posso aiutarti</h2>
      <p class="section-intro">Ogni progetto parte da un problema reale e arriva a una soluzione concreta, misurabile e sostenibile.</p>

      <div class="services">
        <div class="service-card">
          <h3>Web Design & UI</h3>
          <p>Siti eleganti, veloci e coerenti con il tuo posizionamento, progettati per comunicare valore fin dal primo scroll.</p>
        </div>
        <div class="service-card">
          <h3>UX & Conversione</h3>
          <p>Architettura delle informazioni, flussi e micro-copy pensati per ridurre attrito e aumentare fiducia.</p>
        </div>
        <div class="service-card">
          <h3>Content & Strategia</h3>
          <p>Contenuti chiari e orientati al business, che parlano alle persone giuste nel momento giusto.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="metodo">
    <div class="container">
      <h2 class="section-title">Esperienza e metodo</h2>
      <p class="section-intro">Lavoro con un approccio strutturato, basato su ascolto, analisi e scelte consapevoli.</p>

      <div class="metrics">
        <div class="metric">
          <strong>20+</strong>
          <span>Anni di esperienza</span>
        </div>
        <div class="metric">
          <strong>150+</strong>
          <span>Progetti realizzati</span>
        </div>
        <div class="metric">
          <strong>B2B</strong>
          <span>Focus su professionisti e aziende</span>
        </div>
      </div>
    </div>
  </section>

  <section id="faq">
    <div class="container">
      <h2 class="section-title">Domande frequenti</h2>
      <details>
        <summary>Quanto dura la call gratuita?</summary>
        <p>La call dura 30 minuti ed è senza impegno. Serve per capire se e come posso aiutarti.</p>
      </details>
      <details>
        <summary>Lavori solo su progetti completi?</summary>
        <p>No, posso intervenire anche su singole fasi: UX review, redesign o consulenza strategica.</p>
      </details>
      <details>
        <summary>Che tipo di clienti segui?</summary>
        <p>Principalmente freelance, consulenti e piccole/medie realtà B2B.</p>
      </details>
    </div>
  </section>

  <section id="contatti">
    <div class="container">
      <div class="contact-box">
        <h2 class="section-title">Parliamo del tuo progetto</h2>
        <p>Nessuna vendita forzata, nessuna pressione. Solo una conversazione onesta per capire se ha senso collaborare.</p>

        <form>
          <input type="text" placeholder="Nome e cognome" required />
          <input type="email" placeholder="Email" required />
          <textarea placeholder="Raccontami brevemente il tuo progetto"></textarea>
          <button type="submit" class="btn-primary">Invia richiesta</button>
        </form>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="container">
    © 2025 – Nome Cognome · Web & UX Designer Freelance
  </div>
</footer>

</body>
</html>