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

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

References

classDefinisce una o più classi per elemento
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<tbody>Definisce il contenuto principale di una tabella.
maxImposta il valore numerico o temporale massimo per un elemento input
<canvas>Tag per disegnare grafica dinamica su pagine web.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.

Users

Log in to search for users

Explore

Find inspiration

le miniere di nuxis

Calcolatrice Top

prova ennesima tabella

Eleganza Gioielli

esercitazione 2 webdevel

Lola Harrel 3rd Hour 12/4/20

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;
    }