Cath-code by @fabiana - Codewith.it

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

Referenze

<input>Definisce un area di input per l'invio di dati e informazioni
<hr>Inserisce una linea orizzontale
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<table>Tag primario per la creazione di tabelle
<h5>Titolo di intestazione di quinto livello
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

portofolio_Alessandro_Foletto

INFORMATICA - ESERCIZIO 1 RISOLTO

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.

<center>
<div style="position:relative; width:550px; ">
<style type="text/css">.tabs {
  position: relative;
  min-height: 515px;
  clear: both;
  margin: 0px auto;
  display:block;
  text-align:center;
}

.tab {
  display: inline-block;
}

.tab label {
  padding: 5px;
  margin-left: -10px;
  position: relative;
  left: 0px;
    font-family: georgia; 
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
  line-height: 25px;
}

.tab label:hover {
  cursor:pointer;
}
.tab [type="radio"] {
  opacity: 0;
}
  
#content-top {
}
.content {
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px;
  overflow: auto;
  background: #F8F9FA repeat-y;
}
  
.content > * {
  opacity: 0;
  transform: translatey(5%);
  transition: all 0.6s ease;
}
  
[type="radio"]:checked ~ label {
  color: #2f1c25;
  z-index: 2;
}
[type="radio"]:checked ~ label ~ .content {
  z-index: 1;
}
  
[type="radio"]:checked ~ label ~ .content > * {
  opacity: 1;
  transform: translatey(0);
}
   .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 30px;
   
}

.tooltip-text {
    visibility: hidden;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s;
    color: rgba(118, 106, 78);
    background: rgba(0, 0, 0, 0.8);
}
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
p {
  text-align:justify;
  font-size: 11px;
}
#copertina {
  overflow: hidden;
  position:absolute;
  top:25px; left:0px;
  background-image: url("https://i.pinimg.com/736x/b5/32/45/b53245903cf13cc284db14cb9772e082.jpg");
  background-size: 100%;
  width: 530px;
  height: 480px;
  filter: saturate(60%) contrast(95%) brightness(110%) opacity(96%);
  
}
  
#copertina > img {
  width: 575px;
}
  
#quote {
 height: 150px; width: 110px; margin-left: 35px; 
 
  text-align: justify;
  font-family: tahoma; 
  font-size: 11.5px;
  text-transform: lowercase;
  color: #766a4e;
  
  }
  
  div.split2 div{
    float: left;
    width: 45%;
    width: 49%;
    width: 45%;
    padding: 0 2%
    }

div.clearer{
    float: none; clear: left
    }
  
  .base {
    font-family:Tahoma,Geneva,sans-serif;
    color:#212529;
    font-size: 11px;
    
  }

    
</style>
<div class="tabs">
<div id="copertina" style="text-align: justify;">
<p><span class="tooltip">
  <span class="tooltip-text"><span style="font-size: 9.5px; letter-spacing: 1px; font-family: Arial; border-radius: 9px; padding: 10px;"> Nato nell'abbraccio affollato di una famiglia babbana nel cuore verde del Galles, a <b>Swansea</b>. Il cottage era piccolo, ma pulsava di vita: le stanze erano piene di voci, del profumo costante di terra umida, foglie secche e <i>barabrith</i> appena sfornato. Con le mani piccole immerse nel terriccio, assorbiva storie e segreti di erbe medicinali, seguendo il ritmo paziente della natura. Le sue stranezze erano viste con affetto e un pizzico di preoccupazione. Le piante crescevano più rigogliose quando le toccava. Gli animali lo seguivano. Alla nascita di <b>Eveleen</b> sentì un legame con lei, profondo e inspiegabile, prima ancora di sapere cosa fosse la magia. I vestiti passati dai fratelli, il letto condiviso, i racconti dei nonni prima di dormire, l’ultima fetta di pane divisa con un sorriso: così aveva conosciuto il valore delle cose semplici, il significato più autentico dell’essere “casa” per qualcuno.
L’ingresso ad Hogwarts fu un distacco faticoso, ma la Sala Comune di <b>Tassorosso</b> gli offrì rifugio e un senso di appartenenza, diventando presto una seconda famiglia insieme alla squadra. Le lezioni di <b>Erbologia</b> erano le sue preferite, nelle serre ritrovava l’odore della sua infanzia. Scoprì di essere particolarmente portato anche per le <b>Pozioni</b> e per le <b>Creature Magiche</b>: strane, ferite, incomprese. Come lui. Le accudiva con una tenerezza istintiva, imparando a conoscerne paure e linguaggi silenziosi. Le <b>Rune</b>, invece, gli hanno sempre fatto uno strano effetto. Ancora si interroga sul significato delle sue cicatrici, incise durante un rituale al limitare della foresta.
Oggi lavora come apprendista erbologo alla <b>Tulange</b>, dove coltiva piante rare e studia le loro proprietà magiche al fianco di <b>Aubrey</b>, sorella acquisita. Vive sospeso tra il mondo babbano e quello magico: frequenta spesso Middle Island, trascorre ore a Diagon Alley e torna regolarmente a Swansea. Ma la sera rincasa sempre nello stesso posto: una palazzina color glicine a Notting Hill, accolto da un inconfondibile profumo di biscotti, quelli di <b><i>Gwen</b></i>.</span>
</span></p>

<div id="quote" style="line-height: 9px;"><span style="font-size:7px; letter-spacing: 1px; text-transform: uppercase; font-family:Times New Roman,Times,serif;">i close my eyes and i can see you 
  <br />live in my heart.</span><br />
&nbsp;
<center><img src="https://i.pinimg.com/736x/d5/cb/4e/d5cb4e1864e3d270dfe2590b171d7b98.jpg" style="width: 110px; height: 50px; padding: 0px; border: 0.5px solid #ccc; margin-right: 160px; filter: saturate(50%) brightness(90%);" /></center>
</div>
</div>
</div>
</div>
</div>
</center>
</body>
</html>