Affetti corretti x land by @AndyMasy - Codewith.it

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

References

_topApre collegamenti ipertestuali nell'elemento parent assoluto
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
typeSpecifica la tipologia/funzione di un elemento.
selectedPre-seleziona un elemento di input
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
idIdentifica univocamente un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

HTML con CSS esempio generale

prima volta css

Inserimento immagini in un testo

lezione 9 informatica

Stelle e Pianeti

Young Corporate Lawyer - Experienc

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.

ELIAS

<link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet" />

<style>
.ichigo-container {
  background-image:url('https://i.ibb.co/JWwsmFrd/JYz-WDy-V.png');
  padding-top:20px;
  font-family:tahoma;
  letter-spacing:0.5px;
  font-size:10px;
  color:#555;
}

.ichigo-images img {
  width:300px;
  height:120px;
  object-fit:cover;
  border:0px dashed #000;
}

.ichigo-title {
  font-family:cambria;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#7e514f;
  transform:rotate(-3deg);
  margin-top:-5px;
}

.ichigo-title .quote {
  padding:3px 15px;
  background-color:#000;
}

.ichigo-text {
  width:300px;
  margin-top:5px;
  text-align:justify;
  text-align-last:center;
}

.ichigo-m {
  font-family: 'Lobster', cursive;
  font-size:11px;
  color:#444221;
}

.ichigo-n {
  font-family:georgia;
  letter-spacing:1px;
  font-style:italic;
  color:#666;
}

.ichigo-o {
  font-family:calibri;
  font-size: 9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: #4d4838;
}
</style>

<center>

<div class="ichigo-container">

  <div class="ichigo-images">
    <img src="https://i.ibb.co/pNcQycS/Affetti-Elias.png">
  </div>

  <div class="ichigo-title">
    <span class="quote">ICHIGO</span>
  </div>

  <div class="ichigo-text">
    Like a tidal wave we'll make <span class="ichigo-m">a mess</span>, or calm waters if that <span class="ichigo-n">serves</span> you best, I'll <span class="ichigo-o">love you</span> without any strings attached
  </div>

  <br>
<audio controls preload="none" style="filter:invert(100%);outline:none;position:relative;height:15px;opacity:0.3;width:150px;">
  <source src="https://vanessacavaliere90-spec.github.io/fagoaudio/Pinguini%20Tattici%20Nucleari%20-%20Bottiglie%20Vuote%20%28Testo_Lyrics%29%20%5BTXDwRH2Jph0%5D.mp3" type="audio/mpeg">
</audio><br><br>
</div>

</center>

DESHAWN

<link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet" />

<style>
.matcha-container {
  background-image:url('https://i.ibb.co/JWwsmFrd/JYz-WDy-V.png');
  padding-top:20px;
  font-family:tahoma;
  letter-spacing:0.5px;
  font-size:10px;
  color:#555;
}

.matcha-images img {
  width:300px;
  height:120px;
  object-fit:cover;
  border:0px dashed #000;
}

.matcha-title {
  font-family:cambria;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#7e514f;
  transform:rotate(-3deg);
  margin-top:-5px;
}

.matcha-title .quote {
  padding:3px 15px;
  background-color:#000;
}

.matcha-text {
  width:300px;
  margin-top:5px;
  text-align:justify;
  text-align-last:center;
}

.matcha-m {
  font-family: 'Lobster', cursive;
  font-size:11px;
  color:#444221;
}

.matcha-n {
  font-family:georgia;
  letter-spacing:1px;
  font-style:italic;
  color:#666;
}

.matcha-o {
  font-family:calibri;
  font-size: 9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: #4d4838;
}
</style>

<center>

<div class="matcha-container">

  <div class="matcha-images">
    <img src="https://i.ibb.co/bjKnVsDx/Affetti-Deshawn.png">
  </div>

  <div class="matcha-title">
    <span class="quote">MATCHA</span>
  </div>

  <div class="matcha-text">
    I have no right to <span class="matcha-n">miss you</span> when I didn't wanna stay. And I have no right to <span class="matcha-m">need you</span>, and I knew what my heart was gonna lose. I have no right to <span class="matcha-o">love you</span>... but I do
  </div>

  <br><br>
</div>

</center>

JUNE

<link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet" />

