Character Portrait

<div class=”container-fluid” style=”background:url(https://images.unsplash.com/photo-1630695230041-8909e3204778?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat center;top:0;left:0;bottom:0;background-size:cover;width:100%;position:absolute;z-index:-1;overflow:hidden;”></div>
<div class=”container mx-auto p-2 row”>

<!– SIMPLE GRAVE —->
<div class=”card mx-auto text-center mb-5″ style=”border-radius:50px 50px 0px 0px;border:1px solid #101010;background: linear-gradient(180deg, rgba(149,149,149,1) 0%, rgba(77,78,78,1) 49%, rgba(16,18,17,1) 100%);width:250px;height:320px;box-shadow:0px 1px 4px #000;font-family:ms-gothic;color:#fff;border-bottom:2px solid #000;”>
<div class=”card-title mx-auto pt-4″ style=”letter-spacing:2px;text-shadow:0px 0px 3px #000;border-bottom:1px solid #b1b1b1;width:70%;”>
<h2><i class=”fa-light fa-moon”></i><br>HERE LIES</h2></div>
<div class=”card-body”>
<a href=”URL” class=”mx-auto font-italic” style=”letter-spacing:1px;text-shadow:0px 0px 3px #000;color:#fff;text-decoration:none;cursor:help;”><h2>Beloved Character</h2></a>
<h6 class=”font-italic” style=”color:#cccccc;text-shadow:0px 0px 1px #000;”>1144-1169
<br> Gone Too Soon</h6>
<p class=”mx-auto my-4 p-1″ style=”color:#cccccc;text-shadow:0px 0px 1px #000;border:2px inset #464646;width:80%;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!— additional thing if u want to add something under the grave. can be deleted too if not needed —>
<div class=”card-footer p-1 font-italic” style=”background:rgba(0,0,0,0.4);border:1px solid #101010;”>
<h4>UP FOR ADOPTION</h4>
</div>
</div>
<!— GRAVE END —>

<!– SIMPLE GRAVE —->
<div class=”card mx-auto text-center mb-5″ style=”border-radius:50px 50px 0px 0px;border:1px solid #101010;background: linear-gradient(180deg, rgba(149,149,149,1) 0%, rgba(77,78,78,1) 49%, rgba(16,18,17,1) 100%);width:250px;height:320px;box-shadow:0px 1px 4px #000;font-family:ms-gothic;color:#fff;border-bottom:2px solid #000;”>
<div class=”card-title mx-auto pt-4″ style=”letter-spacing:2px;text-shadow:0px 0px 3px #000;border-bottom:1px solid #b1b1b1;width:70%;”>
<h2><i class=”fa-light fa-moon”></i><br>HERE LIES</h2></div>
<div class=”card-body”>
<a href=”URL” class=”mx-auto font-italic” style=”letter-spacing:1px;text-shadow:0px 0px 3px #000;color:#fff;text-decoration:none;cursor:help;”><h2>Beloved Character</h2></a>
<h6 class=”font-italic” style=”color:#cccccc;text-shadow:0px 0px 1px #000;”>45-1482
<br> Gone Too… Soon?</h6>
<p class=”mx-auto my-4 p-1″ style=”color:#cccccc;text-shadow:0px 0px 1px #000;border:2px inset #464646;width:80%;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!— GRAVE END —>

<!– SIMPLE GRAVE —->
<div class=”card mx-auto text-center mb-5″ style=”border-radius:50px 50px 0px 0px;border:1px solid #101010;background: linear-gradient(180deg, rgba(149,149,149,1) 0%, rgba(77,78,78,1) 49%, rgba(16,18,17,1) 100%);width:250px;height:320px;box-shadow:0px 1px 4px #000;font-family:ms-gothic;color:#fff;border-bottom:2px solid #000;”>
<div class=”card-title mx-auto pt-4″ style=”letter-spacing:2px;text-shadow:0px 0px 3px #000;border-bottom:1px solid #b1b1b1;width:70%;”>
<h2><i class=”fa-light fa-moon”></i><br>HERE LIES</h2></div>
<div class=”card-body”>
<a href=”URL” class=”mx-auto font-italic” style=”letter-spacing:1px;text-shadow:0px 0px 3px #000;color:#fff;text-decoration:none;cursor:help;”><h2>Beloved Character</h2></a>
<h6 class=”font-italic” style=”color:#cccccc;text-shadow:0px 0px 1px #000;”>1954-
<br> Presumed Dead</h6>
<p class=”mx-auto my-4 p-1″ style=”color:#cccccc;text-shadow:0px 0px 1px #000;border:2px inset #464646;width:80%;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!— additional thing if u want to add something under the grave. can be deleted too if not needed —>
<div class=”card-footer p-1 font-italic” style=”background:rgba(0,0,0,0.4);border:1px solid #101010;”>
<p class=”text-center m-0 pt-1 pb-1 text-uppercase” style=”letter-spacing:1px;”>
<iframe frameborder=”0″ style=”height:1rem;width:1rem;opacity:.001;position:absolute;”
src=”https://www.youtube.com/embed/URL”></iframe>

<i class=”fa-regular fa-play”></i> SONG – ARTIST</p>
</div>
</div>
<!— GRAVE END —>

<!—- just copy + paste one of the graves from start to end if u want more. easy peasy lemon squeezy —>
</div>

 

<div class=”container-fluid” style=”background:black;width:100%;position:absolute;overflow:hidden;z-index:-1;top:0;bottom:0;left:0;”></div>

<h2 class=”m-2 text-left pb-3 p-1″ style=”color:#eeeeee;width:100%;border-bottom:1px solid #fff;font-family:monospace;font-size:1.5rem;”><i class=”fa-light fa-terminal”> directory</i></h2>

<!—- COLLAPSE BUTTON TEXT —–>
<div style=”width:100%;”>
<!—- COLLAPSE BUTTON ONE—–>
<a class=”btn btn-primary” data-toggle=”collapse” href=”#programONE” role=”button” aria-expanded=”false” aria-controls=”programONE” style=”background:transparent;border:none;”>

<p class=”text-left ml-5 font-italic” style=”color:#fff;font-family:monospace;”>
<i class=”fa-light fa-terminal”></i> …program alpha <i class=”fa-light fa-chevron-down”></i></p></a>
</div>

<!— COLLAPSED FOLDERS ONE—->

<div class=”collapse” id=”programONE”>
<div class=”d-flex flex-wrap justify-content-center p-1″>
<!—– FOLDER ONE —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>

<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER ONE</i></p>

<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>this is a folder code based on the lovers code bc who doesn’t love this faux terminal shit?</p>

<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”https://electronicartist.net/virocene/the-lovers/index.html” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>

<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>

<!—– FOLDER TWO —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>

<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER TWO</i></p>

<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>

<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>

<!—– FOLDER THREE —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>

<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER THREE</i></p>

<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>

<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>

<!—– FOLDER FOUR —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>

<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER FOUR</i></p>

<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>hey there delilah</p>

<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>

<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>

<!—– FOLDER FIVE —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>

<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER FIVE</i></p>

<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>

<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>

<!— FOLDER END, you can add more if you want! just copypaste the folder code above this

or create a new collapse group by copying EVERYTHING from the collapse button text to down here + the two divs BELOW like i’ve done —>
</div>
</div>

<!—- COLLAPSE BUTTON TEXT —–>
<div style=”width:100%;”>
<!—- COLLAPSE BUTTON ONE—–>
<a class=”btn btn-primary” data-toggle=”collapse” href=”#programTWO” role=”button” aria-expanded=”false” aria-controls=”programTWO” style=”background:transparent;border:none;”>

<p class=”text-left ml-5 font-italic” style=”color:#fff;font-family:monospace;”>
<i class=”fa-light fa-terminal”></i> …program theta <i class=”fa-light fa-chevron-down”></i></p></a>
</div>

<!— COLLAPSED FOLDERS ONE—->

<div class=”collapse” id=”programTWO”>
<div class=”d-flex flex-wrap justify-content-center p-1″>
<!—– FOLDER ONE —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>

<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER ONE</i></p>

<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>

<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>

<!—– FOLDER TWO —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>

<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER TWO</i></p>

<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>

<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>

<!—– FOLDER THREE —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>

<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER THREE</i></p>

<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>

<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>

<!— FOLDER END, you can add more if you want! just copypaste the folder code above this

or create a new collapse group by copying EVERYTHING from the collapse button text to down here + the two divs BELOW like i’ve done. remember to change collapse id names! —>
</div></div>

<div class=”container-fluid mx-auto”>
<div class=”container mx-auto rounded” style=”background:#111215;color:#e5e5e5;border:1px solid #4dc52d;width:50%;”>

<h1 class=”text-center mt-2 p-2 text-uppercase” style=”font-family:ms-gothic;text-shadow:0px 0px 20px #54ff26;”><i class=”fa-light fa-terminal”></i>username</h1>

<div class=”justify-content-center mb-2″><img src=”https://64.media.tumblr.com/2fb46cf203f524b74d01de68144cc31f/6f7b7cefcb9309c2-70/s1280x1920/7250a10c598f1f4bdfe988df25b14c068368a5e1.gifv”></img></div>

<div class=”row pl-4 mx-auto” style=”font-family:ms gothic;”>
<div class=”col-sm text-left”>
<p><i class=”fa-solid fa-circle-user”></i> name/alias</p>
<p><i class=”fa-solid fa-comments”></i> pro/nouns</p>
<p><i class=”fa-solid fa-transgender”></i> gender</p>
</div>
<div class=”col-sm text-right”>
<img src=”https://64.media.tumblr.com/1d6c952df7e4a23b6d769acbb9876365/57fa34b945511a34-e0/s1280x1920/4108d96b043680bbdf99aa4dd2dc1faf13c9a6d9.gifv” style=”max-height:6rem;max-width:6rem;” title=”from animatedglittergraphics-n-more.tumblr.com”></img>
</div>
</div>
<hr>
<!—- just social usernames or links to em, you can delete what u dont want or replace em. just put it in ‘<a href=”URL”> ICON TEXT </a>|’ or something —>

<div class=”text-center mx-auto mb-5″ style=”font-family:ms gothic;”>
<p><i class=”fa-brands fa-instagram”></i></i> insta | <i class=”fa-brands fa-twitter”></i> twitter | <i class=”fa-brands fa-discord”></i> discord | <i class=”fab fa-tumblr”></i> tumblr | <i class=”fa-solid fa-mug-hot”></i> ko-fi </p>
</div>

</div>

<div class=”container mx-auto rounded” style=”background:#111215;color:#e5e5e5;border:1px solid #4dc52d;width:40%;height:15%;margin-top:-2rem;font-family:ms-gothic;”>

<h3 class=”text-center mt-2 pt-2 text-uppercase” style=”font-family:ms-gothic;text-shadow:0px 0px 20px #54ff26;”><i class=”fa-light fa-terminal”></i>is that all, stranger?</h3><p class=”text-center” style=”letter-spacing:2px;”>take a look at these wares</p>

<div class=”justify-content-center m-2″><img src=”https://64.media.tumblr.com/a7fd50d8ccdcabd176b46a34a7bb1d17/22b1e94db46de357-ba/s1280x1920/2c508fbd4afa205aa2850d24b07f3e815d922f93.gifv”></img></div>

<!— small images —>

<div class=”row mx-auto”>
<div class=”col-sm”>
<a href=”URL”>
<img src=”https://f2.toyhou.se/file/f2-toyhou-se/images/24906065_ov5dYSB97qxiSmI.jpg?1595889620″ style=”border:1px solid #54ff26;width:5rem;height:5rem;”></img></a>
</div>
<div class=”col-sm”>
<a href=”URL”>
<img src=”https://f2.toyhou.se/file/f2-toyhou-se/images/24906065_ov5dYSB97qxiSmI.jpg?1595889620″ style=”border:1px solid #54ff26;width:5rem;height:5rem;”></img></a>
</div>
<div class=”col-sm”>
<a href=”URL”>
<img src=”https://f2.toyhou.se/file/f2-toyhou-se/images/24906065_ov5dYSB97qxiSmI.jpg?1595889620″ style=”border:1px solid #54ff26;width:5rem;height:5rem;”></img></a>
</div>
<div class=”col-sm”>
<a href=”URL”>
<img src=”https://f2.toyhou.se/file/f2-toyhou-se/images/24906065_ov5dYSB97qxiSmI.jpg?1595889620″ style=”border:1px solid #54ff26;width:5rem;height:5rem;”></img></a>
</div>
</div>
<!—- you can link somewhere like ch gallery/world/wherever —>
<a href=”#” class=”justify-content-center m-3″><img src=”https://64.media.tumblr.com/ef6b98ad3872ab2580ae3c649b41f028/6f7b7cefcb9309c2-65/s1280x1920/5eb3f7ebced941ab36945e4c4e66cbdc93039c46.gifv”></img></a>
</div>

<div class=”container-fluid” style=”background:black;width:100%;position:absolute;overflow:hidden;z-index:-1;top:0;bottom:0;left:0;”></div>

<div class=”d-flex p-1 ml-4″ style=”color:red;font-family:monospace;width:30%;”>
<h2><i class=”fa-light fa-terminal”></i>the_lovers</h2>
</div>

<div class=”container mx-auto p-1″ style=”border:2px solid red;color:red;font-family:ms gothic;width:65%;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:2px solid red;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:2px solid red;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:2px solid red;opacity:0.8;padding:2px 4px;”></i></p>

<!—
this here is just intro text. you can change this to whatever you want
—>
<p class=”p-1 text-center” style=”font-size:larger;”>Two networked machines, one infected with a virus, slowly infects the other through the interface of classic romantic poetry.</p>

<p class=”p-1 ml-2″ style=”border-left:.66rem solid red;”>A breakdown in the relationship was inevitable once the virus had seeped into the memory of one machine and then into the other through a singular network cable affecting the poetic text files. Communication between the two deteriorated, leading to irrational & at times odd behaviour. Each machine reacted with equal confusion and conflict. The interface text became an illegible poetic mutation of itself.</p>

<!—
here’s a link. you can change this to whatever you want or delete it if you want
—>
<span class=”p-1 justify-content-center mb-1″>
<a href=”https://electronicartist.net/virocene/the-lovers/index.html” style=”color:red;text-decoration:none;font-family:monospace;text-align:center;text-shadow:red 0px 0 2px;letter-spacing:2px;text-transform:uppercase;” title=”creator of the Lovers art piece”>
<i class=”fa-regular fa-chevron-up”></i> shall I compare thee to a summer’s day? <i class=”fa-regular fa-chevron-down”></i></a></span>

</div>

<!—
music player, i used the f2u snippet by westernwolves as base!
—>
<div class=”row”>
<div class=”col-3 p-1 m-3″ style=”border:2px solid red;color:red;font-family:ms gothic;background:black;width:25%;position:relative;left:2rem;overflow:hidden;height:8rem;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:2px solid red;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:2px solid red;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:2px solid red;opacity:0.8;padding:2px 4px;”></i></p>
<!——————————–
replace the string after embed/ with the letters and numbers string of your desired youtube video after “watch?v=”
———————————>
<p class=”text-center m-0 pt-1 pb-1″ style=”border:1px solid red;”><i class=”fa-light fa-backward”></i>
<iframe frameborder=”0″ style=”height:1rem;width:1rem;opacity:.001;position:absolute;”
src=”https://www.youtube.com/embed/Ooqqj6q1MeU”></iframe>

<i class=”fa-regular fa-play”></i> <i class=”fa-light fa-forward”></i> <br>otis redding – i’ve got dreams to remember</p>
</div>

<!—
moodboard/small image cluster thingy. you can use these as links too for your own stuff like characters/sites/friends etc
—>

<div class=”col-8 justify-content-end”>
<div class=”p-1 m-3″ style=”border:2px solid red;color:red;font-family:ms gothic;background:black;width:60%;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:2px solid red;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:2px solid red;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:2px solid red;opacity:0.8;padding:2px 4px;”></i></p>

<div class=”flex-row justify-content-around p-1″>
<a href=”https://unsplash.com/photos/pPA5ActWLLI” style=”background:url(https://images.unsplash.com/photo-1508778552286-12d4c6007799?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80);background-size:cover;border:1px solid red;width:100px;height:100px;” title=”ERROR”></a>

<a href=”https://unsplash.com/photos/TkqlTjmuqfw” style=”background:url(https://images.unsplash.com/photo-1577239458058-b179bc7479bf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80);background-size:cover;border:1px solid red;width:100px;height:100px;” title=”ERROR”></a>

<a href=”https://unsplash.com/photos/2S2F2exmbhw” style=”background:url(https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80);background-size:cover;border:1px solid red;width:100px;height:100px;” title=”ERROR”></a>

<a href=”https://unsplash.com/photos/PihQUt6Xs8I” style=”background:url(https://images.unsplash.com/photo-1616548321600-2a8ff15f2114?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80);background-size:cover;border:1px solid red;width:100px;height:100px;” title=”ERROR”></a>
</div>
<p class=”justify-content-around p-1 font-italic” style=”letter-spacing:3px;”>AN EXCEPTION HAS OCCURRED</p>
</div>
</div>
</div>