affetti by @AndyMasy - Codewith.it

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

References

<select>Usato per creare un menu a tendina.
<hr>Inserisce una linea orizzontale
srcIndica la provenienza di una risorsa esterna (tramite URL).
<textarea>Area di testo libero espandibile per form HTML
selectedPre-seleziona un elemento di input
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)

Users

Log in to search for users

Explore

Find inspiration

Navbar Example 4

Esercizio tabella

Scheda Tecnica Google Pixel 8 Pro

Esercizi 01/03/2024 es2

Esercitazione 1

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.

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