Advertisement
Guest User

Untitled

a guest
Feb 20th, 2017
139
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.55 KB | None | 0 0
  1.  
  2. <!DOCTYPE html>
  3. <html lang="it">
  4. <head>
  5. <meta charset="utf-8">
  6. <link rel="icon" href="http://www.promotur.org/Content/Images/bandierina_en.png" type="image" size="16x16">
  7. <title>LONDRA</title>
  8. <style type="text/css">
  9. body{background-image:url(http://www.habitatinvestments.co.uk/wp-content/uploads/2015/03/londra.jpg);
  10. background-repeat:repeat-y;
  11. }
  12. #titolo {
  13. text-align: center;
  14. font-size:10.0em;
  15. text-shadow:2px 2px 4px red;
  16. }
  17.  
  18. #sottotitiolo{
  19. text-align: center;
  20. font-size: 1.9em;
  21. }
  22.  
  23. #animazione-domenica{
  24. width: 200px;
  25. height: 150px;
  26. border:2px solid black;
  27. margin:100px 150px 100px 80px;
  28. background-image:url(http://www.casertanews.it/wp-content/uploads/2008/02/bandiera_Italiana_1_20080226065621.jpg);
  29. -webkit-animation-name: example;
  30. -webkit-animation-duration: 10s;
  31. animation-name: example;
  32. animation-duration: 10s;
  33. }
  34.  
  35. @keyframes example {
  36. from {background-image:url(http://www.senigallianotizie.it/articoli/2012/03/foto-bandiera-inglese-200x150.jpg);}
  37. to {background-image:url(http://www.casertanews.it/wp-content/uploads/2008/02/bandiera_Italiana_1_20080226065621.jpg);}
  38. }
  39. #lunedi {
  40. background-color: lightgrey;
  41. width: 500px;
  42. border: 25px solid green;
  43. padding: 25px;
  44. margin: auto;
  45. }
  46. #martedi {
  47. background-color: lightgreen;
  48. width: 500px;
  49. border: 25px solid red;
  50. padding: 25px;
  51. margin: auto;
  52.  
  53. }
  54. #gioco-martedi{
  55. width: 200px;
  56. height: 200px;
  57. background-image:url(http://www.accademiaitalianadiestetica.it/wp-content/uploads/2016/10/ciglia-finte-1.jpg);
  58. -webkit-transition: width 2s, height 4s;
  59. transition: width 2s, height 4s;
  60. }
  61.  
  62. #gioco-martedi:hover {
  63. width: 400px;
  64. height: 400px;
  65. }
  66. #mercoledi {
  67. background-color: lightblue;
  68. width: 500px;
  69. border: 25px solid blue;
  70. padding: 25px;
  71. padding-bottom: 200px;
  72. margin: auto;
  73.  
  74. }
  75. #galleria.img {
  76. margin: 5px;
  77. border: 1px solid black;
  78. float: left;
  79. width: 180px;
  80. }
  81.  
  82. #galleria.img:hover {
  83. border: 1px solid green;
  84. }
  85.  
  86. #galleria.img img {
  87. width: 100%;
  88. height: auto;
  89. }
  90.  
  91. #galleria.desc {
  92. padding: 15px;
  93. text-align: center;
  94. }
  95. #giovedi {
  96. background-color: white;
  97. width: 500px;
  98. border: 25px solid green;
  99. padding: 25px;
  100. margin: auto;
  101. }
  102. #venerdi {
  103. background-color: yellow;
  104. width: 500px;
  105. border: 25px solid black;
  106. padding: 25px;
  107. margin: auto;
  108.  
  109. }
  110. .container {
  111. position: relative;
  112. width: 50%;
  113. }
  114.  
  115.  
  116. .image {
  117. display: inline-block;
  118. width: 100%;
  119. height: auto;
  120. margin:auto;
  121. }
  122.  
  123. .overlay {
  124. position: absolute;
  125. top: 0;
  126. bottom: 0;
  127. left: 0;
  128. right: 0;
  129. height: 100%;
  130. width: 100%;
  131. opacity: 0;
  132. transition: .5s ease;
  133. background-color: #008CBA;
  134. }
  135.  
  136. .container:hover .overlay {
  137. opacity: 1;
  138. }
  139.  
  140. .text {
  141. color: white;
  142. font-size: 20px;
  143. position: absolute;
  144. top: 50%;
  145. left: 50%;
  146. transform: translate(-50%, -50%);
  147. -ms-transform: translate(-50%, -50%);
  148. }
  149.  
  150. #sabato {
  151. background-color: lightblue;
  152. width: 500px;
  153. border: 25px solid green;
  154. padding: 25px;
  155. margin: auto;
  156.  
  157. }
  158.  
  159. #immagine-sabato {
  160. border-radius:50%
  161. }
  162. #domenica {
  163. background-color: lightgreen;
  164. width: 500px;
  165. border: 25px solid red;
  166. padding: 25px;
  167. margin: auto;
  168. }
  169. #giu:link, #giu:visited {
  170. background-color: #f44336;
  171. color: white;
  172. padding: 14px 25px;
  173. text-align: center;
  174. text-decoration: none;
  175. display: inline-block;
  176. }
  177.  
  178.  
  179. #giu:hover, #giu:active {
  180. background-color: red;
  181. }
  182.  
  183. #su:link {
  184. color: green;
  185. background-color: transparent;
  186. text-decoration: none;
  187. }
  188. #su:visited {
  189. color: blue;
  190. background-color: transparent;
  191. text-decoration: none;
  192. }
  193. #su:hover {
  194. color: red;
  195. background-color: transparent;
  196. text-decoration: underline;
  197. }
  198. #su:active {
  199. color: yellow;
  200. background-color: transparent;
  201. text-decoration: underline;
  202. }
  203.  
  204. .tooltip {
  205. position: relative;
  206.  
  207. }
  208.  
  209. .tooltip .tooltiptext {
  210. visibility: hidden;
  211. width: 120px;
  212. background-color: black;
  213. color: #fff;
  214. text-align: center;
  215. border-radius: 6px;
  216. padding: 5px 0;
  217. position: absolute;
  218. z-index: 1;
  219. top: 100%;
  220. left: 50%;
  221. margin-left: -60px;
  222. }
  223.  
  224. .tooltip:hover .tooltiptext {
  225. visibility: visible;
  226. }
  227.  
  228. </style>
  229. </head>
  230.  
  231. <body style="text-align:center;">
  232. <a name="tornasu"><h1 id="titolo">MICHELE PRENCIPE:LONDRA</h1></a>
  233. <h2 id="sottotitolo">Dal 29 gennaio al 5 febbraio 2017 abbiamo fatto un'esperienza di alternanza scuola-lavoro a Londra.In questa pagina vedrai gli spostamenti principali e le visite che abbiamo fatto a Londra nell'arco della settimana,giorno per giorno.</h2>
  234. <a id="giu" href="londra.html#lunedi" target="_blank">Lunedì</a></a>
  235. <a id="giu" href="londra.html#martedi" target="_blank">Martedì</a>
  236. <a id="giu" href="londra.html#mercoledi" target="_blank">Mercoledì</a>
  237. <a id="giu" href="londra.html#giovedi" target="_blank">Giovedì</a>
  238. <a id="giu" href="londra.html#venerdi" target="_blank">Venerdì</a>
  239. <a id="giu" href="londra.html#sabato" target="_blank">Sabato</a>
  240. <a id="giu" href="londra.html#domenica" target="_blank">Domenica</a>
  241.  
  242.  
  243. <div id="lunedi"><a name="lunedi"><h1>Lunedì</h1></a>dopo il viaggio sull'aereo di domenica e dopo essersi ambientati nelle famiglie,ci siamo riuniti alla Oxford International e il pomeriggio abbiamo visitato l'osservatorio di Greenwich e Trafalgar Square.
  244. <br>
  245. <a id="su" href="londra.html#tornasu">TORNA SU</a>
  246. </div>
  247. <br>
  248. <div id="martedi"><a name="martedi"><h1>Martedì</h1></a>Ci siamo immersi nel campo investigativo CSI,abbiamo trovato le impronte,il sangue dell'assassino e abbiamo ricostruito la scena del crimine.<br>Esempio:indovina che cos'è dal dettaglio della foto,se non riesci a capire passa sopra l'immagine con la freccetta.
  249. <div id="gioco-martedi"></div>
  250. <br>
  251. Esatto era proprio un occhio femminile;nell'ambito dell'investigazione è molto importante capire di un dettaglio in che contesto faceva parte.
  252. <br>
  253. <a id="su" href="londra.html#tornasu">TORNA SU</a>
  254. </div>
  255. <br>
  256. <div id="mercoledi"><a name="mercoledi"><h1>Mercoledì</h1></a>Abbiamo fatto visita a due grandi musei:Natural History Museum e Science Museum.Ecco alcuni dei reperti che abbiamo visto:
  257. <div id="galleria" class="img">
  258. <a target="_blank" href="http://www.nhm.ac.uk/content/dam/nhmwww/about-us/history-architecture/dippy-753x435.jpg">
  259. <img src="http://www.nhm.ac.uk/content/dam/nhmwww/about-us/history-architecture/dippy-753x435.jpg" width="300" height="150" class="image">
  260. </a>
  261. <div id="galleria" class="desc">ricostruzione di un dinosauro all'History Museum</div>
  262. </div>
  263. <div id="galleria" class="img">
  264. <a target="_blank" href="https://c8234d680a5ae618106c-6b3bd0826ac1075e2d1b52b94a2e0f63.ssl.cf1.rackcdn.com/857_5a1509f9.jpg">
  265. <img src="https://c8234d680a5ae618106c-6b3bd0826ac1075e2d1b52b94a2e0f63.ssl.cf1.rackcdn.com/857_5a1509f9.jpg" width="300" height="150" class="image">
  266. </a>
  267. <div id="galleria" class="desc">Sala degli aerei al Science Museum</div>
  268. </div>
  269. <br>
  270. <br>
  271. <br>
  272. <a id="su" href="londra.html#tornasu">TORNA SU</a>
  273. </div>
  274. <br>
  275. <div id="giovedi"><a name="giovedi"><h1>Giovedì</h1></a>abbiamo fatto una visita guidata alla fabbrica Forman del salmone affumicato dove il proprietario ha battuto il famoso chef Gordon Ramsay nel taglio del salmone affumicato.
  276. Ecco il video di quando Forman batte Gordon Ramsay:
  277. <a href="https://youtu.be/bGJ6o09q0fQ">https://youtu.be/bGJ6o09q0fQ</a>
  278. <br>
  279. <a id="su" href="londra.html#tornasu">TORNA SU</a>
  280. </div>
  281. <br>
  282. <div id="venerdi"><a name="venerdi"><h1>Venerdì</h1></a>Abbiamo fatto un giro sul battello,e siamo passati sotto al Tower Bridge e abbiamo visitato la Torre di Londra,dopodichè abbiamo visto la National Gallery e la sera abbiamo cenato a Leicester Square.
  283. Sotto il famoso quadro di van Eick situato nella National Gallery:
  284. <div class="container">
  285. <img src="http://www.frontierarieti.com/wordpress/wp-content/uploads/2012/02/Arnolfini.jpg" width="200"height="300" class="image">
  286. <div class="overlay">
  287. <div class="text">CONIUGI ARNOLFINI</div>
  288. </div>
  289. </div>
  290. <a id="su" href="londra.html#tornasu">TORNA SU</a>
  291. </div>
  292. <br>
  293. <div id="sabato"><a name="sabato"><h1>Sabato</h1></a>Abbiamo visitato il Big Ben con il palazzo del duca di Westminster,abbiamo visitato Backingham Palace e fatto un giro nel parco reale,abbiamo mangiato nei mercatini di Camden Town e la sera siamo andati a Piccadilly.
  294. <img id ="immagine-sabato" src="https://lc-www-live-s.legocdn.com/r/www/r/architecture/-/media/franchises/architecture%202015/explore/available%20products/story/21013%20big%20ben/21013_facts_explore_720.jpg?l.r2=1029380932" width="250" height="350">
  295. <br>
  296. <a id="su" href="londra.html#tornasu">TORNA SU</a>
  297. </div>
  298. <br>
  299. <div id="domenica"><a name="domenica"><h1>Domenica</h1></a>Abbiamo preso il volo e finalmente siamo ritornati nella nostra amata Italia,ma questa esperienza la si porterà sempre nel cuore perchè è stata un esperienza fantastica <div id="animazione-domenica"></div>
  300. <a id="su" href="londra.html#tornasu">TORNA SU</a>
  301. </div>
  302. <br>
  303. <br>
  304. <br>
  305. <p><u>La pagina è stata creata da Michele Prencipe:per tornare alla pagina iniziale di Google clicca
  306. <div class="tooltip"><mark>QUI</mark>
  307. <span class="tooltiptext">NOOO!!NON PUO USCIRE DA QUESTA PAGINA SE PRIMA NON MI METTE UN BUON VOTO</span>
  308. </div>
  309. </p>
  310.  
  311. </body>
  312. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement