affetti by @AndyMasy - Codewith.it

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

Referenze

<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<ul>Usato per la creazione di liste non ordinate.
<div>Crea contenitori generici o sezioni in una pagina
<iframe>Crea un frame all'interno di una pagina HTML.
<textarea>Area di testo libero espandibile per form HTML
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Neon Flux - Visual Design in Motio

spotify dashboard

Amazing Strange Rope Police

Estratti di mitologie greche

esercizio form 2

5/10/24 es. 6 - letterainform

VERIFICA.BONETTI

meraviglieItalia.html

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>