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

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

References

<li>Inserisce voci all'interno di una lista
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<option>Serve ad inserire una voce in un menu di selezione.
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<textarea>Area di testo libero espandibile per form HTML
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input

Users

Log in to search for users

Explore

Find inspiration

congettura di golbach a 3

Pagina di esempio

esercizio 02 pagina complessa

copia da paragrafo

Lola Harrel Project 3

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