CV animato 1 by @virginia.albanese - Codewith.it

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

References

<b>Formatta il testo in grassetto
<tbody>Definisce il contenuto principale di una tabella.
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
text/plainDefinisce un metodo di non codifica dei valori di un form
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<i>Formatta il testo in corsivo/italico non enfatizzato

Users

Log in to search for users

Explore

Find inspiration

AirPods Shop LOGIN(2)

La mia prima pagina HTML

Tabella base (lezione 10)

Esercitazione Morra cines

esercitazione4.html

JS Oggetti ed eventi es3

Immagini con didascalia

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" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap" rel="stylesheet">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=Honk&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="CV_style">

</head>

<body>

  <!-- Barra di navigazione -->
  <nav>
    <a href="#intro">Introduzione</a>
    <a href="#formazione">Formazione</a>
    <a href="#esperienza">Esperienza Lavorativa</a>
    <a href="#competenze">Competenze</a>
    <a href="#contatti">Contatti</a>
  </nav>

  <!-- INTRODUZIONE -->
  <header id="intro" class="sfondotesto">
    <p class="sottotitolo_h4" style="color: rgb(116, 58, 58);">Curriculum Vitae</p>
    <h1 id="titolo">Virginia Albanese</h1>
    <div class="contenitore">
      <img class="immagine" src="https://i.imgur.com/YGl2ZmP.jpeg" alt="Questa sono io!">
      <p> Mi chiamo Virginia Albanese e frequento il Liceo Tito Lucrezio Caro a Cittadella (PD). <br> Sono nata il 22 maggio 2007 a Cittadella. <br> Sono residente in Via ****** 32/a, S.Martino di Lupari (PD). <br> Mi piace cucinare, disegnare, suonare, leggere. <br> Ho esperienza nell'animazione di bambini di tutte le fasce d'età (dagli 0 ai 12 anni). </p>
    </div>
  </header>

  <main>

    <!-- FORMAZIONE -->
    <section id="formazione" class="sfondotesto">
      <h2 class="sottotitolo_h2">Formazione</h2>
      <div class="testo">
        <span class="sottotitolo_h3">Liceo Statale Tito Lucrezio Caro</span> | Cittadella, Settembre 2021 - oggi 
        <h4 class="sottotitolo_h4">Corsi di formazione sulla Sicurezza per "Studenti equiparati ai Lavoratori"</h4>
        <ul>
          <li>"Formazione per lavoratori - Formazione Generale" | 4 ore</li>
          <li>"Formazione specifica rischio basso" | 4 ore</li>
          <li>"L'incendio e i mezzi estinguenti" | 2 ore</li>
          <li>"Videoterminali: salute, sicurezza, ergonomia" | 4 ore</li>
        </ul>
      </div>
    </section>

    <!-- ESPERIENZA LAVORATIVA -->
    <section id="esperienza" class="sfondotesto">
      <h2 class="sottotitolo_h2">Esperienza Lavorativa</h2>
      <div class="testo">
        <span class="sottotitolo_h3">Stage PCTO, Biblioteca "Villa Rina"</span> | Comune di Cittadella, Giugno 2024 | 40 ore
        <ul>
          <li>Gestione del flusso dei prestiti e verifica dello stato dei libri.</li>
          <li>Catalogazione dei libri e dei beni della biblioteca con l'uso del software aziendale.</li>
          <li>Accoglienza e orientamento degli utenti nella ricerca di libri.</li>
        </ul>
      </div>
    </section>

    <!-- COMPETENZE -->
    <section id="competenze" class="sfondotesto">
      <h2 class="sottotitolo_h2">Capacità e Competenze</h2>
      <div class="testo">
        <h3 class="sottotitolo_h3">Hard Skills</h3>
        <ul>
          <li>Conoscenza del pacchetto Office</li>
          <li>Conoscenza base di HTML</li>
          <li>Conoscenza intermedia di C++</li>
          <li>Conoscenza di AUTOCAD e Sketchup</li>
        </ul>
        <h3 class="sottotitolo_h3">Soft Skills</h3>
        <ul>
          <li>Doti comunicative</li>
          <li>Problem solving</li>
          <li>Flessibilità</li>
        </ul>
      </div>
    </section>

    <!-- CONTATTI -->
    <section id="contatti" class="sfondotesto">
      <h2 class="sottotitolo_h2">Contatti</h2>
      <div class="testo">
        <div>
          <button title="Clicca qui per copiare" type="button" id="copiaButton_1">E-mail personale</button>
          <p style="display:none" id="testoCopia_1">virg*******@gmail.com</p>
        </div>
        <div>
          <button title="Clicca qui per copiare" type="button" id="copiaButton_2">Numero di telefono</button>
          <p style="display:none" id="testoCopia_2">+39 320*******8</p>
        </div>
      </div>
    </section>

  </main>

  <footer>
    <p>Ultimo aggiornamento: Ottobre 2024</p>
  </footer>

  <script>
    // Copia e mostra l'email o il numero di telefono
    document.getElementById('copiaButton_1').addEventListener('click', function() {
      let testo = document.getElementById('testoCopia_1');
      testo.style.display = testo.style.display === 'none' ? 'block' : 'none';
    });
    document.getElementById('copiaButton_2').addEventListener('click', function() {
      let testo = document.getElementById('testoCopia_2');
      testo.style.display = testo.style.display === 'none' ? 'block' : 'none';
    });
  </script>

</body>
</html>

body { 
      background-image: url(https://artslife.com/wp-content/uploads/2017/02/Immagine1.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    header {
      text-align: center;
      padding-top: 20px;
    }
    #titolo {
      font-family: "Londrina Sketch", sans-serif;
      font-weight: 900;
      color: #2d6b8c;
      font-size: 60px;
    }
    .contenitore {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 20px;
      align-items: center;
      text-align: left;
    }
    .immagine {
      width: 150px;
      height: auto;
    }
    .sottotitolo_h2 {
      font-family: "Akaya Kanadaka", system-ui;
      font-weight: 550;
      font-size: 35px;
      color: rgb(45, 107, 140);
    }
    .sottotitolo_h3 {
      font-size: 18px;
      font-weight: 600;
      font-family: Georgia, 'Times New Roman', Times, serif;
    }
    .sottotitolo_h4 {
      font-size: 15px;
      font-style: italic;
    }
    .testo {
      color: rgb(116, 58, 58);
      font-size: 14px;
    }
    .sfondotesto {
      background-color: rgba(156, 203, 239, 0.5);
      padding: 20px;
      margin: 60px;
      border-radius: 15px;
    }
    button {
      background-color: #dbd0bfbd;
      border-color: rgb(116, 46, 46);
      color: #2d6b8c;
      padding: 3px 10px;
      border-radius: 15px;
      font-size: 16px;
    }
    footer {
      font-style: italic;
      text-align: center;
      background-color: #dbd0bfbe;
    }
    nav {
      background-color: #dbd0bfbe;
      padding: 10px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    nav a {
      margin: 0 15px;
      font-size: 18px;
      color: #2d6b8c;
      text-decoration: none;
      font-weight: bold;
    }
    nav a:hover {
      color: rgb(116, 58, 58);
    }
    /* Aggiunta di transizioni */
    .sfondotesto, button, nav a {
      transition: transform 0.3s ease, background-color 0.3s ease;
    }
    .sfondotesto:hover {
      transform: scale(1.02);
    }
    button:hover {
      background-color: #f0e6d9;
    }