Scheda River by @AndyMasy - Codewith.it

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

References

<object>Incorpora risorse varie nella pagina web.
<option>Serve ad inserire una voce in un menu di selezione.
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<a>Inserisce link e collegamenti ipertestuali
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
typeSpecifica la tipologia/funzione di un elemento.

Users

Log in to search for users

Explore

Find inspiration

Comunicare sul Web [Template HTML]

Mappa Visiva (Wire,CTA) - Moduli W

DDFDesign 25+CV & Contatti Profess

Prima Coccola ebay(2)(2)

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.

<br>
<div style="max-width:520px;margin:auto;text-align:center;">

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

<style>

body{
background:#111;
margin:0;
padding:0;
font-family:Georgia, serif;
}

/* container */

.wolf-card{
color:#b0c4de;
}

/* titolo */

tit{
font-family:Georgia, serif;
font-size:20px;
letter-spacing:2px;
text-align:center;
display:block;
margin-bottom:5px; /* più vicino al sottotitolo */
color:#ffffff;
}

/* sottotitolo */

h{
font-family:Georgia, serif;
font-size:12px;
color:#bae3be;
font-style:Georgia;
opacity: 0.2;
margin-bottom:20px; /* distanza dalle immagini */
}

/* immagini */

.wolf-images{
margin-bottom:15px;
margin-top:33px;
}

.wolf-images img{
height:95px;
object-fit:cover;
opacity:0.85;
border-radius:0;
background:rgba(255,255,255,0.05);
margin:3px;
}

/* bordi colori pastello più piccoli */

