Basil 2 by @MILENUCCIA87 - Codewith.it

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

References

<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
<map>Inserisce immagini mappa cliccabili in un documento
formnovalidateImpedisce la convalida di un singolo elemento input
text/plainDefinisce un metodo di non codifica dei valori di un form
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
getDefinisce un metodo di invio di dati al server

Users

Log in to search for users

Explore

Find inspiration

Deutsch Plus [Box]

REVIEW: For Loops

Random Website Demo1

ZacTour - Scopri la Puglia Autenti

Calcolatrice Pitagora

Esercizi 05/03/2024 es7

STILI + IMMAGINI

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=Koulen&display=swap" rel="stylesheet">

    <style>
        .immagine {
            width: 500px;
            height: 618px;
            margin: auto;
            position: relative;
            overflow: hidden;
            background-image: url(https://i.imgur.com/NfomP6y.png);
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .frase {
            width: 600px;
            height: 20px;
            transform: rotate(90deg);
            text-shadow: 1px 1px 1px black;
            color: rgba(141, 71, 6, 0.747);
            font-family: 'Koulen', cursive;
            font-size: 20px;
            margin-top: 300px;
            margin-left: -130px;
        }

        .testo {
            width: 110px;
            height: 130px;
            padding: 10px;
            margin-top: 30px;
            margin-left: 20px;
            position: relative;
            background-color: rgba(0, 0, 0, 0.39);
            color: rgb(185, 185, 185);
            text-align: justify;
            text-shadow: 1px 1px 1px black;
            font-family: tahoma;
            font-size: 10px;
        }

        .giffette {
            width: 110px;
            padding: 10px;
            position: relative;
            text-align: center;
            margin-top: -270px;
            margin-left: 20px;
            -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.4;
            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: 0.9;
        }

        .altrove {
            position: relative;
            margin: auto; 
            text-align: right;
            width: 500px;
            text-shadow: 1px 1px 1px black;
            color: rgba(80, 80, 80, 0.747);
            font-family: 'Koulen', cursive;
            font-size: 20px;
            margin-top: -10px;
        }
    
        f {
            color: rgba(214, 155, 99, 0.747);
            font-size: 9px;
            letter-spacing: 2px;
        }

        r {
            color: #fff;
            font-family: georgia;
            font-style: italic;
            font-size: 11px;
        }

        k {
            font-family: cambria;
            background-color: #222;
            text-transform: uppercase;
            font-size: 9px;
            color: rgba(216, 176, 153, 0.664);
        }

        l {
            font-family: 'Koulen', cursive;
            font-size: 11px;
            color: rgba(175, 175, 175, 0.459);
            line-height: 8px;
        }

        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;
        }
    </style>
</head>
<div class="immagine">
<div class="frase">Stava li, come una candela accesa in un granaio che brucia.</div>
<div class="giffette">
    <img src="https://64.media.tumblr.com/17289a4c0303558031a461f332aba2c3/536f80e5c4ab5994-e4/s250x400/b181361791cc03c95a059f8bd1e78e0e20d9ad2d.gifv"><br><br>
    <img src="https://64.media.tumblr.com/f6679041e9ab3a419a1cb3256de3692b/536f80e5c4ab5994-c6/s250x400/daa83820f730b79e790e992590c7ba2bb4528fc0.gifv"><br><br>
    <img src="https://64.media.tumblr.com/38750b15c5ecd51e11080a4b9fd8db69/536f80e5c4ab5994-b5/s250x400/d1906a1588f83572a22a8f319bd528c2d76d1a79.gifv"><br><br>
    <img src="https://64.media.tumblr.com/3c2a4ed6cf7ed74cb5eeb2159c5acc58/536f80e5c4ab5994-8a/s250x400/a0ed1b75d2595c27a1f39246060e59ce422aacb0.gifv">
</div>

<div class="testo">Aveva quella <f>bellezza</f> di cui solo i <r>vinti</r> sono capaci. E la <k>limpidezza</k> delle <f>cose deboli</f>. E la
    solitudine, perfetta, <r>di ciò che si è perduto</r>. // <l>disenchanted man. Sense of heroism. A kind of grotesque power. A
    beautiful golden heart.</l></div>
</div>

<div class="altrove"><a onclick=" window.open('http://feuerundwasser.altervista.org/polverenera/EXP1.png','','scrollbars=no,menubar=no,width=305, height=505,resizable=yes')">tocco dell'altrove</a>
</div></div>
</html>