WebDeveloper 2025 - Portfolio Wave by @Darkness977 - Codewith.it

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

Referenze

autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
multipleConverte in lista a selezione multipla
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
<h1>Titolo di intestazione di primo livello
text/plainDefinisce un metodo di non codifica dei valori di un form

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

ES01a\\index.html

Lola Harrel Project 3

pagina prova sara

Mova AI Generico

Prima Coccola ebay(2)(2)(2)

Heads Or Tails Random Tally

HTML con classi

Formattazione testo

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="Portfolio of WebDeveloper 2025 progetto di presentazione, creatività, abilità, e informazioni di contatto.">
  <meta name="keywords" content="WebDeveloper, Portfolio, Web Development, Sviluppo Web,  Progetti, Assistenza, Consulenza, Contatti">
  <title>WebDeveloper 2025 - Portfolio</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=San+Francisco:wght@400;700&display=swap');

    body {
      font-family: 'San Francisco', sans-serif;
      margin: 0;
      padding: 0;
      background-image: linear-gradient(to bottom right, #ff7e5f, #feb47b);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    header {
      position: relative;
      overflow: hidden;
      color: #fff;
      padding: 2rem;
      text-align: center;
      width: 100%;
    }

    .particles {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;
    }

    h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      position: relative;
      z-index: 2;
    }

    nav {
      display: flex;
      justify-content: center;
      margin: 1rem 0;
      background-color: rgba(17, 17, 17, 0.9);
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    nav a {
      color: #feb47b;
      text-decoration: none;
      margin: 0 1rem;
      position: relative;
      overflow: hidden;
      padding: 10px 15px;
      border-radius: 5px;
      transition: background-color 0.3s, color 0.3s;
    }

    nav a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .section {
      width: 80%;
      max-width: 800px;
      margin: 2rem 0;
      background-color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      padding: 2rem;
      text-align: center;
    }

    .links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 1rem 0;
    }

    .links a {
      margin: 0 10px;
      color: #333;
      text-decoration: none;
      transition: color 0.3s;
    }

    .links a:hover {
      color: #feb47b;
    }

    form {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 3rem;
      border: 2px solid #333;
      border-radius: 8px;
      padding: 2rem;
      background-color: #fff;
      width: 550px;
      height: 480px;
      justify-content: center;
    }

    input, textarea {
      width: 80%;
      padding: 1rem;
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-family: 'San Francisco', sans-serif;
      font-size: 1rem;
    }

    button {
      background-color: #333;
      color: #fff;
      padding: 1rem 2rem;
      border: none;
      border-radius: 4px;
      font-family: 'San Francisco', sans-serif;
      font-size: 1rem;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: background-color 0.3s, transform 0.3s;
    }

    button:hover {
      background-color: #feb47b;
      transform: scale(1.05);
    }

    footer {
      background-color: rgba(17, 17, 17, 0.9);
      color: #fff;
      text-align: center;
      padding: 2rem;
      width: 100%;
      position: relative;
    }

    .social-icons a {
      color: #fff;
      margin: 0 10px;
      text-decoration: none;
    }

    footer p {
      margin: 0;
    }
  </style>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var backToTopButton = document.createElement('button');
      backToTopButton.textContent = 'Back to Top';
      backToTopButton.classList.add('back-to-top');
      backToTopButton.addEventListener('click', function() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
      document.body.appendChild(backToTopButton);

      var particles = [];
      for (var i = 0; i < 100; i++) {
        var particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.position = 'absolute';
        particle.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
        particle.style.width = Math.random() * 5 + 'px';
        particle.style.height = particle.style.width;
        particle.style.borderRadius = '50%';
        particle.style.pointerEvents = 'none';
        particles.push(particle);
        document.querySelector('.particles').appendChild(particle);
      }

      function animateParticles() {
        particles.forEach(function(particle) {
          particle.style.top = Math.random() * window.innerHeight + 'px';
          particle.style.left = Math.random() * window.innerWidth + 'px';
        });
      }

      setInterval(animateParticles, 1000);
    });
  </script>
