Untitled

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>FILIPPO ZAMAGNI</title>
  <link rel="icon" href="http://i.imgur.com/goykG4C.jpg" type="image" sizes="16x16">

  <style type="text/css">


    body{
      background-image: url("http://i.stack.imgur.com/jGlzr.png");
      font-family: Comic Sans MS;
    }

    .barra-home{
      width:100%;
      height:70px;
      top: 0;
      position:relative;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow:hidden;
      background-color: white;
    }
    .barra-home li{
          display: block;
          color: black;
          text-align: center;
          text-decoration: none;
          float:left;
          border-right: 3px solid black;
          color: red;
          border: 0;
        }
    .barra-home li a{
      text-decoration: none;
    }
    .tre-foto{
      width: 100%;
      height: 500px;
    }
    #indice{
      border: 10px groove red;
      width:400px;
      height: 300px;
      position: relative;
      top:20px;
      left:40%;


    }
    #indice li a {
      text-decoration: none;
      color: darkred;
    }
    .titoli-indici{
      text-align: center;
      font-size: 70px;
      color:darkblue;
    }
    .contenitore{
      width: 900px;
      height: 300px;

      position: relative;
      left:25%;
      margin:0;
      padding: 0;
      font-size: 30px;
    }
    #richiamo-indice:hover:not(.active) {
      color: darkred;
    }
    .immagine{
      width: 50%;
      height: 500px;
    }
    #indice ul li a:hover:not(.active) {
      color: yellow;
    }


  </style>
</head>

