Basil 2 by @MILENUCCIA87 - Codewith.it

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

References

<link>Collega il documento corrente con una risorsa esterna
<embed>Tag per l'incorporamento di contenuti multimediali
<ol>Crea liste ordinate o numerate.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
langSpecifica la lingua del contenuto di un elemento
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Sezioni Nuove Delajo

Quiz ristrutturazione

Mare Luxus - Yachts di Lusso, Navi

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>