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

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

References

multipart/form-dataCodifica dei caratteri di un form
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
methodDetermina il metodo di invio dei dati di un form al server

Users

Log in to search for users

Explore

Find inspiration

sito_donne_afghane

BuzzTech Blog | News blog Magazine

Ximena\'s hamburger

Il museo di Leonardo

Il Mago e Frondavale.html

Esercizi 05/03/2024 es1

5/10/24 es. 2 - conta Parole

educazione civica 2

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