<body>
  <div class=" barra-home">
    <ul >
      <li style="font-size:50px;padding-right:600px;position:relative;bottom:20px" >ZAMAGNI FILIPPO</li>
      <li style="font-size:50px;padding-right:300px;position:relative;bottom:20px"><a href="#">HOME</a></li>
      <li style="font-size:50px;position:relative;bottom:20px"><a href="#indice">INDICE</a></li>
    </ul>
  </div>


  <br><br><br>

  <div class="tre-foto">
    <img style="height:100%;width:33%" src="http://www.comune.gatteo.fo.it/gatteomare/public_citta/Ufficio%20Turismo%20x%20sito.jpg" alt="ufficio turismo"</img>
    <img style="height:100%;width:33%" src="http://admin.abc.sm/image_thumb_abcweb_crop.php?img=http://backoffice3.titanka.com/verticalizzazioni/1468/images/province/forli-cesena-tutte.jpg&w=1345&h=576" alt="ufficio turismo"</img>
    <img style="height:100%;width:33%" src="http://www.comune.gatteo.fo.it/gatteomare/public_citta/Meine%20Romagna%20x%20sito.jpg" alt="ufficio turismo"</img>
  </div>

    <div id="indice">
      <div style="text-aling:center;font-size:30px;color:yellow"><mark>Indice</mark></div>
      <ul>
        <li><a href="#introduzione">Introduzione</a></li>
        <li> <a href="#giorno1">Giorno 1</a></li>
        <li> <a href="#giorno2">Giorno 2</a></li>
        <li> <a href="#giorno3">Giorno 3</a></li>
        <li> <a href="#giorno4">Giorno 4</a></li>
        <li> <a href="#giorno5">Giorno 5</a></li>
        <li> <a href="#giorno6">Giorno 6</a></li>
        <li> <a href="#commento">Commento personale</a></li>
        <li> <a href="#newsletter">Newsletter</a></li>
      </ul>
    </div>


    <h1 id="introduzione" class="titoli-indici">Introduzione al Progetto</h1>
    <br>
    <div style="width:1500px;left:15%;height:700px;"class="contenitore">
      L'Ufficio I.A.T è una struttura situata nel centro del piccolo paese di Gatteo a Mare(FC) Questo ufficio svolge un ruolo
      importante nelle attivita di informazione turistica. Presso questa struttura è possibile ricevere notizie riguardo agli
      eventi nel territorio del Comune di Gatteo. Nella sessione di apertura invernale si svolgono per lo più faccende che
      riguardano la stagione estiva,nella quale i turisti richiedono assistenza sulle strutture ricettive(alberghi,appartamenti,affittacamere)
      e informazioni sulle manifestazioni durante il loro soggiorno sul territorio di Gatteo.<br><br>
      Ambito territoriale: Comune di Gatteo<br>
      Orario feriale: dalle ore 9.00 alle 13.00<br>
      Serviziofferti:<br>
      -informazioni turistiche<br>
      - assistenza manifestazioni<br>
      Lingue conosciute: inglese - francese - tedesco
      <br>
      <p id="richiamo-indice" style="text-align:center;font-family:fantasy;font-size:60px;"><a href="#indice">INDICE </a></p>


    </div>

    <br>
    <br>
    <br>


    <h1 id="giorno1" class="titoli-indici">Giorno 1</h1>
    <br>

    <div class="contenitore">
      Presentazione con i colleghi di lavoro,Maurizio e Silvia. Inizio attività di alternanza con preparazione di locandine evento per un
      progetto di lettura con incontri serali fra gli  scrittori di libri e i lettori interessati.Dopo aver terminato, commissione a servizio
      del gestore di lavoro presso le poste.
      <br>
      <p id="richiamo-indice" style="text-align:center;font-family:fantasy;font-size:60px;"><a href="#indice">INDICE </a></p>


    </div>
    <br><br>
    <img class="immagine" src="http://www.comune.gatteo.fo.it/gatteomare/images/servizi_fiere.jpg" alt="immaggine">
    <img style="float:right" class="immagine" src="http://1.citynews-cesenatoday.stgy.ovh/~media/original-hi/26755618629423/convegno-4.jpg" alt="immaggine">
    <br>
    <br>
    <br>


    <h1 id="giorno2" class="titoli-indici">Giorno 2</h1>
    <br>

    <div class="contenitore">
      Inizio sistemazione dell'archivio dell'ufficio situato nel seminterrato.Pulizia della vecchia documentazione e sistemazione
      in appositi scaffali dei nuovi documenti pronti per l'estate. Ulteriore commissione esterna per raccogliere
      alcuni dati sugli hotel della zona.
      <br>
      <p id="richiamo-indice" style="text-align:center;font-family:fantasy;font-size:60px;"><a href="#indice">INDICE </a></p>


    </div>
    <br>
    <br>
    <br>

    <h1 id="giorno3" class="titoli-indici">Giorno 3</h1>
    <br>

    <div class="contenitore">
      Compilazione listino prezzi di alberghi e affittacamere.
      Modifica del sito ufficiale del comune in base alle informazioni
      recentemente ricavate. Apertura e smistamento depliant 2017.
      <br>
      <p id="richiamo-indice" style="text-align:center;font-family:fantasy;font-size:60px;"><a href="#indice">INDICE </a></p>


    </div>
    <img class="immagine" src="http://www.tigri-domestiche.it/vardata/imgcache/eventi/750/0/10000022.png" alt="immaggine">
    <img style="float:right" class="immagine" src="http://www.comune.gatteo.fo.it/gatteomare/public_citta/iat%20x%20sito.jpg" alt="immaggine">
    <br>
    <br>
    <br>

    <h1 id="giorno4" class="titoli-indici">Giorno 4</h1>
    <br>

    <div class="contenitore">
      Aggiornamento delle info riguardo gli alberghi. Contatto telefonici con membri di organizzazioni
      per fissare una riunione svoltasi in data 15/02/2017.
      <br>
      <p id="richiamo-indice" style="text-align:center;font-family:fantasy;font-size:60px;"><a href="#indice">INDICE </a></p>


    </div>
    <br>
    <br>
    <br>

    <h1 id="giorno5" class="titoli-indici">Giorno 5</h1>
    <br>

    <div class="contenitore">
      Modifica di volantini di eventi nel periodo estivo dal 1/06/2017 al 31/06/2017. Conferma telefonica riguardo
      gli inviti della riunione. Ulteriore sistemazione dell'achivio sotteraneo e apertura
      dei pacchi contenenti i nuovi depliant.
      <br>
      <p id="richiamo-indice" style="text-align:center;font-family:fantasy;font-size:60px;"><a href="#indice">INDICE </a></p>


    </div>
    <br>
    <img class="immagine" src="http://www.casadeisonora.it/edizioni/images/stories/gatteomarevillage.png" alt="immaggine">
    <img style="float:right" class="immagine" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/223/3d0/1e88adb.jpg" alt="immaggine">

    <br>
    <br>
    <br>

    <h1 id="giorno6" class="titoli-indici">Giorno 6</h1>
    <br>

    <div class="contenitore">
      Ultime commissioni della settimana: raccolta dati su Google Analytics delle visite nel sito durante il corso dell anno 2016.
      Chiusura progetto di alternanza scuola-lavoro con compilazione documenti
      da mettere nella mia cartellina personale,consegnata in seguito a scuola
      <br>
      <p id="richiamo-indice" style="text-align:center;font-family:fantasy;font-size:60px;"><a href="#indice">INDICE </a></p>


    </div>
    <br><br><br>
    <img class="immagine" src="http://www.comune.gatteo.fo.it/gatteomare/public_citta/famiglia.jpg" alt="immaggine">
    <img style="float:right" class="immagine" src="https://pbs.twimg.com/profile_images/546992554432925696/V9-1sR6W_400x400.jpeg" alt="immaggine">
    <br>
    <br>
    <br>
    <h1 id="commento" class="titoli-indici">Commento Personale</h1>
    <br>

    <div class="contenitore">
      A me è piaciuto molto sperimentare questa esperienza. Trovo l'alternanza un progetto interessante e costruttivo.
      In questa specifica situazione mi sono trovato bene con i miei colleghi di lavori, davvero molto cordiali e socievoli.
      Per questo l' ambiente lavorativo che si è creato intorno a me è stato piacevole e senza tensioni.
      <br>
      <p id="richiamo-indice" style="text-align:center;font-family:fantasy;font-size:60px;"><a href="#indice">INDICE </a></p>


    </div>
    <br>
    <br>
    <br><br><br><br>

    <div style="font-size:20px;font-family:Comic">
      <h1  id="newsletter"><mark>NEWSLETTER</mark></h1>
      <form>
        <table border="5" style="background-image: url('http://i.stack.imgur.com/jGlzr.png')">
          <tr>
            <th colspan="2">Dati</th>

          </tr>
          <tr>
            <td>Nome</td>
            <td><input type="text" name="nome" size="30" Valure="Anonimo"></td>
          </tr>
          <tr>
            <td>Cognome</td>
            <td><input type="text" name="cognome" size="30" Valure="Anonimo"></td>
          </tr>
          <tr>
            <td>Email</td>
            <td><input type="email" name="mail"></td>
          </tr>
          <tr>
            <td>Lavoreresti anche te per noi?</td>
            <td style="text-align:center">Si<input type="checkbox" name="valore1" value="1">
              No<input type="checkbox" name="valore1" value="1"></td>
          </tr>
          <tr>
            <th  colspan="2"><input style="text-aling:center;font-size:30px;" type="submit" name="Inserisci" value="Accetto"></th>

          </tr>
        </table>

      </form>


    </div>


</body>
</html>