PROVE SOPHIA by @MILENUCCIA87 - Codewith.it

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

Referenze

<link>Collega il documento corrente con una risorsa esterna
Inserisce un commento nel codice
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
<tbody>Definisce il contenuto principale di una tabella.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esame di informatica

Ximena\'s hamburger

Scheda Tecnica iPhone 15 Pro

Esercizi 05/03/2024 es5

Laus Informatica srl - Negozio eBay

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<style>
:root {
    --accent: #7D7436;
    --dark: rgba(12, 12, 12, 0.88);
    --gold: rgba(125, 116, 54, 0.78);
}

.sig {
    margin: auto;
    width: 448px;
    height: 677px;
    border: 20px solid #0c0c0c;
    position: relative;
    overflow: hidden;
}

/* IMMAGINE */
.sig-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://i.imgur.com/Xh0HLkI.png) center / cover no-repeat;
    transition: 1s ease;
    z-index: 1;
}

.sig:hover .sig-img {
    filter: grayscale(100%);
}

/* OVERLAY */
.overlay-top,
.overlay-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    transition: all 1s ease;
    z-index: 2;
}

.overlay-top {
    top: -50%;
    background: var(--dark);
}

.overlay-bottom {
    bottom: -50%;
    background: var(--gold);
}

.sig:hover .overlay-top {
    top: 0;
}

.sig:hover .overlay-bottom {
    bottom: 0;
}

/* CONTENUTI */
.top-content,
.bottom-content {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.top-content {
    top: 20px;
    text-align: center;
}

.bottom-content {
    bottom: 0;
    height: 50%;
    padding: 22px 26px 18px 26px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
}

.sig:hover .top-content,
.sig:hover .bottom-content {
    opacity: 1;
    transition-delay: 0.8s;
}

/* NOME */
.name {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(125, 116, 54, 0.82);
    text-shadow: 0 0 3px rgba(0,0,0,0.35);
    margin-bottom: 6px;
}

/* GIF */
.gif-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.gif-row img {
    width: 85px;
    height: 95px;
    object-fit: cover;
    border: 2px solid var(--accent);
    display: block;
}

/* TESTO */
.bottom-text {
    width: 100%;
    max-height: 100%;
    margin-top: 50px;
    overflow: hidden;
    font-size: 9px;
    line-height: 13px;
    text-transform: uppercase;
    color: rgba(0,0,0,0.82);
    letter-spacing: 0.2px;
    text-align: justify;
}
</style>

<div class="sig">
    <div class="sig-img"></div>

    <div class="overlay-top"></div>
    <div class="overlay-bottom"></div>

    <div class="top-content">
        <div class="name">Sophia Hale Walker</div>
        <div class="gif-row">
            <img src="https://i.imgur.com/VIqkMym.gif">
            <img src="https://i.imgur.com/HeMfRRC.gif">
            <img src="https://i.imgur.com/0ZUuhYd.gif">
        </div>
    </div>

    <div class="bottom-content">
        <div class="bottom-text">
            Non parla molto ma ascolta con attenzione chirurgica e quando decide di dire qualcosa è impossibile ignorarla. Tratta i pazienti con gesti precisi, ma mai impersonali: ogni tocco è calcolato per non far male. Ha paura dell’intimità vera per questo si lascia avvicinare poco, ma lascia piccoli gesti in giro: piccoli gesti, un infuso caldo preparato in silenzio. Tiene le distanze da quasi tutti ma se un cane si avvicina, si lascia leccare le dita come se il mondo, per un attimo, smettesse di essere mostruoso. Quando sente troppo, tace. Quando ama, lo dice coi gesti. Se qualcuno chiede di lei, difficilmente si tira indietro, specialmente se ferito. Dorme poco. Controlla ogni notte che tutto sia al suo posto. Anche i battiti delle persone a cui tiene. Non sopporta chi uccide senza pensare. Ma se qualcuno ferisce ciò che ama allora è precisa. Fredda. Inarrestabile. Ha un diario segreto dove trascrive i nomi di tutti quelli che ha curato. Come un rosario silenzioso di anime toccate. Non crede più nel futuro ma ogni giorno cerca una piccola cosa da salvare. Un gesto. Una vita. Un respiro. || Crede nel bene. Non nel mondo. Ma nel bene, sì.
        </div>
    </div>
</div>