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

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

Referenze

typeSpecifica la tipologia/funzione di un elemento.
<ol>Crea liste ordinate o numerate.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<nav>Definisce un menu di navigazione
formnovalidateImpedisce la convalida di un singolo elemento input
<address> Definisce una sezione contenente indirizzi, contatti e informazioni

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

GreenBox - Giardinaggio a casa tua

sanchez ximena project 2

Heads Or Tails Random Tally

PixFlow Agency | Web Design, Video

Selezione Telefoni

Curriculum vitae

TABELLA RIEPILOGATIVA

Esercitazione 2

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>