Cath-code by @fabiana - Codewith.it

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

Referenze

<a>Inserisce link e collegamenti ipertestuali
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<h3>Titolo di intestazione di terzo livello
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
<head>Tag primario di un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Federica Bachini Lab

Collegamenti ipertestuali

Form per il torneo misto dis

X-Dsigner (Blu Eletric) – WebKin

esercizio:sito web

Refresh page script

Pagina sul lorem ipsum

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>