codice theo fatto na merda by @MILENUCCIA87 - Codewith.it

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

Referenze

autofocusAttiva un elemento al caricamento della pagina.
downloadConsente di scaricare file al click di collegamento ipertestuale.
<a>Inserisce link e collegamenti ipertestuali
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<h4>Titolo di intestazione di quarto livello
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Form per il torneo misto disfo

esercizio riepilogativo 2

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.

 <style>
    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@200&family=Roboto&display=swap');

    ::selection { color: #635856; background: transparent; }
    ::-webkit-scrollbar {background-color: #000!important; width: 1px;}
    ::-webkit-scrollbar-thumb {background: #1a070c!important; opacity: 0.1;}

    .base {
        position: relative;
        width: 600px;
        height: 700px;
        margin-top: -40px;
    }

    .img {
        position: absolute;
        z-index: 2;
        width: 600px; 
        height: 450px;
        left: 10px;
        margin-top: 5px;
        background-image: url('https://i.imgur.com/pI0qTq7.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
        border: 2px solid #1d191c;
        box-shadow: 0px 0px 10px #1d191c;
    }

    .img:hover { filter: brightness(0.8) contrast(1.0); }

    .box {
        box-shadow: 0px 5px 15px #000;
        background-image: url('https://i.imgur.com/dGn4ity.png');
        border-bottom: 4px solid #222;
        border-top: 4px solid #222;
        width: 450px;
        height: 400px;
        position: relative;
        text-align: center;
        z-index: 5;
        opacity: 0;
        transition: all 1.5s ease-in-out;
        margin-top: -200px;
        pointer-events: none;
        overflow: hidden; 
    }

    .img:hover .box { opacity: 1; margin-top: 5px; z-index: 3; transition: all 1.8s ease-in-out; pointer-events: auto; }

    .testo {
        overflow: auto;
        color: #777;
        border-left: 1px dashed #333;
        font-family: Verdana;
        font-size: 10px;
        text-align: justify;
        padding: 10px;
        line-height: 11px;
        margin-left: 25px;
        border-right: 1px dashed #333;
        width: 380px;
        height: 260px;
    }

    .frase {
        position: relative;
        margin-top: 235px;
        width: 530px;
        color: #813a32;
        font-family: 'Bebas Neue', sans-serif;
        text-transform: uppercase;
        font-size: 35px;
        text-align: center;
        text-shadow: 1px 1px 1px #fff;
    }

    .frase1 {
        position: relative;
        margin-top: -10px;
        width: 310px;
        color: #fff;
        font-family: "Inter", sans-serif;
        background-color: rgba(86,101,86, .6);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 9px;
        text-shadow: 1px 1px #000;
    }

	    .affetti {
        position: relative;
        margin-top: -10px;
        margin-left: -5px;
        width: 310px;
        color: #fff;
        font-family: "Inter", sans-serif;
        background-color: rgba(86,101,86, .6);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 9px;
        text-shadow: 1px 1px #000;
    }

    .gif {
        width: 350px;
        height: 100px;
        margin-left: 50px;
    }



a {
     text-decoration:none!important;
}

k {
     color: #424951; font-family: georgia; font-size: 9px; line-height: 9px;font-style: italic; font-weight: bold;  letter-spacing: 0.5px;
}

m {
     font-family: calibri; 
     color: #8e9c8b;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: bold;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
}

n {
     font-family: georgia; 
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 3px; 
     color: #826f6d;
     text-shadow: 1px 1px 0px #111; 
} 

g {
     text-transform: uppercase;
     font-weight: bold;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #000000; 
     background: rgb(86,101,86, 0.5); 

     padding-left:7px;
     padding-right:7px;
} 


/* ------------------------------ B - I - U - S ------------------------------ */

b, i, u, s {
     color: #444;
}


u {
     text-decoration: underline dashed #533a33; 
     line-height: 9px;
}




    #contenuto-id, #contenuto-storia {
        display: none;
    }

    /* Mostra la sezione corrispondente quando il radio è selezionato */
    #id:checked ~ .img .box #contenuto-id {
        display: block;
    }

    #storia:checked ~ .img .box #contenuto-storia {
        display: block;
    }
    
.creditini {
	margin-top: 40px;
 }
    
 .thumbnail{
position: absolute;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:  #ecf3f3;
padding: 5px;
left: -5000px;
border: 1px dashed gray;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 310;
left: -280px; /*position where enlarged image should offset horizontally */
}

#jeremy {
     font-family: calibri; 
     color: #8e9c8b;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: bold;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px;
     background-color: transparent; 
     border: none; 
     cursor: crosshair;
     transition: background-color 0.3s ease;

     }  

  </style>