<style>
.ananasu-container {
  background-image:url('https://i.ibb.co/JWwsmFrd/JYz-WDy-V.png');
  padding-top:20px;
  font-family:tahoma;
  letter-spacing:0.5px;
  font-size:10px;
  color:#555;
}

.ananasu-images img {
  width:300px;
  height:120px;
  object-fit:cover;
  border:0px dashed #000;
}

.ananasu-title {
  font-family:cambria;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#7e514f;
  transform:rotate(-3deg);
  margin-top:-5px;
}

.ananasu-title .quote {
  padding:3px 15px;
  background-color:#000;
}

.ananasu-text {
  width:300px;
  margin-top:5px;
  text-align:justify;
  text-align-last:center;
}

.ananasu-m {
  font-family: 'Lobster', cursive;
  font-size:11px;
  color:#444221;
}

.ananasu-n {
  font-family:georgia;
  letter-spacing:1px;
  font-style:italic;
  color:#666;
}

.ananasu-o {
  font-family:calibri;
  font-size: 9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: #4d4838;
}
</style>

<center>

<div class="ananasu-container">

  <div class="ananasu-images">
    <img src="https://i.ibb.co/wNdFTNdr/Affetti-June.png">
  </div>

  <div class="ananasu-title">
    <span class="quote">ANANASU DAIFUKU</span>
  </div>

  <div class="ananasu-text">
    Yeah, she's <span class="ananasu-n">a genius</span>, watch and learn how she sets the world <span class="ananasu-m">on fire</span> just to watch the sucker <span class="ananasu-o">burn</span>!
  </div>

  <br><br>

</div>

</center>

RYLEE

<link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet" />

<style>
.wasabi-container {
  background-image:url('https://i.ibb.co/JWwsmFrd/JYz-WDy-V.png');
  padding-top:20px;
  font-family:tahoma;
  letter-spacing:0.5px;
  font-size:10px;
  color:#555;
}

.wasabi-images img {
  width:300px;
  height:120px;
  object-fit:cover;
  border:0px dashed #000;
}

.wasabi-title {
  font-family:cambria;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#7e514f;
  transform:rotate(-3deg);
  margin-top:-5px;
}

.wasabi-title .quote {
  padding:3px 15px;
  background-color:#000;
}

.wasabi-text {
  width:300px;
  margin-top:5px;
  text-align:justify;
  text-align-last:center;
}

.wasabi-m {
  font-family: 'Lobster', cursive;
  font-size:11px;
  color:#444221;
}

.wasabi-n {
  font-family:georgia;
  letter-spacing:1px;
  font-style:italic;
  color:#666;
}

.wasabi-o {
  font-family:calibri;
  font-size: 9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: #4d4838;
}
</style>

<center>

<div class="wasabi-container">

  <div class="wasabi-images">
    <img src="https://i.ibb.co/tM667xGN/Affetti-Rylee.png">
  </div>

  <div class="wasabi-title">
    <span class="quote">WASABI</span>
  </div>

  <div class="wasabi-text">
    Never wanted this, <span class="wasabi-o">never</span> wanna see you hurt. Every little bump in the road <span class="wasabi-n">I tried</span> to swerve... <span class="wasabi-m">People are people</span>, and sometimes it doesn't work out
  </div>

  <br><br>

</div>

</center>

SHINOBU

<link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet" />

<style>
.mame-container {
  background-image:url('https://i.ibb.co/JWwsmFrd/JYz-WDy-V.png');
  padding-top:20px;
  font-family:tahoma;
  letter-spacing:0.5px;
  font-size:10px;
  color:#555;
}

.mame-images img {
  width:300px;
  height:120px;
  object-fit:cover;
  border:0px dashed #000;
}

.mame-title {
  font-family:cambria;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#7e514f;
  transform:rotate(-3deg);
  margin-top:-5px;
}

.mame-title .quote {
  padding:3px 15px;
  background-color:#000;
}

.mame-text {
  width:300px;
  margin-top:5px;
  text-align:justify;
  text-align-last:center;
}

.mame-m {
  font-family: 'Lobster', cursive;
  font-size:11px;
  color:#444221;
}

.mame-n {
  font-family:georgia;
  letter-spacing:1px;
  font-style:italic;
  color:#666;
}

.mame-o {
  font-family:calibri;
  font-size: 9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: #4d4838;
}
</style>

<center>

