matt's profile picture

Published by

published
updated

Category: Blogging

slay

slaying right now

also this is the code i use on my about page btw in case you wanted my layout (it updates all the time, so this probably isn't up to date lol):
<!-- (c) Music Player Layout created by Twilight Sparkle (https://layouts.spacehey.com/layout?id=152) -->

<style>
    #music {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 80px;
        transition: 0.5s width;
    }

    #music:hover {
        width: 360px;
    }
</style>

<!-- Replace these two URLs with .ogg and .mp3 versions of the song/radio station you want to play. If you don't have one or the other, you can just remove it. -->

<!-- HUGE SHOUTOUT TO THE ORIGINAL CREATOR OF THE REMAKE: https://soundcloud.com/kyllian1212/god-rays-remake -->

<audio controls="controls" id="music" loop="loop">
    <source src="https://i.mmatt.link/E6nD5.mp3" type="audio/mp3">
    <source src="https://i.mmatt.link/N4hw2.ogg" type="audio/mp3">
</audio>

<!-- (c) Layout originally created by Bela (https://layouts.spacehey.com/layout?id=349), but then remixed into a virtual self theme by /mmatt -->

<style>
/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com , https://custom-cursor.com , https://www.cursors-4u.com
============⚠️==========*/

/* cursors */

a:hover {
    cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur668.cur'), auto;
}

* {
    cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur671.cur'), auto;
}

</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');
</style>
<style>
:root {
    --headers: #b8d8ff;
    --text: white;
    --names: white;
    --links: #8ab9ff;
    --hover: rgba(122, 175, 255, 0.603);
    --borders: 1px solid #3a73b9 !important;
    --font-family: "Times New Roman" !important;
    --font-style: italic !important;
    --curve: 0px;
    --background-image: url("https://edmidentity.com/wp-content/uploads/2017/10/VIRTUAL-SELF-QUESTIONS-1024x547.png");
}

main .left {
    padding-right: 20px;
}

.url-info {display: none !important;} /* to hide the url */
.blurbs .heading{display: none !important;} /* to hide the blurbs heading */

h3, h4, h5, .url-info b {color: var(--headers) !important;} /* headings*/
/*a {color: var(--links) !important;} /* color of links */
/*a:hover {color: var(--hover) !important;} /* color of links on hover */
p, h2 {color: var(--text) !important;} /* color of text */
h1, .friends a p {color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p {color: var(--hover) !important;} /* color of names on hover */
nav label {color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important; text-align: center;} /* aboutme & want2meet headings */
.comment-reply:not(:first-child) {border-top: 3px double #3a73b9;} /* line in between comment replies*/
.count {color: #b8d8ff;}

/*
                   ```.``.....-:-::.-:-----...------..:-` ```  ``.````````````````.....---::::////+++++++++++++++////:::----....`````
                ````.`.....--.-::-:/:://-:::.-+/-:-:..:..``.````...````..`..........---:::///++++ooooossssssssooooo+++///:::---....````
               `````..--...--../////:::o////+-/-/----:.:.`.-...`.....`.-.........----::///+++ooosssso++/++/+syyyssssooo++///::---...`````
              ``````.-----.:/:-///+o/:oshs-.-oso:-/...-...-:--.`.-.`.-.--.---.--:-:::///++oosssyyyo:--:::::::+shhyyyyssoo++///::--...`````
              ```....-:::::-:::o+/++shy+.``````-+s+-`-::-:`./-:-:-.-----:-:----:::///+++oossyyyhh+::-::/hh/:://+hhhhyyyssoo++//::---..`````
             ````....-://:/-//:::/+hmy  ``..-...``-+:::::::--:/:--..---///::::////++oooossyyyhhhs::-:+omNNms////odddhhhyyssoo++//::--...````
          ` ````...`.-::-....-..-/ymNy  ````:-.` `:d:::-:.-/--:::---.--://///+++++ooosssyyyhhhdd+::+dmNNNNNmddmdomddddhhhyysso++//::--...````
        ``` `.`.`--``-::---..--..+mmNo  `.--oo/:-`:m//++++:-/::////-:::::/+++oooo+oossyyhhhhhddd/:/hNNNNNNNNNNNNydmmddddhhyysso++//::--...```
       ` `````....-..--.-:-...-:`hdmN+ .hmmmmNmmd-+m/.//:/+/-/://+::::::://++ossssssyyyhhhhddddh/:/mdyymNNmhydNm+dmmmddddhhyysso++//:---..`````
     ```````.``..---...--:----.-:dhmN+ ./::odm+-.`sms---.-:/+:-///++/:::+////+osysyyyhhhhddddddd/:/ommhdNNdhmNmmymmmmddddhhhyysoo++/::--...````
      ````..`..-:.--...-::::-/:..dhdNs .--:hmNy/.`dhy/-/:://///.-/++/:::/+oss+oyyyyyhhhhdddddddd::/.ommhoohmmmddmmmmmdddddhhyysso++//::--..````
       ``.`....-:--.-..--:----:..hhhmh `+dmmhdhh:/moy+--+:/:::-////://sooooossssyyyyhhhddddddddh::/.-h//ss+/ddddddddddddddhhyyysoo+//::--...````
         ```.--.-----..--:-`-:-.-yhhmm` `/yyyyo-`hd:yo/-++o/:+:-++-:+/++sysshyyyyyyhhhhddddddddy::/-`/:+yysoyhdddddddddddhhhyyysoo++/::--...````
        ````..:.-:-:--``..``..```yhydN:   ./+/` om/:hy....+/:+-://:://+ooosyyyhdhhhhhhhddddddddh/::-`-:oyyhyyoyhddddddddhhhhyyysso++//::-...`````
      `   ``..-../.---..``..``-.`+hyhmy    `-. /ms.+dh.-``.///:-++/+/++ssoysyysyhhhhdhhddhhhdhhho:/-`://+oso//+ohyhhhhhhhhhhyyysoo++//::--..`````
  `  `````.``...-::-..`.``.-.`-```+yydm:      /dy`.sh- -.```+-.://++++yyssyyhhyyyhhdddhhhhhyysso/:/-`:+oso/:/++///+osyhhhhyyyyssoo++//::--...````
   ``````````.--.::.`...--:-``-.:oo/ohdh`    -hy.`+s:.``-...--.:--/osssssyyyyddhhhddddhdhso+//////::.-+o+:///:--:///++osyyyyysssoo++//::--...````
``````` ````....--`.-``:-.``./y+oso+:yhd:  `/ho.`+/:oyy+---..:--::+sshhhydhhhddhdddddddhoooo+/::-::-://+////:://///+++++osyysssooo++//::--...````
 ``````````.-.``-`..:::-.``-smhy:/+o/syyh-`+o-`-o-:+hmmNd:-..-..-::+osshhhddddmmmdhddddysso+o+/+::/-.-/++++/+++++++++/+/oo+ssssoo+++//::--...`````
  `````````.`  `--.`-//-/..soyyss-://+hssy+-`.+o::-yshmNNm/..-:--:::+++/oyhhsshmdmddddyyyoso+//++-/+/::://o++oo++++/+++:++:+ooooo++///::--....````
   ``.``````````..`-.-:/.`-dh:/-d+.:::yo++o:+ho-/-s+/hhdmmd.--./:.-:///+++shyssyyhhhhyysys+oo///o/::+ooooo++ooo++++/+++-//+//+oo+++//:::--....`````
    `.````````.`.``-:--:` ydhh- sd+.--os+++ohs://:m.+y+ymdm/....:---/o+/+ossyysyssyyyyyyyy+o++//oo::/+ooo+++ooo++++/+o/./+///:++++///:::---...``````
   ` ``....`..`..``-:`.-.-dddyh:-mh----dmmmdy:/+/+m.d.:dhhdy```.-:----:/oooyyyshyyyyo+oo+os/+////s+://++++++ooo++++/+o::+++/:/++++///:::---...```````
   `  ```..`...`.`.`-:``.+hhddhm/ymo.:.-mmhs++oo+ym/o`yhssmd-`.....---::///+syyysyhysooo+++o/+//:oo///++++++ooo++++/+o::/+/:/+/++///::::---....``````
    ``  ````````...`.-..:/dohmmmm+Nh--- omhyysssohd+.oh+ohdso`.`.-::::/::///+oyysssyysso+//+//+/:/s////+++++ooo+++++++::/:///+//////::::----...```````
   ````````..````.``.-`.:/hy+oo+ysymo--``ddhyyysodd.:h/+smosd-...-::::////+/+++ssysso++o+////-+//:o+/+++++++ooo+++++++:::/--+/://///::::----....``````
` `` `````-..```..``.-.:-:hshhho.+/mh/.  /dhssyssmh`s//hdooom:-/.-:://::+///++++o+ooo+//:////-/+/:+o++++++++ooo+++++++-:/.-+/////////::::----....`````
   ```.` .`...-`.`-`..-`::ddhhmmo``hmh-  `hhssysymy`-smh+ooom:-+:::-::/ooo//+++++++ooo+/:.-::.:::-/o++++++++o++++++++/---.+++////////::::----.....````
``````````..:.. `.-- ..:`.hmNmhyhh:+hds.  +hssyshd+`/dh//oodm..::-:---:+ooo+++++/+o+oso+--.-..---.-++++++++oo++++++++/-..:::://::///:::::----.....````
 ``````....-:--....-`.-.``+dmNNmmhho:yd+  .hyyyshh- `y:/shddo``.-:----:///+++++++//+ooooo/..`....`.++++++++++++++++++:.`-/++o++/::///:::::-----....```
 ``````-..`.:::.`.`..`...`-dmmNNNNds/`sy:  +yyyshs`:ohmmmdhy-``.-------::/o++++++o++oooooo/``.`````:+++++++++++++++//-.-+ooooo+//://::::::-----.....``

                            a  n  g  e  l    a  n  g  e  l    a  n  g  e  l    a  n  g  e  l    a  n  g  e  l    a  n  g  e  l

 ``..``-.``.--.````. `````.sdmmNNNds- `os` .shysy.-/sdddddhy` ...--..-----:+//+//+++ooooooo-```````-:+++o++++++++//:-./oooooo+///:///::::::-----.....`
`  ```.````..-:.`--.` ```` :hhddhhddho.`+:  .+oo/:++++shddy+````.----.---:::::+///:/+oooooo/``` ```.-:/++o++++++/::-.//+oo++//////////::::::-----.....
    ``````.`..:..-:-`   `  :ydmdhhdNNy-..:   `.+yhhhhddhsso-````.-.::----::::://////++o+++/:` ``````.-::/+++++//:-..--/::/+o+++/://///:::::::-----....
    `````.```.---`.-`  `  --.s+::ohdhs//-`    -ymyhs/::::+o`````.`..:::--::::::////+/:-+o++/-```````..---:////::-.-://++oo+++//:///////:::::::-----...
     ``````.`-..``.`     `/ ./+:+hs++shs:   `-/:: ./s:..-:/.````````../:::::::::/:/:..-++///:-.``````.....-/::--..-::/oo:-:///://///////:::::::-----..
     `````.````````      /`:.-++y::+/sdNmy. -:/:--:`./-+oo.`-```````..::/:::::/:::/---//::/+/-:..--.````...:-....`.:::::+/-.-://////////:::::::------.
         ``` `` ```     :-:osy+:.-+`odhso++.:o+ss//+`-``-..:..```.```.----:::::::::---+//////:-...--.`....-.````.-/ooo+/--/-.:///////////:::::::------
         `   `         `+:hdho:-:.` +/ohmNNy:hhsy/.````.-`-.-.` ``-...-::---:::-::::..-.-:/oooso+:----```````./ydmmmdyo+:..:::://////////::::::::-----
           `           /./ddyyyho:-`:dmddyyy+:yy+.:+oosss+ .--` ``.--------:/:/:-::::-.`./hmNNmNdmo/---`` `-ohhNmNNNMNy:---:::///////////:::::::::---.
               `      .+-:hddyo+yyy+-s/y/h/h//.::ydddhyyso. ..`````..---..--::::---:----.-ymhdhddhm/+::-..-+mhdhdhymy+---:::::://///////:::::::::--.`
         ``````   `   +/++o+-.sdmNmmhs:::-:```.+dmmmdhys++.  .` ``````.`.-:-:-:::--------::/yshhdym/::///::yhdhdyhy+////::::::::::::::::::::::::-.`
         ` ``.` `    .ysso- `ohdmNNNNdo+-`   :sdmmmmdyso//-   .`  ``````...-----::------::///+/o/s//+oooo++/y+yoysssoo+//:::::::::::::::::::::-.`
         ```   ``` ` -yys-  :sydmNNNNmddmh+-/ymmmmmddho+::/    .    `.`.`..-------------://+ooosoooossssssssssssssssoo+//:::::::::::::::::::-`
              ```    .-:`  `+sydmmNNNNmmmmddddmmmmmdddho/---   `.    ```.`..-......------:/++oossssssssssssssssssssso++/:-:::::::::::::::-.`
             .             .oydmmmmmmmmmmmmdhddmmddho//++:-:    ``    `   `...........-...:/++ooooooosssssssssssssso++:.-::::::::::::-.``
                     `.`  `/yo:oddddddddmmmmmmdddhyo/.  `-::-`   `           ```.......`.-://++++++oooooooooooooooo+++/:`-----:---..`
       ` ``` ``       `-..+o-`://osyyyyyyyyyyyysso++/:`    .::-.``   ````         ``....`.-::////////+++++++++++++++//::-----..``
`` ```````````` ``````-://-`..``---::/:::-----....:/++:`     `-//-`.:+o++/::-..```````..-------:::::::///+::::::::::::-....````````````
 ``````.....------.``::-` ``    `   ..`````         `-/+/-``````-::+ossssooo+++ooosssosso.-..........-------------------hhhyyyyyssssssoooo++++/////:::
 `` ``````````..````` ```.`...`.```:-.:-:+:-..:+:``    `.-:///::::://+ooo+++///+/////////....`..```....................-+++++++++++++++++++++++++++++/
       ````.....-......-.-:://+//:/++++++++oooyyhys---..```````...-://:+/+o+//::::::::--..`` ```````.......```````````.----:::::://///////////////::::
         ``````````.......----------..-:/-:://////+o++ossoo++++/oooooooooooooo+o++/////:::--...````.................-::/+++++oooooooo+++++++++////////
              ```  `````````````````......-------:////+++oo+://+++++o++/o+oo++oooooo+oooooooossssssssyyyyyyyyyyyyyyyyyyyyyyyssssssoooooo+++++++///////
 */

/* text decoration */
a, button, .links, .top, .logout-btn {
  background:
     linear-gradient(
       to bottom, var(--hover) 0%,
       var(--hover) 100%
     );
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 4px 4px;
  color: var(--links);
  text-decoration: none;
  transition: background-size .2s;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active, .logout-btn:active, .logout-btn:hover, nav .top a:hover, nav .links a:hover{
  background-size: 4px 50px;
  text-decoration: none;
  color: white
}

/* a:hover,  {
    text-decoration: underline;
} */

/* font family */

li, h2, h3, h4, h5, a, p, nav label, .section {
    font-family: var(--font-family) !important;
    font-style: var(--font-style) !important;
    font-size: 12px!important;
}

/* padding and margin */

.icon {
    border: none !important;
}

.blurbs {
    margin-top: 10px !important;
    margin-bottom: 30px !important
}

.friends {
    margin-top: -10px !important;
    margin-bottom: 30px !important
}

.profile-info {
    border-radius: var(--curve) !important;
}

.comment-replies {
    border: 5px dotted #3a73b9;
}

.comments-table {
    border-radius: var(--curve) !important;
    border: none !important;
}

.table-section {
    padding-bottom: 7px !important;
    margin-top: 30px!important
}

#comments {
    margin-top: 5px !important;
    padding-bottom: 5px !important
}

.details p:last-child {
    color: var(--links) !important;
    filter: brightness(95%);
}

.mood {
    margin-top: 20px;
}

/* background image */

body {
    background-image: var(--background-image) !important;
    background-color: #000000 !important;
    background-repeat: no-repeat;
    /* background-position-x: left; */
    /* background-position-y: center; */
    background-attachment: fixed;
    background-size: cover;
}

/* navigation */

/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */

nav {
    background: #333232e8;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #040042b0;
    margin-bottom: 30px;
    border: var(--borders);
}

nav .top {
    background: rgba(0, 0, 0, 0.0);
}

nav .links {
    background: transparent!important;
    text-align: center;
}

nav img.logo {
    filter: brightness(0) saturate(100%) invert(76%) sepia(42%) saturate(432%) hue-rotate(deg) brightness(104%) contrast(105%)!important;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: var(--headers);
}

/*============= color the search bar and button ===================*/

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 2px solid #3a73b9 !important;
    color: #3a73b9 !important;
    border-radius: 0px !important;
}

button {
    border-radius: 0px !important;
    border: 0px solid #3a73b9!important;
    font-family: var(--font-family) !important;
    font-style: var(--font-style) !important;
    background-color: rgba(0, 0, 0, 0.0) !important;
    color: #3a73b9!important;
}

/*============= online icon  ===================*/

.online {
    content: url(https://dl.glitter-graphics.com/pub/272/272679lz7b9hcea1.gif);
}

/*============= profile name ===================*/

h1 {
    padding-left: 20px !important;
    font-family: "Times New Roman" !important;
    font-style: var(--font-style) !important;
    font-size: 25px !important;
    margin-top: -10px!important;
    color: var(--links)!important;
}

/*============= box shadows ===================*/

.mood, .blog-preview, .contact {
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #040042b0;
}

.table-section, .blurbs, .friends {
    margin-bottom: 30px !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #040042b0;
}

.friends {
    margin-top: 10px!important;
}

.profile-info {
    background: #333232e8;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #040042b0;
}

.profile-info .inner {
    font-weight: bold;
    text-align: center;
}

.contact {
    background: #333232e8;
    padding: 20px;
    margin-bottom: 40px!important;
}

main {
    background: transparent;
    padding: 6px 0px;
    color: white
}

.profile-pic img {
    outline: none !important;
    border: none!important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #040042b0;
}

.friends-grid img {
    outline: none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
}

td {
    background-color: transparent!important;
}

hr {
    border-top: 1px solid #3a73b9;
}

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}

.friends, .blurbs {
    background: #333232e8;
}

.mood, .contact, .blog-preview {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}

.mood, .blog-preview {
    text-align: center;
    background: #333232e8;
    border: var(--borders) !important;
}

.table-section {
    border: var(--borders) !important;
    background-color: #333232e8!important;
    border-radius: var(--curve) !important;
}

.heading {
    background: transparent!important;
    padding-bottom: 4px !important;
    background-size: 100%100%!important;
    text-align: center;
    border: none!important;
}

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: var(--borders) !important;
    outline: none !important;
    border: none!important;
}

.comments-table td {
    background-image: url('') !important;
    background-size: cover;
    border: var(--borders);
}

.comments-table td:first-child img {
    /* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

footer {
    color: var(--text);
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: #333232e8;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #040042b0;
}

</style>
<style>
/* Force scrollbars onto browser window */

/* Scrollbar styles */

::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 2px;
    border: 1px dotted #b8d8ff;
}

::-webkit-scrollbar-thumb {
    background: #3a73b9;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b8d8ff;
}

</style>


6 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )