Scheda(2) by @KiraKuru - Codewith.it

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

References

<object>Incorpora risorse varie nella pagina web.
<option>Serve ad inserire una voce in un menu di selezione.
<textarea>Area di testo libero espandibile per form HTML
<meta>Definisce i meta dati di una pagina web.
postDefinisce un metodo di invio di dati al server
minlengthDetermina il numero minimo di caratteri per un elemento input

Users

Log in to search for users

Explore

Find inspiration

Anita Angiolini

esercizio pag. 335

formattazione_testo.html.(2)

Indovina il Numero - Gioco

Heads Or Tails Random Tally

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.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&family=Barlow:wght@700&family=Festive&display=swap" rel="stylesheet">


<div class="table">
  <div class="main_box">
  </div>


  <div class="main_box-inner-a">
    <div class="scar_box">
    </div>
  </div>


  <div class="main_box-inner-b">
    <div class="gif_box-a">
    </div>

    <div class="gif_box-b">
    </div>

    <div class="gif_box-c">
    </div>

    <div class="hunter_box">
    </div>
  </div>


  <div class="text_box">
  </div>

    <div class="text_box-inner-base-id">
      <div class="text_box-inner-id">

aaaaaaaaa aaa aaaaaa aaaa aaa  <ii>Lorem Ipsum</ii><w>dolor sit amet<f1>consectetur adipiscing elit</f1></w><c> sed do eiusmod tempor</c><e>incididunt ut labore</e><d>et dolore magna aliqua.</d><k>Ut enim ad minim</k><h>veniam, quis nostrud exercitation</h><i>ullamco laboris nisi</i><w>ut aliquip ex ea commodo consequat.</w><g>Duis aute irure dolor</g><kk>in reprehenderit in</kk><b>voluptate velit esse</b>

      </div>
    </div>


   <div class="text_box-inner-base-p">
      <div class="text_box-inner-p">

<ee>NOME A • NOME B</ee><br>
nome nome nome nome nome nome

      </div>
    </div>

  <div class="quote_box-a">

<span style="margin-left:15px;">The Soul that Sees Beauty</span> <br>
<span style="margin-left:-35px;">May Sometimes Walk Alone</span> 

  </div>


  <div class="quote_box-b">

let <br>
the <span id="quote_pulse">HUNT</span> <br>
begin
  
  </div>
<audio controls autoplay>
  <source src="https://dl.dropboxusercontent.com/s/3t184xqetn9qmtq/X2Download.app%20-%20Wolves%20%28128%20kbps%29.mp3" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>

<style>


/* ------------------------------ GENERICO ------------------------------ */

::-webkit-scrollbar {

     background: #000000;
     width: 0px;
     cursor: s-resize;
     padding: 0;
     margin-right: 0px;
}

::-moz-selection {

     color: #453f2e;
     background: none;
     text-shadow: 0px 0px 0px #000!important;
}

::selection {

     color: #453f2e;
     background: none;
     text-shadow: 0px 0px 0px #000!important;
}

div {

    cursor:text;
}



/* ------------------------------ AREA LAVORO ------------------------------ */

.table {background-color: none; position: absolute; overflow: hidden;

     width: 539px; 
     height: 600px;
     left: 50%;
     top: 50%;
     margin-left: -269.5px;
     margin-top: 150px;
     box-shadow: 0px 0px 10px #000;
}



/* ------------------------------ IMMAGE ------------------------------ */

