DDF2025 - CV & Contatti Profession by @Darkness977 - Codewith.it

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

Referenze

<nav>Definisce un menu di navigazione
requiredRende obbligatorio un campo di input
minImposta il valore numerico o temporale minimo per un elemento input
_parentApre collegamenti ipertestuali nell'elemento genitore
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
<tr>Definisce le righe di una tabella (rows)

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Random Tally

Mundane Monday\'s or Fantasic Frid

Costruzione di tabella con html5

WEX prova HTML(2)

prova ennesima tabella

pagina prova sara

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.0">
  <meta name="description" content="Benvenuti nel profilo di Dario Di Fazio, esperto in Digital, UX-Design e Blogger, con esperienze verificate, portfolio online e contatti diretti. Curriculum digitale e pagina personale responsive, ottimizzata per recruiters e aziende.">
  <meta name="keywords" content="Curriculum, Lavoro, Portfolio, Competenze, Esperienza,  Wordpress, Elementor, GPT, SviluppatoreWeb, WebDev, Contatti, SEO, Mobile, CV Digitale">
  <meta name="author" content="Dario Di Fazio">
<title>Dario Di Fazio - CV & Contatti Professionali</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
  <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: 'Inter', sans-serif;
      margin: 0;
      background-color: #121212;
      color: #e0e0e0;
      line-height: 1.6;
      scroll-behavior: smooth;
    }
    header {
      background: linear-gradient(-45deg, #3a1c71, #d76d77, #ffaf7b, #3a1c71);
      background-size: 600% 600%;
      animation: gradientShift 15s ease infinite;
      color: #ffffff;
      padding: 4rem 2rem;
      text-align: center;
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    header img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      border-radius: 10px;
      margin-top: 2rem;
    }
    section {
      padding: 2rem;
      max-width: 960px;
      margin: auto;
    }
    h2 {
      font-weight: 600;
      color: #bb86fc;
      border-bottom: 1px solid #333;
      padding-bottom: 0.3rem;
    }
    a { color: #03dac5; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .contact-info, .social-links { margin-bottom: 2rem; }
    .social-links ul {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 1rem;
      justify-content: center;
    }
    .social-links li { margin: 0; }
    .social-links i {
      margin-right: 0.5rem;
      font-size: 1.2rem;
      vertical-align: middle;
    }
    .form-container {
      background-color: #1f1f1f;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.4);
      margin-top: 2rem;
    }
    input, textarea {
      width: 100%;
      padding: 0.8rem;
      margin: 0.5rem 0;
      background-color: #2c2c2c;
      color: #e0e0e0;
      border: 1px solid #444;
      border-radius: 5px;
    }
    button {
      background-color: #bb86fc;
      color: white;
      padding: 0.8rem 1.2rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }
    button:hover {
      background-color: #9b6ede;
      transform: scale(1.05);
    }
    .download-links {
      text-align: center;
      margin-top: 2rem;
    }
    .download-links a {
      display: inline-block;
      margin: 1rem;
      padding: 0.8rem 1.5rem;
      background: #03dac5;
      color: #121212;
      border-radius: 30px;
      font-weight: bold;
    }
    .download-links a:hover {
      background: #02c1b1;
    }
    #portfolio {
      padding: 2rem;
    }
    #portfolio div {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
    }
    #portfolio img {
      width: 200px;
      height: 150px;
      object-fit: cover;
      border-radius: 6px;
    }
    footer {
      background-color: #0a0a0a;
      color: #bbb;
      text-align: center;
      padding: 4rem 1rem;
      margin-top: 3rem;
    }
    footer .footer-links {
      margin-top: 1rem;
    }
    footer a {
      color: #bbb;
      margin: 0 1rem;
      font-size: 0.9rem;
    }
    footer a:hover {
      color: #fff;
    }
    footer .credits {
      margin-top: 1.5rem;
      font-size: 0.85rem;
    }
    @media (max-width: 768px) {
      header, section { padding: 1.5rem; }
      .social-links ul {
        flex-direction: column;
        align-items: center;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Di Fazio Dario / WebDeveloper</h1>
    <p>Professionista | Problem Solver | [La tua area di competenza]</p>
    <a href="immagine-presentazione.jpg" data-lightbox="profilo" data-title="[Il Tuo Nome] - Professionista nel settore [settore]">
      <img src="immagine-presentazione.jpg" alt="Foto profilo 400x400">
    </a>
  </header>

  <section class="contact-info">
    <h2>Contatti</h2>
    <p><i class="fas fa-envelope"></i> Email: <a href="mailto:tuo@email.com">tuo@email.com</a></p>
    <p><i class="fas fa-phone"></i> Cellulare: <a href="tel:+391234567890">+39 123 456 7890</a></p>
  </section>

  <section class="social-links">
    <h2>Social Media</h2>
    <ul>
      <li><i class="fab fa-linkedin" style="color:#0e76a8;"></i><a href="https://linkedin.com/in/iltuonome" target="_blank">LinkedIn</a></li>
      <li><i class="fab fa-github" style="color:#ffffff;"></i><a href="https://github.com/iltuonome" target="_blank">GitHub</a></li>
      <li><i class="fab fa-x-twitter" style="color:#1da1f2;"></i><a href="https://twitter.com/iltuonome" target="_blank">Twitter</a></li>
    </ul>
  </section>

  <section>
    <h2>Chi sono e di cosa mi occupo</h2>
    <p>Professionista con esperienza in [settore] e una comprovata attitudine al problem solving. Ho collaborato con aziende locali e internazionali su progetti complessi, maturando competenze trasversali e capacità di leadership. Tra le mie qualità principali: organizzazione, comunicazione e orientamento ai risultati.</p>
  </section>

  <section>
    <h2>Competenze (digitali, attrezzatura)</h2>
    <ul>
      <li>Gestione progetti</li>
      <li>Problem Solving avanzato</li>
      <li>Lingue: Italiano, Inglese, [altre]</li>
      <li>Strumenti: Office, Adobe, GIMP, Mage AI, GPT, Wordpress, Elementor, KadenceAI, Stackable, 10Web, Durable, SEO Surfer, SEO Audit, Rankister, MailerLite, LogoDesign, Figma, VSCode, [altri software di settore]</li>
    </ul>
  </section>

  <section>
    <h2>Esperienze</h2>
    <p><strong>Azienda XYZ</strong> – Project Manager (2020–2024)</p>
    <p>Gestione di team interfunzionali, sviluppo soluzioni digitali, ottimizzazione dei processi aziendali.</p>
    <p><strong>Azienda ABC</strong> – Analista (2017–2020)</p>
    <p>Analisi dati, supporto decisionale strategico, collaborazione con i reparti IT e marketing.</p>
  </section>

  <section id="portfolio">
    <h2>Portfolio</h2>
    <div>
      <a href="img/progetto1.jpg" data-lightbox="portfolio" data-title="Progetto UX App Mobile - Design intuitivo e responsive">
        <img src="img/progetto1.jpg" alt="Progetto 1">
      </a>
      <a href="img/progetto2.jpg" data-lightbox="portfolio" data-title="Sito Web Aziendale - Fullstack con CMS">
        <img src="img/progetto2.jpg" alt="Progetto 2">
      </a>
      <a href="img/progetto3.jpg" data-lightbox="portfolio" data-title="Logo e Identità Visiva per Brand Digitale">
        <img src="img/progetto3.jpg" alt="Progetto 3">
      </a>
      <a href="img/progetto4.jpg" data-lightbox="portfolio" data-title="E-commerce Design con UX Ottimizzata">
        <img src="img/progetto4.jpg" alt="Progetto 4">
      </a>
      <a href="img/progetto5.jpg" data-lightbox="portfolio" data-title="Progetto Branding completo e strategie digitali">
        <img src="img/progetto5.jpg" alt="Progetto 5">
      </a>
    </div>
  </section>

  <section class="download-links">
    <a href="CV_IlTuoNome.pdf" download>Scarica il CV</a>
    <a href="https://iltuoportfolio.com" target="_blank">Portfolio Online</a>
  </section>

  <section class="form-container">
    <h2>Contattami</h2>
    <form action="mailto:tuo_nome@email.com" method="post" enctype="text/plain">
      <input type="text" name="name" placeholder="Il tuo nome" required>
      <input type="email" name="email" placeholder="La tua email" required>
      <textarea name="message" rows="5" placeholder="Scrivi il tuo messaggio qui..." required></textarea>
      <button type="submit">Invia Ora</button>
    </form>
  </section>

  <footer>
    <div class="footer-links">
      <a href="#">Privacy</a> |
      <a href="#">Condizioni di Garanzia</a> |
      <a href="#">GDPR</a>
    </div>
    <div class="credits">
      Creato con ❤️ da <strong style="color:#bb86fc;">JustDesign.com</strong>
    </div>
    <p>&copy; 2025 creato da DiFazioDesign (@Moebyus). Tutti i diritti riservati.</p>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>AOS.init();</script>
</body>
</html>