<div class="mame-container">

  <div class="mame-images">
    <img src="https://i.ibb.co/V0hjyV2v/Affetti-Shinobu.png">
  </div>

  <div class="mame-title">
    <span class="quote">MAME</span>
  </div>

  <div class="mame-text">
    <span class="mame-m">Cross my heart</span> and hope to die, taking this <span class="mame-o">one step</span> at a time. <span class="mame-n">I got your back</span> if you got mine
  </div>

  <br><br>

</div>

</center>

KAYN

<link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet" />

<style>
.east135-container {
  background-image:url('https://i.ibb.co/JWwsmFrd/JYz-WDy-V.png');
  padding-top:20px;
  font-family:tahoma;
  letter-spacing:0.5px;
  font-size:10px;
  color:#555;
}

.east135-images img {
  width:300px;
  height:120px;
  object-fit:cover;
  border:0px dashed #000;
}

.east135-title {
  font-family:cambria;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#7e514f;
  transform:rotate(-3deg);
  margin-top:-5px;
}

.east135-title .quote {
  padding:3px 15px;
  background-color:#000;
}

.east135-text {
  width:300px;
  margin-top:5px;
  text-align:justify;
  text-align-last:center;
}

.east135-m {
  font-family: 'Lobster', cursive;
  font-size:11px;
  color:#444221;
}

.east135-n {
  font-family:georgia;
  letter-spacing:1px;
  font-style:italic;
  color:#666;
}

.east135-o {
  font-family:calibri;
  font-size: 9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: #4d4838;
}
</style>

<center>

<div class="east135-container">

  <div class="east135-images">
    <img src="https://i.ibb.co/BHPkDH3d/Affetti-Kayn.png">
  </div>

  <div class="east135-title">
    <span class="quote">135° EAST</span>
  </div>

  <div class="east135-text">
    Cigarette smoke doesn't <span class="east135-o">hide</span> as well as you think, and you'd think that <span class="east135-o">it ought</span> to act as the <span class="east135-m">perfect</span> disguise
  </div>

  <br><br>

</div>

</center>

DANTE

<link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet" />

<style>
.awamori-container {
  background-image:url('https://i.ibb.co/JWwsmFrd/JYz-WDy-V.png');
  padding-top:20px;
  font-family:tahoma;
  letter-spacing:0.5px;
  font-size:10px;
  color:#555;
}

.awamori-images img {
  width:300px;
  height:120px;
  object-fit:cover;
  border:0px dashed #000;
}

.awamori-title {
  font-family:cambria;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#7e514f;
  transform:rotate(-3deg);
  margin-top:-5px;
}

.awamori-title .quote {
  padding:3px 15px;
  background-color:#000;
}

.awamori-text {
  width:300px;
  margin-top:5px;
  text-align:justify;
  text-align-last:center;
}

.awamori-m {
  font-family: 'Lobster', cursive;
  font-size:11px;
  color:#444221;
}

.awamori-n {
  font-family:georgia;
  letter-spacing:1px;
  font-style:italic;
  color:#666;
}

.awamori-o {
  font-family:calibri;
  font-size: 9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: #4d4838;
}
</style>

<center>

<div class="awamori-container">

  <div class="awamori-images">
    <img src="https://i.ibb.co/ccF4F6rv/Affetti-Dante.png">
  </div>

  <div class="awamori-title">
    <span class="quote">AWAMORI</span>
  </div>

  <div class="awamori-text">
    You were born to be a <span class="awamori-o">killer</span>, baby, oh but... I like it. It's <span class="awamori-n">my choice</span>, I know what the price is. Babe, I'm <span class="awamori-m">right where I wanna be</span> with you
  </div>

  <br><br>

</div>

</center>

WILLIAM

<link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet" />

<style>
.choya-container {
  background-image:url('https://i.ibb.co/JWwsmFrd/JYz-WDy-V.png');
  padding-top:20px;
  font-family:tahoma;
  letter-spacing:0.5px;
  font-size:10px;
  color:#555;
}

.choya-images img {
  width:300px;
  height:120px;
  object-fit:cover;
  border:0px dashed #000;
}

.choya-title {
  font-family:cambria;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#7e514f;
  transform:rotate(-3deg);
  margin-top:-5px;
}

.choya-title .quote {
  padding:3px 15px;
  background-color:#000;
}

