affetti by @AndyMasy - Codewith.it

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

Referenze

<strong>Definisce una parte del testo importante con formattazione in grassetto.
idIdentifica univocamente un elemento HTML
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<option>Serve ad inserire una voce in un menu di selezione.
<em>Formatta il testo in corsivo/italico enfatizzato
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione 1

Department Staff Updates

HTML Schwabisch

I benefici dell\\

\"Il Razzismo - Un Tema Important

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.

<br>
<div style="max-width:520px;margin:auto;text-align:center;">

<style>

body{
background:#111;
margin:0;
padding:0;
font-family:Georgia, serif;
}

/* container */
.sea-card{
color:#b0c4de;
}

/* titolo */
tit{
font-family:Georgia, serif;
font-size:20px;
letter-spacing:2px;
display:block;
margin-bottom:5px;
color:#ffffff;
}

/* sottotitolo */
sub{
font-family:Georgia, serif;
font-size:12px;
color:#bae3be;
opacity: 0.2;
margin-bottom:20px;
display:block;
}

/* immagini */
.sea-images{
max-width:333px; /* stessa larghezza del box testo */
margin:auto;
margin-top:15px;
display:flex;
justify-content:space-between; /* bordi esterni allineati */
}

.sea-images img{
width:160px; /* larghezza fissa identica */
height:120px; /* altezza fissa identica */
object-fit:cover;
opacity:0.9;
border-radius:0;
}

