SOPRAVVIVENZA by @MILENUCCIA87 - Codewith.it

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

References

<ol>Crea liste ordinate o numerate.
<label>Mostrare un testo di etichetta per un elemento di input.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<html>Tag primario di un documento HTML
<ul>Usato per la creazione di liste non ordinate.
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Users

Log in to search for users

Explore

Find inspiration

esercizio informatica 1

Portfolio Web Developer

TABELLA ESERCITAZIONE

Blocco visualizzazione PC

round - social bar

copia da paragrafo

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: none; }
::-webkit-scrollbar {background-color: #000!important; width: 0px;}
::-webkit-scrollbar-thumb {background: #1a070c!important; opacity: 0;}


 /* ------------------ GIF------------------- */

 .giffette {
            width: 90px;
            padding: 10px;
            position: relative;
            text-align: center;
            margin-top: -5px;
            margin-left: 180px;
            -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
        }


        .giffette img {
            width: 100%;
            opacity: 0.8;
            filter:grayscale(100%);
            border: 1px solid rgba(141, 71, 6, 0.747);
            -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
        }

        .giffette img:hover {
            filter: grayscale(0%);
            opacity: 1;
        }


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

  .frase {position:relative; margin-top:120px; margin-left: -60px; width:380px; height:100px; color:rgba(141, 71, 6, 0.747); font-family: 'Bebas Neue', sans-serif; text-transform:uppercase; letter-spacing:-1px; font-size:35px; text-align:center; text-shadow: 1px 1px 1px black;}

  .frase1 {position:relative; margin-top: -64px; margin-left: -60px; width:360px; color:#1a1a1a;font-family: "Inter", sans-serif; background-color: rgba(141, 71, 6, .5); font-weight:bold;letter-spacing:5px; text-transform:uppercase;font-size:8px;text-align:center;text-shadow:1px 1px 1px #000; }

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

.testo {background: #1a1a1a; box-shadow: 0px 0px 5px #000; overflow: auto; color: #777;font-family: verdana;font-size: 10px; text-align: justify; padding: 8px; line-height: 10px; margin-left: 40px;margin-top: -255px; width: 200px; height: 200px;}


/* THUMB */
.thumbnail {position: relative; z-index: 8; text-decoration: none !important}
.thumbnail:hover {background: transparent; z-index: 9}
.thumbnail > span {display: none; position: absolute; top: 35px;; left: -10px;}
.thumbnail > span img {height: 85px; border: 1px solid rgba(141, 71, 6, 0.747);}
.thumbnail:hover > span {display: block; color: black;}
.thumbnail:hover span span {display: inline; border: none}


/*-------------STYLE---------*/
a {
     text-decoration:none!important;
}

d {
     color: #FFFFCE; font-family: georgia; font-size: 9px; line-height: 9px;font-style: italic; font-weight: bold;
}

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

h {
     font-family: georgia; 
     text-transform: uppercase;
     font-size: 7px;
     line-height: 9px!important;
     letter-spacing: 3px; 
     color: #FED197;
     opacity: 0.7;
     text-shadow: 1px 1px 0px #111; 
} 

w {
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #000000; 
     background: rgb(141, 71, 6, 0.5); 

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


/* ------------------------------ B - I - U - S ------------------------------ */
a {
            color: #555;
            font-size: 15px;
            -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
        }

        a:hover {
            color: rgba(141, 71, 6, 0.747);
            -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
        }

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


u {
     text-decoration: underline dashed #7b8a9d; 
     line-height: 9px;
}

</style>

<center>
<div class="frase"><center>STAVA LI COME UNA CANDELA ACCESA</center></div>
<div class="frase1"><center>en un granero que arde</center></div>
<div class="giffette">
<img src="https://i.imgur.com/zHJpXtG.gif">
<img src="https://i.imgur.com/cBBa29l.gif">
<img src="https://i.imgur.com/leflAbm.gif">
    </div>
    


<!--SIDEBAR-->
	<div style="width:50px; heigth: 50px; positon:relative; margin-top: -180px; margin-left: -370px; z-index:2;">


		<!--NAV-->
		<div style="background: #1a1a1a; box-shadow: 0px 0px 5px #000; overflow: auto; color: #777;font-family: verdana; width:10px; height:60px; padding: 8px; line-height: 15px;">

			<div style="height:100%;display:flex;flex-direction:column;justify-content:center; text-align:center;">
				<a href="#1" style="color: #777; font-size: 8px;">I</a>
				<a href="#2" style="color: #777;font-size: 8px;">II</a>
				<a href="#3" style="color: #777;font-size: 8px;">III</a>
			</div>

		</div>

	</div>


	<!--CONTENT-->
		<div style="width:calc(98% - 200px); margin-top: -160px; margin-right: 140px; height:230px; overflow:hidden;background: #1a1a1a; box-shadow: 0px 0px 5px #000;">


		<!--STORIA-->
		<a name="1"></a>
		<div style="background: #1a1a1a; box-shadow: 0px 0px 5px #000; overflow: auto; color: #777;font-family: verdana; font-size: 10px; text-align: justify; height:230px; padding: 8px; line-height: 10px;">




<!--SECTION CONTENT-->
			<div style="height:calc(100% - 230px);">

        <br><br><br><center>Aveva quella <f>bellezza</f> di cui solo <d>i vinti</d> sono capaci. E la <k>limpidezza</k> delle <f>cose deboli</f>. E la solitudine, perfetta,<br><h>di ciò che si è perduto</h></center><br><w>Rafaèl Edmundo Reyes</w> » '87 el veinti4 de febrero  <h>Puerto Hechizo</h>. || 185cm x 83kg || dark brown hair x deep blue eyes || <w>Taxi driver</w> || Ha la faccia pulita di uno che ha <u>molte colpe</u> da espiare. Un passato da soldato che gli ha fatto guadagnare uno strano <d>senso d'eroismo</d> ed un <f>codice d'onore</f> del tutto personale.
	</div>

		</div>


		<!--MACCHINA-->
		<a name="2"></a>
		<div style="background: #1a1a1a; box-shadow: 0px 0px 5px #000; overflow: auto; color: #777;font-family: verdana; font-size: 10px; text-align: justify; heigth: 230px; padding: 8px; line-height: 10px;">


			<!--SECTION CONTENT-->
			<div style="height:calc(100% - 230px);">

        <br><br><br><br><br>Un vecchio commilitone americano, un <f>fratello</f> con il quale ha combattuto parecchie battaglie, prima di tornare in America gli ha regalato la sua vecchia <a class="thumbnail" href="#"><w>c a d i l l a c</w><span><img alt="" src="https://i.imgur.com/BIjkGTp.jpeg"></span></a>, una <d>Eldorado</d> del '74 sulla quale ha fatto installare, tornato a Puerto Hechizo, la scritta TAXI. E' di un arancione sbiadito, decisamente rovinato ed il motore tossisce un poco quando cammina. <br><br><br><br></br><br>
			</div>

		</div>


		<!--OFF-->
		<a name="3"></a>
		<div style="overflow: auto; color: #777;font-family: verdana; font-size: 10px; text-align: justify; height:230px; padding: 8px; line-height: 10px;">

			<!--SECTION CONTENT-->
			<div style="height:calc(100% - 230px);">
<br><br><center><w>OFF</w></center>• Ho orari prettamente <f>serali</f> ma può capitare che -di tanto in tanto- io ci sia anche di giorno;<br>• Gioco tutto, con tutti anche in gruppo. Si alle botte. Si alle risse. Si a rapimenti degli alieni (?).<br>• Quando mi vedete online contattatemi pure. Il pallino difficilmente mente.<br>• I codici sono di <w>Hachi</w> e <w>Alix</w> brutalmente massacrati e rivisitati da me.

			</div>

		</div>


	</div>


</div>