Cath-code by @fabiana - Codewith.it

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

References

autofocusAttiva un elemento al caricamento della pagina.
<li>Inserisce voci all'interno di una lista
_selfApre collegamenti ipertestuali nella stessa pagina del browser
multipart/form-dataCodifica dei caratteri di un form
getDefinisce un metodo di invio di dati al server
dirnameInvia informazioni sulla direzione di scrittura da un elemento input

Users

Log in to search for users

Explore

Find inspiration

Scheda: immagine a sinistra + tab

immagine per HTML

Mundane Mondays or Fantastic Frida

Esercitazione STA 16/03

ciao io sono sara

esercizio gatto

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.

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