</head>
<body>
  <header>
    <div class="particles"></div>
    <h1>WebDeveloper 2025</h1>
    <p>Cutting-edge web development solutions for the future</p>
  </header>

  <nav>
    <a href="#about">Home</a>
    <a href="#projects">Chi sono</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contatto</a>
  </nav>

  <div id="about" class="section">
    <h2>Chi Sono</h2>
    <p>Mi chiamo Giovanni e sono un web developer con una passione per le ultime tecnologie. Ho una forte esperienza nella creazione di soluzioni web innovative e performanti, utilizzando le migliori pratiche di sviluppo.</p>
  </div>

  <div id="projects" class="section">
    <h2>Di Cosa Mi Occupo</h2>
    <p>Mi occupo principalmente di sviluppo front-end e back-end, creando applicazioni web scalabili e responsive. Collaboro con i clienti per comprendere le loro esigenze e fornire soluzioni personalizzate che migliorano l'esperienza utente.</p>
  </div>

  <div class="section">
    <h2>Esperienze</h2>
    <p>Ho lavorato con diverse aziende, contribuendo a progetti di successo e innovativi in vari settori. La mia esperienza include la gestione di team, la definizione di strategie tecniche e l'implementazione di soluzioni di alta qualità.</p>
  </div>

  <div class="section">
    <h2>Competenze</h2>
    <p>Le mie competenze includono JavaScript, HTML, CSS, React, Node.js, e molto altro. Ho anche esperienza nell'ottimizzazione SEO e nella creazione di interfacce utente intuitive e accessibili, garantendo performance elevate e una migliore usabilità.</p>
  </div>

  <div id="blog" class="section">
    <h2>Ultimi Articoli dal Blog</h2>
    <p>Leggi i miei ultimi articoli per approfondire temi di interesse nel mondo dello sviluppo web.</p>
    <div class="links">
      <a href="#">Articolo 1</a>
      <a href="#">Articolo 2</a>
      <a href="#">Articolo 3</a>
      <a href="#">Articolo 4</a>
      <a href="#">Articolo 5</a>
      <a href="#">Articolo 6</a>
    </div>
  </div>

  <div class="section">
    <h2>Ecco alcuni Partner</h2>
    <p>Collaboro con aziende leader nel settore per offrire soluzioni di alta qualità che soddisfano le esigenze dei clienti. Ogni partnership è costruita su fiducia e risultati tangibili.</p>
  </div>

  <div class="section">
    <h2>Siti di supporto e sviluppo</h2>
    <div class="links">
      <a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a>
      <a href="https://www.w3schools.com" target="_blank">W3Schools</a>
      <a href="https://css-tricks.com" target="_blank">CSS-Tricks</a>
      <a href="https://stackoverflow.com" target="_blank">Stack Overflow</a>
      <a href="https://github.com" target="_blank">GitHub</a>
    </div>
    <div class="links">
      <a href="https://www.freecodecamp.org" target="_blank">FreeCodeCamp</a>
      <a href="https://www.codecademy.com" target="_blank">Codecademy</a>
      <a href="https://www.udemy.com" target="_blank">Udemy</a>
      <a href="https://www.coursera.org" target="_blank">Coursera</a>
    </div>
  </div>

  <form id="contact">
    <h2>Contattami</h2>
    <p>Non esitare a scrivermi! Risponderò entro 24/48 ore. <p/> Puoi anche seguire la mia newsletter o i miei social media.</p>
    <input type="text" placeholder="Nome" required>
    <input type="email" placeholder="Email" required>
    <textarea placeholder="Messaggio" required></textarea>
    <button type="submit">Invia Ora</button>
  </form>

  <footer>
    <p>Follow me on social media:</p>
    <div class="social-icons">
      <a href="#">Facebook</a>
      <a href="#">Twitter</a>
      <a href="#">LinkedIn</a>
      <a href="#">GitHub</a>
    </div>
    <p>&copy; 2025 WebDeveloper 2025. All rights reserved.</p>
  </footer>
</body>
</html>