.img1{border:1px dotted #e5b8bfff;}
.img2{border:1px dotted #ecb86fff;}
.img3{border:1px dotted #90c5e6ff;}

/* box testo senza bordi */

.wolf-bio{
max-width:333px;
margin:auto;
padding:10px;
text-align:justify;
font-size:12px;
line-height:1.4em;
background:rgba(255,255,255,0.02);
border:none;
}

/* colori testo */

.pastel-green { color: #bae3be; }
.pastel-pink { color: #e5b8bfff; }
.pastel-blue { color: #90c5e6ff; }
.pastel-orange { color: #ecb86fff; }

</style>


<div class="wolf-card">

<!-- titolo -->

<tit>
<span style="color:#e5b8bfff;">t</span>
<span style="color:#90c5e6ff;">h</span>
<span style="color:#e5b8bfff;">e</span>
<span style="color:#90c5e6ff;">y</span>
<span style="color:#e5b8bfff;">/</span>
<span style="color:#90c5e6ff;">h</span>
<span style="color:#e5b8bfff;">e</span>
<span style="color:#90c5e6ff;">/</span>
<span style="color:#e5b8bfff;">s</span>
<span style="color:#90c5e6ff;">h</span>
<span style="color:#e5b8bfff;">e</span>
<span style="color:#90c5e6ff;">/</span>
<span style="color:#e5b8bfff;">w</span>
<span style="color:#90c5e6ff;">h</span>
<span style="color:#e5b8bfff;">a</span>
<span style="color:#90c5e6ff;">t</span>
<span style="color:#e5b8bfff;">e</span>
<span style="color:#90c5e6ff;">v</span>
<span style="color:#e5b8bfff;">e</span>
<span style="color:#90c5e6ff;">r</span>
</tit>
<h><i>take me to an art museum and fuck me in the bathroom</i></h>

<!-- immagini -->

<div class="wolf-images">

<img src="https://i.pinimg.com/originals/01/77/a9/0177a94116bcd782b5de37da5b34907a.gif" width="110" class="img1">

<img src="https://i.imgur.com/cUBbdIi.gif" width="90" class="img2">

<img src="https://i.pinimg.com/originals/b4/cf/c8/b4cfc8d97ed9e7fdb253e275b46f40ec.gif" width="110" class="img3">

</div>

<!-- box testo -->

<div class="wolf-bio">

» <span class="pastel-pink"><b>Slane, Ireland</b></span> - 176x67 - <i>mancinə</i> - <span class="pastel-blue">occhi</span> <i>grigi</i>; <span class="pastel-blue">capelli</span> <i>lunghi, mossi, rossi</i>; <span class="pastel-blue">pelle</span> <i>copertə d'efelidi</i> - irlandese, inglese - <span class="pastel-orange"><i>a f a b</i></span> - <i>artista</i> - aspirante erborista - <span class="pastel-green"><b>Druidə dell'Aria</b></span> «


<br>
<center><p style="font-family: 'Bookman Old Style', 'Courier', 'Courier New'">» <span class="pastel-orange"><b>MY</b></span> SEXUAL PREFERENCE IS <span class="pastel-pink"><b>O F T E N</b></span> «</p></center>

</div>

</div>
</div>
<br>

BACKGROUND

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<style>
body {
    background-color:#111;
    margin:0;
    padding:0;
    font-family: Georgia, serif;
}

/* Contenitore principale */
#scheda-wrapper {
    margin: 1rem auto;
    width: 550px;
    min-height: 300px;
}

/* Animazione pulsante per i cuori */
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

/* Titolo elegante con lettere pastello e cuoricini pulsanti */
tit {
    font-family: Georgia, serif;
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
    display: block;
    margin-bottom: 30px; /* distanza maggiore dalla prima immagine */
}

/* Cuori pulsanti ai lati del titolo */
.tit-heart {
    color: #ffffff; /* bianco */
    font-size: 14px;
    display: inline-block;
    animation: pulse 2.5s infinite ease-in-out;
    vertical-align: middle;
    margin: 0 5px;
}

/* Testo scrollabile soft */
.scheda-text {
    font-family: Georgia, serif;
    font-size: 12px;
    color: #b0c4de;
    text-align: justify;
    line-height: 1.4em;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 10px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.02);
}

/* Scrollbar classica */
.scheda-text::-webkit-scrollbar {
    width: 8px;
}
.scheda-text::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}
.scheda-text::-webkit-scrollbar-thumb {
    background-color: rgba(138, 43, 226, 0.4);
    border-radius: 4px;
}

/* Box principale */
.scheda-box {
    width: 450px;
    margin: auto;
}
.scheda-inner {
    width: 310px;
    margin: 10px auto;
    padding-top: 20px;
}

/* Immagini rettangolari */
.top-img {
    width: 310px;
    height: auto;
    opacity: 0.85;
    border: 2px dotted #bae3be; /* verde pastello chiaro */
    border-radius: 0;
    background: rgba(255,255,255,0.05);
    margin-bottom: 25px;
}

.bottom-img1 {
    width: 120px;
    height: 120px;
    border: 1.5px dotted #ecb86fff; /* arancione pastello */
    opacity: 0.85;
    border-radius: 0;
    background: rgba(255,255,255,0.05);
    margin-right: 10px;
}

.bottom-img2 {
    width: 120px;
    height: 120px;
    border: 1.5px dotted #90c5e6ff; /* azzurro pastello */
    opacity: 0.85;
    border-radius: 0;
    margin-left: 50px;
    background: rgba(255,255,255,0.05);
}

/* Colori pastello per parole chiave */
.pastel-green { color: #bae3be; }
.pastel-pink { color: #e5b8bfff; }
.pastel-blue { color: #90c5e6ff; }
.pastel-orange { color: #ecb86fff; }
</style>

<div id="scheda-wrapper">
    <div class="scheda-box">
        <div class="scheda-inner">

            <img src="https://i.imgur.com/ij6Bdmr.png" class="top-img">

            <!-- Titolo con cuori pulsanti e trattino bianco -->
            <tit>
                <span class="tit-heart">❤</span>
                <span style="color:#e5b8bfff;">r</span>
                <span style="color:#90c5e6ff;">i</span>
                <span style="color:#e5b8bfff;">v</span>
                <span style="color:#90c5e6ff;">e</span>
                <span style="color:#e5b8bfff;">r</span>
                <span style="color:#ffffff;"> - </span>
                <span style="color:#90c5e6ff;">o</span>
                <span style="color:#e5b8bfff;">'</span>
                <span style="color:#90c5e6ff;">m</span>
                <span style="color:#e5b8bfff;">o</span>
                <span style="color:#90c5e6ff;">o</span>
                <span style="color:#e5b8bfff;">r</span>
                <span style="color:#90c5e6ff;">e</span>
                <span class="tit-heart">❤</span>
            </tit>

            <!-- Testo scrollabile -->
            <p class="scheda-text">
<span class="pastel-green">River</span> nasce in un paesino piccolo (con più anime nella vecchia necropoli che nelle case) vicino al monumento di <span class="pastel-pink">Newgrange</span>. I vecchi del posto dicevano che quel luogo fosse <i>custodito</i> e <i>protetto</i> dai <span class="pastel-orange">Druidi</span>, che fosse <i>magico</i>. Da piccolə parlava con i fiori, regalava disegni ai cespugli, abbracciava gli alberi… I suoi genitori non hanno mai saputo cosa farsene, di quell’<span class="pastel-green">esserinə così insolitə</span>, che man mano che cresceva sviluppava anche la consapevolezza di essere una persona <i>diversa</i> da quella che tutti gli altri credevano e volevano che fosse.<br><br>

Dopo il liceo, si trasferisce a <span class="pastel-pink">Dublino</span>, dove frequenta e si laurea all’<b>Istituto d’Arte di Dun Laoghaire</b>. Vivere per la prima volta la sua vita nel corpo che <u>finalmente</u> sentiva come suo l'ha portatə a ricevere attenzioni molto poco volute. Forse saranno state <b>le botte</b>, forse sarà stata <b>la paura</b>, o forse sarà stato che <i><b>per l'ennesima volta</i></b> qualcuno lə ha voluto dire chi doveva o non doveva essere, nel modo più terribile che si possa immaginare... Quella volta, però, la <span class="pastel-orange">Scintilla</span> si risveglia. La <span class="pastel-orange">Grande Madre</span> lə <b>protegge</b>.<br><br>

Le storie su <span class="pastel-pink">Newgrange</span>? <i>Tutte vere</i>.<br>
La sua famiglia? Molti di loro <i>erano Druidi</i>, come <span class="pastel-orange">Fergus O’Moore</span>, suo zio.<br><br>

Dopo la laurea, River viene presə in custodia dallo zio e consacratə al <span class="pastel-orange">Circolo di Newgrange</span>, quindi si trasferisce in <span class="pastel-pink">California</span>, a Beacon Hills, dove Fergus risiede stabilmente da molti anni.<br><br>

Fergus si ritiene uno <i>spettatore del fato</i>, un <i>osservatore della natura</i>. Sostiene che l'uomo non deve e non può intervenire, se la <span class="pastel-orange">Madre</span> decide di reinventare i suoi equilibri, a meno che non sia strettamente necessario. Lui osserva gli eventi e coloro che sono coinvolti in essi. Forse è <span class="pastel-blue"><b>il Nemeton</b></span> che lo chiama a sé, forse è il fatto che non si fida appieno degli americani e preferisce presenziare in un luogo così potente…<br><br>

Adesso, River si trova qui, a <span class="pastel-pink">Beacon Hills</span>, dove sta imparando a sviluppare poteri che non sapeva di possedere e provando ad integrarsi in un luogo così profondamente diverso da quello in cui è cresciutə.<br><br>

<span class="pastel-orange">✦ <b>oddities and curiosities</b> ✦</span><br><br>

• detesta i <b>conflitti</b> e le <b>discussioni</b>, ma <span class="pastel-pink">sa portare rancore</span><br>
• è <span class="pastel-orange">curiosə</span>, mai competitivə<br>
• è sfacciatə, provocatoriə, maliziosə e <span class="pastel-green">privə di pudore</span><br>
• ritiene obsoleta la distinzione tra i <span class="pastel-blue">generi maschile e femminile</span> ed indossa abiti <i>di qualunque tipo</i><br>
• risponde indistintamente a <span class="pastel-pink"><u>qualunque</u> pronome</span><br>
• ha un <span class="pastel-orange">aspetto androgino</span>, un range vocale esteso e <i>si diverte molto</i> quando la gente è confusa<br>
• porta i calzini <span class="pastel-green"><u>solo</u></span> quando indossa le scarpe<br>
• non indossa <s>praticamente</s> mai la <span class="pastel-blue">biancheria intima</span><br>
• ha sempre un <span class="pastel-pink">elastico nero</span> al polso<br>
• ha un <span class="pastel-orange">piercing</span> al naso e diversi alle orecchie e due <span class="pastel-green">tatuaggi</span> - rami pieni di foglie - sulle anche, a formare una V<br>
• non rifiuta le relazioni, ma <span class="pastel-blue">non è monogamə</span>
            </p>

            <br>

            <!-- Immagini inferiori -->
            <img src="https://i.imgur.com/7Ac1EYx.png" class="bottom-img1">
            <img src="https://i.imgur.com/witu2JN.png" class="bottom-img2">

        </div>
    </div>
</div>

AFFETTI

<br>
<div style="max-width:520px;margin:auto;text-align:center;">

<style>

body{
background:#111;
margin:0;
padding:0;
font-family:Georgia, serif;
}

/* container */
.sea-card{
color:#b0c4de;
}

/* titolo */
tit{
font-family:Georgia, serif;
font-size:20px;
letter-spacing:2px;
display:block;
margin-bottom:5px;
color:#ffffff;
}

/* sottotitolo */
sub{
font-family:Georgia, serif;
font-size:12px;
color:#bae3be;
opacity: 0.2;
margin-bottom:20px;
display:block;
}

/* immagini */
.sea-images{
max-width:333px; /* stessa larghezza del box testo */
margin:auto;
margin-top:15px;
display:flex;
justify-content:space-between; /* bordi esterni allineati */
}

.sea-images img{
width:160px; /* larghezza fissa identica */
height:120px; /* altezza fissa identica */
object-fit:cover;
opacity:0.9;
border-radius:0;
}

/* bordi */
.img1{border:1px dotted #e5b8bfff;}
.img2{border:1px dotted #90c5e6ff;}

/* box testo */
.sea-bio{
max-width:333px;
margin:auto;
padding:10px;
text-align:justify;
font-size:12px;
line-height:1.4em;
background:rgba(255,255,255,0.02);
}

/* colori */
.pastel-green{color:#bae3be;}
.pastel-pink{color:#e5b8bfff;}
.pastel-blue{color:#90c5e6ff;}
.pastel-orange{color:#ecb86fff;}

</style>

<div class="sea-card">

<!-- titolo -->
<tit>
<span class="pastel-blue">chose</span>
<span class="pastel-pink">people</span>
<span class="pastel-blue">who</span>
<span class="pastel-pink">chose</span>
<span class="pastel-blue">you</span>
</tit>

<sub><i>I broke my rules for you</i></sub>

<!-- box testo -->
<div class="sea-bio">

» <span class="pastel-orange"><b>Kiss me</b></span> on the mouth and <span class="pastel-blue"><i>set me free</i></span>, <span class="pastel-green"><b>sing me</b></span> like a choir
I can be <span class="pastel-green"><b>the subject</b></span> of your dreams, your <span class="pastel-blue"><i>sickening desire</i></span>, so <span class="pastel-orange"><b>Kiss me</b></span> on the mouth and <span class="pastel-blue"><i>set me free</i></span> but <u>please</u>, <span class="pastel-pink"><i>don't bite</i></span> «

<br><br>

<center>milford <span class="pastel-orange">|</span> adam<br>
nicholas <span class="pastel-pink">|</span> maximilian<br><br></center>

» Went <span class="pastel-orange"><i>face to face</i></span> with <u>all</u> our <span class="pastel-pink"><b>fears</b></span> learned <span class="pastel-green"><u>our</u> <u>lessons</u></span> through the <i>tears</i> made <span class="pastel-orange"><i>memories</i></span> <span class="pastel-blue">we knew</span> would <span class="pastel-pink"><u>never</u></span> fade «<br><br>


<center>zeke <span class="pastel-blue">|</span> ewan <span class="pastel-blue">|</span> teresa <span class="pastel-blue">|</span> jacob</center>

</div>

<!-- gif con bordi esterni allineati e spazio centrale centrato -->
<div class="sea-images">

<img src="https://i.imgur.com/fxEslCS.png"
class="img1">

<img src="https://i.pinimg.com/originals/42/d9/7f/42d97f709eecaef105b9dbbe1c7fc868.gif"
class="img2">

</div>

</div>
</div>
<br>