.main_box {position: absolute; z-index:1; float: left; overflow: hidden; opacity: 1; 
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     width: 539px; 
     height: 600px;
     left: 50%;
     top: 50%;
     margin-left: -269.5px;
     margin-top: -300px;

     background-image: url(https://i.imgur.com/8trQzPK.png);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     transition-delay: 1s;
}

.table:hover .main_box {

     background-position: 0px -25px;
     transition-delay: 0.5s;
}

.main_box-inner-a {position: absolute; z-index:3; float: left; overflow: hidden; opacity: 1; 
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     width: 539px; 
     height: 213px;
     left: 50%;
     top: 100%;
     margin-left: -269.5px;
     margin-top: 0px;

     background-image: url(https://i.imgur.com/rrOhB8t.png);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     transition-delay: 1.5s;
}

.table:hover .main_box-inner-a {

     margin-top: -213px;
     transition-delay: 0s;
}



/* ------------------------------ TESTO BOX ------------------------------ */

.main_box-inner-b {position: absolute; z-index:2; float: left; overflow: hidden; opacity: 1; 
     -moz-transition: all ease-in-out 1.5s; -webkit-transition: all ease-in-out 1.5s; -o-transition: all ease-in-out 1.5s; 

     width: 413px; 
     height: 239px;
     left: 50%;
     top: 100%;
     margin-left: -206.5px;
     margin-top: -0px;

     background-image: url(https://i.imgur.com/jaDM1CI.png);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     box-shadow: 0px 0px 10px #000;
     transition-delay: 1s;
}

.table:hover .main_box-inner-b {

     margin-top: -268px;
     transition-delay: 0s;
}



/* ------------------------------ TESTO ID ------------------------------ */

.text_box-inner-base-id {position: absolute; z-index:4; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 390px; 
     height: 100px;
     left: 50%;
     top: 50%;
     margin-left: -195px;
     margin-top: 45px;

     background: rgba(51, 45, 41, 0.2);
     transition-delay: 0.5s;
}

.text_box-inner-id {position: absolute; z-index:1; float: left; overflow: auto; opacity: 1;

     width: 370px;
     height: 83px;
     left: 0%;
     top: 0%;
     margin-left: 10px;
     margin-top: 8.5px;
     background: none;

     color: #222;
     font-family: tahoma;
     font-size: 12px; 
     line-height: 8px; 
     letter-spacing: 0px;
     text-align: justify;
     text-shadow: 0px 0px 0px #000;
}

.table:hover .text_box-inner-base-id {

     opacity: 1;
     transition-delay: 1.5s;
}

/* ------------------------------ TESTO PEOPLE ------------------------------ */

.text_box-inner-base-p {position: absolute; z-index:4; float: left; overflow: hidden; opacity: 1;
     -moz-transition: all ease-in-out 1.5s; -webkit-transition: all ease-in-out 1.5s; -o-transition: all ease-in-out 1.5s; 

     width: 200px; 
     height: 50px;
     left: 50%;
     top: 50%;
     margin-left: 280px;
     margin-top: 208px;

     background: #000;
     transform: rotate(-5deg);
     box-shadow: 0px 0px 5px #000;
     transition-delay: 0.5s;
}

.text_box-inner-p {position: absolute; z-index:1; float: left; overflow: hidden; opacity: 1;

     width: 180px;
     height: 20px;
     left: 50%;
     top: 50%;
     margin-left: -90px;
     margin-top: -10px;
     background: none;

     color: #444;
     font-family: tahoma;
     font-size: 10px; 
     line-height: 10px; 
     letter-spacing: 0px;
     text-align: center;
     text-shadow: 1px 1px 0px #000;
}

.table:hover .text_box-inner-base-p {

     margin-left: 50px;
     transition-delay: 1.3s;
}



/* ------------------------------ AESTHETIC ------------------------------ */

.gif_box-a { position: absolute; z-index: 2; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 80px; 
     height: 80px;
     right: 0%;
     top: 0%;
     margin-right: 104px;
     margin-top: 120px;

     background-image: url(https://i.imgur.com/WExdgiO.gif);
     background-position: -15px 0px;
     background-repeat: no-repeat;
     background-size: cover;

     -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
     transition-delay: 0.2s;
}

.gif_box-b { position: absolute; z-index: 2; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 80px; 
     height: 80px;
     right: 0%;
     top: 0%;
     margin-right: 57px;
     margin-top: 120px;

     background-image: url(https://i.imgur.com/z6aaSRK.gif);
     background-position: -65px 0px;
     background-repeat: no-repeat;
     background-size: cover;

     -webkit-clip-path: polygon(50% 100%, 100% 0, 0 0);
     clip-path:polygon(50% 100%, 100% 0, 0 0);
     transition-delay: 0.4s;
}

.gif_box-c { position: absolute; z-index: 2; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 80px; 
     height: 80px;
     right: 0%;
     top: 0%;
     margin-right: 10px;
     margin-top: 120px;

     background-image: url(https://i.imgur.com/4dw2u6t.gif);
     background-position: -30px 0px;
     background-repeat: no-repeat;
     background-size: cover;

     -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
     transition-delay: 0.6s;
}

.table:hover .gif_box-a {

     opacity: 1;
     transition-delay: 1.8s;
}

.table:hover .gif_box-b {

     opacity: 1;
     transition-delay: 2s;
}

.table:hover .gif_box-c {

     opacity: 1;
     transition-delay: 2.2s;
}

.scar_box { position: absolute; z-index: 2; float: left; overflow: hidden; opacity: 1;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 460px; 
     height: 560px;
     left: 0%;
     top: 0%;
     margin-left: -120px;
     margin-top: -98px;

     background-image: url(https://i.imgur.com/yLPflHE.gif);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     transform: rotate(-415deg);
}

.hunter_box { position: absolute; z-index: 2; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 224px; 
     height: 57px;
     left: 0%;
     top: 0%;
     margin-left: 30px;
     margin-top: 110px;

     background-image: url(https://i.imgur.com/AhYmC7f.png);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     transform: rotate(-5deg);
     transition-delay: 0.5s;
}

.table:hover .hunter_box {

     opacity: 1;
     transform: rotate(5deg);
     transition-delay: 2.2s;
}



/* ------------------------------ QUOTE ------------------------------ */

.quote_box-a { position: absolute; z-index: 4; overflow: hidden; opacity: 0;
     -moz-transition: all ease-out 1.5s; -webkit-transition: all ease-out 1.5s; -o-transition: all ease-out 1.5s; 

     width: 300px;
     height: 20px;
     left: 100%;
     top: 100%;
     margin-left: -300px;
     margin-top: -28px;
     background-color: none;
     filter: blur(1px);

     color: #b1b1b1;
     font-family: cambria;
     font-size: 8px; 
     font-weight: none;
     line-height: 8px; 
     letter-spacing: 5px;
     text-transform: uppercase;
     text-align: center; 
     text-shadow: 1px 1px 0px #000;
     transition-delay: 0.8s;
}

.table:hover .quote_box-a {

     opacity: 1;
     filter: blur(0px);
     transition-delay: 1s;
}

.quote_box-b { position: absolute; z-index: 1; overflow: hidden; opacity: 1;
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     width: 150px;
     height: 30px;
     left: 50%;
     top: 50%;
     margin-left: -75px;
     margin-top: -65px;
     background-color: none;

     color: #262626;
     font-family: cambria;
     font-size: 12px; 
     font-weight: bold;
     line-height: 8px; 
     letter-spacing: 3px;
     text-transform: uppercase;
     text-align: center; 
     text-shadow: 1px 1px 0px #000;
     transition-delay: 1s;
}

.table:hover .quote_box-b {

     margin-top: -90px;
     transition-delay: 0.5s;
}

@keyframes pulse {

     0% {filter:blur(0px);}
     50% {filter:blur(1.5px);}
     100% {filter:blur(0px);}
}

#quote_pulse {

     -moz-transition: all ease-out 0.5s; -webkit-transition: all ease-out 0.5s; -o-transition: all ease-out 0.5s; 
     animation: pulse 3s infinite;
}



/* ------------------------------ STYLE TESTI ------------------------------ */

a {
     text-decoration:none!important;
}

c {
     color: #302a1c;
     font-family: georgia;
     font-size: 11px;
     font-style: italic;
     line-height: 7px;
     letter-spacing: 2px; 
}

d {
     color: #bdb199;
     font-family: calibri; 
     font-size: 10px;
     font-weight: bold;
     line-height: 7px;
     letter-spacing: 2px; 
     text-transform: uppercase;
}

e {
     color: #474031;
     font-family: georgia; 
     font-size: 9px;
     line-height: 7px;
     letter-spacing: 3px; 
     text-transform: uppercase;
} 

ee {
     color: #877d67;
     font-family: georgia; 
     font-size: 9px;
     line-height: 7px;
     letter-spacing: 3px; 
     text-transform: uppercase;
} 

f1 {
     letter-spacing: 0px; 
}

g {
     color: #302e2a; 
     font-size: 8px;
     font-weight: bold;
     line-height: 7px;
     letter-spacing: 2px; 
     text-transform: uppercase;
} 

h {
     color: #c9ba91;
     font-family: georgia; 
     font-size: 8px;
     font-weight: bold;
     line-height: 7px;
     letter-spacing: 3px; 
     text-transform: uppercase;
} 

k {
     color: #302e2a; 
     font-size: 8px;
     font-weight: bold;
     line-height: 7px;
     letter-spacing: 2px; 
     text-transform: uppercase;
     text-decoration: underline dashed #a68c5b; 
} 

kk {
     color: #302e2a; 
     font-size: 8px;
     font-weight: bold;
     line-height: 7px;
     letter-spacing: 2px; 
     text-transform: uppercase;
     text-decoration: line-through dotted #a68c5b; 
} 

w {
     color: #a89b83; 
     background: rgba(70, 62, 44, 0.5); 
     font-size: 9px;
     line-height: 7px;
     letter-spacing: 2px; 
     text-transform: uppercase;

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

b {
     color: #3a3a3a;
     font-family: calibri; 
     font-size: 10px;
     line-height: 7px;
     letter-spacing: 1px;
}

i {
     color: #3a3a3a;
     font-family: times new roman; 
     font-size: 11px;
     line-height: 7px;
     letter-spacing: 1px;
}

ii {
     color: #3a3a3a;
     font-family: calibri; 
     font-size: 10px;
     line-height: 7px;
     letter-spacing: 1px;
}

</style>