affetti by @AndyMasy - Codewith.it

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

References

<input>Definisce un area di input per l'invio di dati e informazioni
typeSpecifica la tipologia/funzione di un elemento.
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
<body>Tag primario di un documento HTML
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
requiredRende obbligatorio un campo di input

Users

Log in to search for users

Explore

Find inspiration

NeonPulse | Agency WebMarketing, A

JS Esercizio Concetti Gen es3

99 Bottles of Beer

Formattazione_testo.html.

Review of Functions I

REVIEW: For Loops

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>