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

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

References

novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
maxImposta il valore numerico o temporale massimo per un elemento input
<object>Incorpora risorse varie nella pagina web.
<td>Definisce una cella di una tabella HTML.
<head>Tag primario di un documento HTML
<ol>Crea liste ordinate o numerate.

Users

Log in to search for users

Explore

Find inspiration

Italiano-Cinema [Container]

Quiz ristrutturazione

esercizio 02 pagina complessa

Il tuo link per il download è pro

Esame informatica

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.

 <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>