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

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

References

requiredRende obbligatorio un campo di input
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<textarea>Area di testo libero espandibile per form HTML
<em>Formatta il testo in corsivo/italico enfatizzato
<strong>Definisce una parte del testo importante con formattazione in grassetto.

Users

Log in to search for users

Explore

Find inspiration

20240126 pagina html

Form per il torneo misto disfo

Il tuo link per il download è pro

Il bambino e le stelle ma(2)

copia dicountdownfineanno

pagina di prova

Grid of Colors(2)

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.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>