Basil 2 by @MILENUCCIA87 - Codewith.it

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

References

heightDetermina l'altezza di un elemento HTML in pixel
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<map>Inserisce immagini mappa cliccabili in un documento
maxImposta il valore numerico o temporale massimo per un elemento input
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form

Users

Log in to search for users

Explore

Find inspiration

lezione 31.10 1

Pagina sul lorem ipsum

Kladdkaka - Ricetta Torta al Ciocc

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>