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

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

Referenze

<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
selectedPre-seleziona un elemento di input
Inserisce un commento nel codice
<link>Collega il documento corrente con una risorsa esterna
<tr>Definisce le righe di una tabella (rows)
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

PixFlow Agency | Web Design, Video

La sicurezza in informati

Review of Functions I

JS Oggetti ed eventi es3

Inserimento immagini in un testo

Tabella con ricerca

VerdeTech - Orto Botanico | Piante

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