/* bordi */
.img1{border:1px dotted #e5b8bfff;}
.img2{border:1px dotted #90c5e6ff;}

/* box testo */
.sea-bio{
max-width:333px;
margin:auto;
padding:10px;
text-align:justify;
font-size:12px;
line-height:1.4em;
background:rgba(255,255,255,0.02);
}

/* colori */
.pastel-green{color:#bae3be;}
.pastel-pink{color:#e5b8bfff;}
.pastel-blue{color:#90c5e6ff;}
.pastel-orange{color:#ecb86fff;}

/* ===== TOOLTIP PERSONALIZZATO ===== */

.riquadro-tooltip{
position:relative;
cursor:pointer;
}

.riquadro-box{
visibility:hidden;
opacity:0;
transition:opacity 0.3s;

position:absolute;
top:120%;
left:50%;
transform:translateX(-50%);

background:#111;
border:1px dotted #90c5e6ff;
padding:8px;
width:180px;
text-align:center;
z-index:10;
}

.riquadro-box img{
width:100%;
height:auto;
margin-bottom:6px;
}

.riquadro-tooltip:hover .riquadro-box{
visibility:visible;
opacity:1;
}

/* ===== FINE TOOLTIP ===== */

</style>

<div class="sea-card">

<!-- titolo -->
<tit>
<span class="pastel-blue">chose</span>
<span class="pastel-pink">people</span>
<span class="pastel-blue">who</span>
<span class="pastel-pink">chose</span>
<span class="pastel-blue">you</span>
</tit>

<sub><i>I broke my rules for you</i></sub>

<!-- box testo -->
<div class="sea-bio">

» <span class="pastel-orange"><b>Kiss me</b></span> on the mouth and <span class="pastel-blue"><i>set me free</i></span>, <span class="pastel-green"><b>sing me</b></span> like a choir
I can be <span class="pastel-green"><b>the subject</b></span> of your dreams, your <span class="pastel-blue"><i>sickening desire</i></span>, so <span class="pastel-orange"><b>Kiss me</b></span> on the mouth and <span class="pastel-blue"><i>set me free</i></span> but <u>please</u>, <span class="pastel-pink"><i>don't bite</i></span> «

<br><br>

<center>
  <span class="riquadro-tooltip">nicholas
  <span class="riquadro-box">
    <img src="https://i.imgur.com/oGepxRW.png">
    <div><u>I will not ask</u> you where<br>
    you came from, I would not ask<br>
    and neither would you.<br>
    Honey just put your sweet lips<br>
    on my lips, <i>we sould just kiss</i><br>
    like real people do</div>
  </span>
</span> <span class="pastel-orange">|</span>
<span class="riquadro-tooltip">milford
  <span class="riquadro-box">
    <img src="https://i.imgur.com/nbRUHza.png">
    <div>When you look at me <i>like that</i>,<br>
    my darling, what did you expect?<br>
    I’d probably <b>still</b> adore you with<br>
    your hands around my neck…<br>
or <i>I did</i>, last time I checked</div>
  </span>
</span> <span class="pastel-pink">|</span> <span class="riquadro-tooltip">maximilian
  <span class="riquadro-box">
    <img src="https://i.imgur.com/MCjqluu.jpeg">
    <div><u>Unfair</u> we’re not somewhere<br>
    misbehavin’ for days, great<br>
escape, lost track of time and<br>
space… he’s a Silver linin’,<br>
climbin’ on <i>my desire</i></div>
  </span>
</span><br><br>

<span class="riquadro-tooltip">adam
  <span class="riquadro-box">
    <img src="https://i.imgur.com/vnmOfVA.png">
    <div>I feel my temperature risin',<br>
Higher, higher, it's <b>burning</b><br>
through to my soul...<br>
Boy, boy, boy...<br>
you're gonna <i>set me on fire</i></div>
  </span>
</span>

<br><br></center>

» Went <span class="pastel-orange"><i>face to face</i></span> with <u>all</u> our <span class="pastel-pink"><b>fears</b></span> learned <span class="pastel-green"><u>our</u> <u>lessons</u></span> through the <i>tears</i> made <span class="pastel-orange"><i>memories</i></span> <span class="pastel-blue">we knew</span> would <span class="pastel-pink"><u>never</u></span> fade «<br><br>

<center>zeke <span class="pastel-blue">|</span> ewan <span class="pastel-blue">|</span> teresa <span class="pastel-blue">|</span> jacob</center>

</div>

<!-- gif con bordi esterni allineati e spazio centrale centrato -->
<div class="sea-images">

<img src="https://i.imgur.com/fxEslCS.png"
class="img1">

<img src="https://i.pinimg.com/originals/42/d9/7f/42d97f709eecaef105b9dbbe1c7fc868.gif"
class="img2">

</div>

</div>
</div>
<br>

--------------------------------------------------------------------<br><br><br>

<br>
<div style="max-width:520px;margin:auto;text-align:center;">

<style>

body{
background:#111;
margin:0;
padding:0;
font-family:Georgia, serif;
}

/* container */
.sea-card{
color:#b0c4de;
}

/* titolo */
tit{
font-family:Georgia, serif;
font-size:20px;
letter-spacing:2px;
display:block;
margin-bottom:5px;
color:#ffffff;
}

/* sottotitolo */
sub{
font-family:Georgia, serif;
font-size:12px;
color:#bae3be;
opacity: 0.2;
margin-bottom:20px;
display:block;
}

/* immagini */
.sea-images{
max-width:333px; /* stessa larghezza del box testo */
margin:auto;
margin-top:15px;
display:flex;
justify-content:space-between; /* bordi esterni allineati */
}

.sea-images img{
width:160px; /* larghezza fissa identica */
height:120px; /* altezza fissa identica */
object-fit:cover;
opacity:0.9;
border-radius:0;
}

/* bordi */
.img1{border:1px dotted #e5b8bfff;}
.img2{border:1px dotted #90c5e6ff;}

/* box testo */
.sea-bio{
max-width:333px;
margin:auto;
padding:10px;
text-align:justify;
font-size:12px;
line-height:1.4em;
background:rgba(255,255,255,0.02);
}

/* colori */
.pastel-green{color:#bae3be;}
.pastel-pink{color:#e5b8bfff;}
.pastel-blue{color:#90c5e6ff;}
.pastel-orange{color:#ecb86fff;}

/* ===== TOOLTIP PERSONALIZZATO ===== */

.riquadro-tooltip{
position:relative;
cursor:pointer;
}

.riquadro-box{
visibility:hidden;
opacity:0;
transition:opacity 0.3s;

position:absolute;
top:120%;
left:50%;
transform:translateX(-50%);

background:#111;
border:1px dotted #90c5e6ff;
padding:8px;
width:180px;
text-align:center;
z-index:10;
}

.riquadro-box img{
width:100%;
height:auto;
margin-bottom:6px;
}

.riquadro-tooltip:hover .riquadro-box{
visibility:visible;
opacity:1;
}

/* ===== FINE TOOLTIP ===== */

</style>

<div class="sea-card">

<!-- titolo -->
<tit>
<span class="pastel-blue">chose</span>
<span class="pastel-pink">people</span>
<span class="pastel-blue">who</span>
<span class="pastel-pink">chose</span>
<span class="pastel-blue">you</span>
</tit>

<sub><i>I broke my rules for you</i></sub>

<!-- box testo -->
<div class="sea-bio">

» <span class="pastel-orange"><b>Kiss me</b></span> on the mouth and <span class="pastel-blue"><i>set me free</i></span>, <span class="pastel-green"><b>sing me</b></span> like a choir
I can be <span class="pastel-green"><b>the subject</b></span> of your dreams, your <span class="pastel-blue"><i>sickening desire</i></span>, so <span class="pastel-orange"><b>Kiss me</b></span> on the mouth and <span class="pastel-blue"><i>set me free</i></span> but <u>please</u>, <span class="pastel-pink"><i>don't bite</i></span> «

<br><br>

<center>
<span class="riquadro-tooltip">milford
  <span class="riquadro-box">
    <img src="https://i.imgur.com/nbRUHza.png">
    <div>When you look at me <i>like that</i>,<br>
    my darling, what did you expect?<br>
    I’d probably <b>still</b> adore you with<br>
    your hands around my neck…<br>
or <i>I did</i>, last time I checked</div>
  </span>
</span>

 <span class="pastel-orange">|</span> 

<span class="riquadro-tooltip">adam
  <span class="riquadro-box">
    <img src="https://i.imgur.com/vnmOfVA.png">
    <div>I feel my temperature risin',<br>
Higher, higher, it's <b>burning</b><br>
through to my soul...<br>
Boy, boy, boy...<br>
you're gonna <i>set me on fire</i></div>
  </span>
</span>
<br>

<span class="riquadro-tooltip">nicholas
  <span class="riquadro-box">
    <img src="https://i.imgur.com/oGepxRW.png">
    <div><u>I will not ask</u> you where<br>
    you came from, I would not ask<br>
    and neither would you.<br>
    Honey just put your sweet lips<br>
    on my lips, <i>we sould just kiss</i><br>
    like real people do</div>
  </span>
</span>

 <span class="pastel-pink">|</span> 

<span class="riquadro-tooltip">maximilian
  <span class="riquadro-box">
    <img src="https://i.imgur.com/MCjqluu.jpeg">
    <div><u>Unfair</u> we’re not somewhere<br>
    misbehavin’ for days, great<br>
escape, lost track of time and<br>
space… he’s a Silver linin’,<br>
climbin’ on <i>my desire</i></div>
  </span>
</span>

<br><br></center>

» Went <span class="pastel-orange"><i>face to face</i></span> with <u>all</u> our <span class="pastel-pink"><b>fears</b></span> learned <span class="pastel-green"><u>our</u> <u>lessons</u></span> through the <i>tears</i> made <span class="pastel-orange"><i>memories</i></span> <span class="pastel-blue">we knew</span> would <span class="pastel-pink"><u>never</u></span> fade «<br><br>

<center>zeke <span class="pastel-blue">|</span> ewan <span class="pastel-blue">|</span> teresa <span class="pastel-blue">|</span> jacob</center>

</div>

<!-- gif con bordi esterni allineati e spazio centrale centrato -->
<div class="sea-images">

<img src="https://i.imgur.com/fxEslCS.png"
class="img1">

<img src="https://i.pinimg.com/originals/42/d9/7f/42d97f709eecaef105b9dbbe1c7fc868.gif"
class="img2">

</div>

</div>
</div>
<br>