<center>
  <div class="base">
  
  <input type="radio" name="sezione" id="id" checked="" style="
    opacity: 0;">
    <input type="radio" name="sezione" id="storia" style="
    opacity: 0;">

    <div class="img">
      <div class="frase">can we speak in flowers?</div>
      <div class="frase1">it will be easier for me to understand.</div>

      <div class="box">
              <div class="gif">
                <label for="id"><img src="https://64.media.tumblr.com/fe264f7a0f0f7fc402d41384b856dc49/b6c524099c47a31d-84/s540x810/9e54da4d8875abbd2b037ce814cc136880b4c28f.gif" style="transform: rotate(-5deg); width: 150px; object-fit: cover;border: 1px solid #566556;filter: brightness(90%);box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; cursor: crosshair;"></label>
                <label for="storia"><img src="https://64.media.tumblr.com/31f682b09141e01115356df8437b21cd/b6c524099c47a31d-06/s540x810/61c42650fde7424e299cebdf383dc8ada5d8c7b2.gif" style="transform: rotate(2deg); width: 150px;object-fit: cover;border: 1px solid #566556;filter: brightness(90%);box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; cursor: crosshair;"></label>
              </div>
               <div style="height:330px;overflow:hidden;">
          <div style="height:330px;overflow-y: auto;">
            <div style="width:100%;">
              <!-- Sezione ID -->
              <div id="contenuto-id" class="testo">
				<k><b>THEO<s>DORA</s> irène PARKS</b></k> -- <m>figlia di demetra</m> --  alta un metro e sessantadue in cui sono distribuiti 52 chili di muscoletti (e fondoschiena). Viso dai tratti dolci e delicati -facendola sembrare a tratti più piccola di quanto non lo sia in realtà senza gli appositi cosmetici- importanti nomine sono l'eye-liner bianco capace di tagliare teste, l'ombretto rosa glitteroso e chili di mascara. Lunghi <m>capelli castano chiaro</m> che le arrivano più o meno fino alla metà della schiena, folti, leggermente mossi, e morbidi, costantemente intreccecciati con fiori di vario tipo, scelti secondo chissà quale criterio. Gli occhi sono grandi e <n>verdi</n>, che non nascondono che sia anche solo una emozione. Una tragedia. Peggior giocatrice di poker di sempre. Nasce nella periferia di <k>Santiago</k>, nel Cile, lasciata sotto al <n>"cavolo"</n> al suo adorabile quanto <g>fattone</g> padre exterior designer. Per via di quel lavoro si ritrovano a viaggiare e spostarsi costantemente, almeno fino agli ultimi due anni di liceo, dove si stabilisce a <m>New York City</m>. Capo cheerleader della sua scuola, "popolare" grazie ad un modo di fare <i>estremamente</i> dolce e amichevole, e la totale incapacità di dire di <g>no</g> a nessuno. Gran bella fregatura. Vive una vita serenissima, all'insegna di feste continue e decisamete fuori controllo (dove viene attaccata per via di un limone -perché la frutta è la nemica numero uno dei semidei) e un mazzo tanto a scuola che la porta ad avere voti alti ovunque nonostante <n>ADHD e dislessia</n>, perché papi parks deve essere fiero di lei. Conosciuta sui social negli ambienti dell'attivismo per il cambiamento climatico, la protezione delle specie e la legalizzazione della <k>cannabis</k>.
              </div>
              
              <!-- Sezione Storia -->
              <div id="contenuto-storia" class="testo">


arriva

  </div></div></div></div></div></div></div>
<div class="creditini"><center>grafichina e codicini di spiros che io amo alla <k>follia</k></center></div>



                </center></div>
            </div>
     
</div>