.choya-text {
  width:300px;
  margin-top:5px;
  font-size:10px;
  text-align:justify;
  text-align-last:center;
}

.choya-m {
  font-family: 'Lobster', cursive;
  font-size:11px;
  color:#444221;
}

.choya-n {
  font-family:georgia;
  letter-spacing:1px;
  font-style:italic;
  color:#666;
}

.choya-o {
  font-family:calibri;
  font-size: 9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: #4d4838;
}
</style>

<center>

<div class="choya-container">

  <div class="choya-images">
    <img src="https://i.ibb.co/VW6QD9km/Affetti-William.png">
  </div>

  <div class="choya-title">
    <span class="quote">The CHOYA</span>
  </div>

  <div class="choya-text">
    Do you want the <span class="choya-n">house tour</span>? I could take you to the 1st, 2nd, 3rd floor. And <span class="choya-o">I promise</span> none of this <span class="choya-m">is a metaphor</span>
  </div>

  <br><br>

</div>

</center>

FREYA

<link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet" />

<style>
.yuzu-container {
  background-image:url('https://i.ibb.co/JWwsmFrd/JYz-WDy-V.png');
  padding-top:20px;
  font-family:tahoma;
  letter-spacing:0.5px;
  font-size:10px;
  color:#555;
}

.yuzu-images img {
  width:300px;
  height:120px;
  object-fit:cover;
  border:0px dashed #000;
}

.yuzu-title {
  font-family:cambria;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#7e514f;
  transform:rotate(-3deg);
  margin-top:-5px;
}

.yuzu-title .quote {
  padding:3px 15px;
  background-color:#000;
}

.yuzu-text {
  width:300px;
  margin-top:5px;
  font-size:10px;
  text-align:justify;
  text-align-last:center;
}

.yuzu-m {
  font-family: 'Lobster', cursive;
  font-size:11px;
  color:#444221;
}

.yuzu-n {
  font-family:georgia;
  letter-spacing:1px;
  font-style:italic;
  color:#666;
}

.yuzu-o {
  font-family:calibri;
  font-size: 9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: #4d4838;
}
</style>

<center>

<div class="yuzu-container">

  <div class="yuzu-images">
    <img src="https://i.ibb.co/wZcFbNvD/Affetti-Freya.png">
  </div>

  <div class="yuzu-title">
    <span class="quote">YUZU</span>
  </div>

  <div class="yuzu-text">
    You'll always have my shoulder when you cry. I'll <span class="yuzu-o">never</span> let go, never say <span class="yuzu-n">goodbye</span>. You know, you can <span class="yuzu-m">count</span> on me
  </div>

  <br><br>

</div>

</center>

SIMON

<link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet" />

<style>
.amazake-container {
  background-image:url('https://i.ibb.co/JWwsmFrd/JYz-WDy-V.png');
  padding-top:20px;
  font-family:tahoma;
  letter-spacing:0.5px;
  font-size:10px;
  color:#555;
}

.amazake-images img {
  width:300px;
  height:120px;
  object-fit:cover;
  border:0px dashed #000;
}

.amazake-title {
  font-family:cambria;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#7e514f;
  transform:rotate(-3deg);
  margin-top:-5px;
}

.amazake-title .quote {
  padding:3px 15px;
  background-color:#000;
}

.amazake-text {
  width:300px;
  margin-top:5px;
  font-size:10px;
  text-align:justify;
  text-align-last:center;
}

.amazake-m {
  font-family: 'Lobster', cursive;
  font-size:11px;
  color:#444221;
}

.amazake-n {
  font-family:georgia;
  letter-spacing:1px;
  font-style:italic;
  color:#666;
}

.amazake-o {
  font-family:calibri;
  font-size: 9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: #4d4838;
}
</style>

<center>

<div class="amazake-container">

  <div class="amazake-images">
    <img src="https://i.ibb.co/ccDWrg1F/Affetti-Simon.png">
  </div>

  <div class="amazake-title">
    <span class="quote">Sake-kasu amazake</span>
  </div>

  <div class="amazake-text">
    Late night watching television but how we get in this position? It's way <span class="amazake-n">too soon</span>, I know this isn't <span class="amazake-o">love</span>... but I <span class="amazake-m">really, really, really, really, really, really</span> like you
  </div>

  <br><br>

</div>

</center>