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

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

References

listCollega un elemento input con una lista di opzioni datalist
hreflangConsente di dichiarare la lingua del documento collegato.
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<i>Formatta il testo in corsivo/italico non enfatizzato
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
valueValore alfanumerico o booleano contenuto in un elemento

Users

Log in to search for users

Explore

Find inspiration

la mia prima pagina html pt3

Micheal Jackson fanpage - Codewith

Pagina HTML prova

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>