affetti by @AndyMasy - Codewith.it

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

Referenze

animationDefinisce i parametri dell'animazione di un elemento o selettore
typeSpecifica la tipologia/funzione di un elemento.
autofocusAttiva un elemento al caricamento della pagina.
<div>Crea contenitori generici o sezioni in una pagina
<th>Definisce una cella di intestazione di una tabella HTML.
relServe a definire la relazione tra il documento e una risorsa.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Review of Functions I

Heads Or Tails Random Tally

Heads Or Tails Random Tally

Esercizio tabella

primo es =01/26/24

Il mio primo file HTML

Heads Or Tails Random Tally

navbar responsive

esercizio informatica 5

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>