my current layout, mainly dirkthemed

Tags: homestuck
Description:

uhm yeah idc if you use just comment if you use, oh n also bill Watterson autoplay emr
Code:

<!-- (c) Layout created by yaoilicious (https://layouts.spacehey.com/layout?id=100498) -->

<style>
table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://media1.tenor.com/m/49Ly629RuRUAAAAd/homestuck-dave-strider.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

<style>
body{
background: url(https://i.pinimg.com/564x/c3/72/c8/c372c810be065cd6ff7426a654b19e6b.jpg);
no-repeat center center;
background-size: cover;
</style>
<style>
nav .top {
    background: transparent;
    padding: 15px 10px 14px 10px;
    position: relative;
}

nav .links {
    background-color: transparent;
    padding: 3.5px 16px;
    text-align: center;
    font-size: smaller;
}

nav{
background: url(https://i.pinimg.com/564x/c9/fe/21/c9fe217711b0889e4ddb4bd8da0823ee.jpg);    background-position-x: center;
    background-position-y: -66px;
    padding-bottom: 21px;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid white;
    margin-bottom: 20px;
    box-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
    font-size: revert;
}

button, input {
    overflow: visible;
    background: white;
    border: 0px;
    color: orange;
    border-radius: 5px;
    box-shadow: 0 0 5px white, 0 0 10px #894F0B;
}

nav .top .left .logo {
    width: 165px;
    height: 42px;
    filter: drop-shadow(0 0 5px #894F0B);
}

.logout-btn {
    font-family: inherit;
    text-transform: lowercase;
    box-shadow: none;
}

nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 5px white, 0 0 10px #894F0B;
    font-size: max(0.98em, 12px);
}

nav .links .special a {
    color: orange;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " . ";
    color: orange;
    text-shadow: 0 0 5px white, 0 0 10px white;
}

nav .links a:hover {
    text-decoration: none;
    color: red;
    font-style: italic;
    text-shadow: 1px 1px white;
}
</style>
<style>

@import url('https://external-media.spacehey.net/css/sTSycatB4p3hEqqKkFcDWrHgj9OIeBuUxrg60kFitkok=/https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body { font-family: 'press start 2p';     font-size: 10px; }
</style>
<style>
main {
background: black;
background-color: rgba(0, 0, 0, 0.5);
color: orange;
border-left: 2px dotted #e00707;
</style>
<style>
.profile .mood {
    width: 100%;
    display: inline-block;
    margin-top: 60px;
    text-align: center;
    background: url(https://i.pinimg.com/564x/a2/5b/c4/a25bc4d5ef9557e7349e528b2bfe4d14.jpg);
    border-radius: 9px;
    padding: 10px 5px 5px 5px;
    box-shadow: 0 0 5px orange, 0 0 10px orange;
    margin-bottom: 20px;
}
border-right: 2px dotted orange;
border-bottom: 2px dotted orange;
}

.edit-link {
    font-size: 90%;
    text-align: center;
}

.profile h1 {
    font-size: large;
    margin: 0 0 10px 0;
    text-align: center;
}

.details, span {
    color: orange;
    text-shadow: 0 0 5px orange, 0 0 10px #894F0B;
}

.contact{
background: url(https://i.pinimg.com/564x/da/dd/c7/daddc722b0be240086f528c0df6e6001.jpg);
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: black;
    padding: 7px 7px;
    color: orange;
    text-align: center;
    border-radius: 8px 8px 0px 0px;
    font-size: 130%;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 1px orange;
    margin: 10px 0;
    border-radius: 14px 14px 0px 0px;
    box-shadow: 0 0 5px orange, 0 0 10px orange, 0 0 15px orange;
}

.url-info{
font-size: 0px;
background: url(https://i.pinimg.com/564x/90/d5/c8/90d5c8e81c21160c219c3a0b1d7382b2.jpg);
height: 100px;
}
.table-section {
    background: orange;
}
.details-table td:first-child {
    background: black;
    color: orange;
    font-weight: bold;
    width: 33%;
}
.details-table td {
    background: black;
    vertical-align: top;
    color: orange;
}

.blog-preview {
    background: url(https://i.pinimg.com/564x/8a/b6/0d/8ab60d97aa22606005c6f06381a8f76e.jpg);
    border: 1px orange;
    box-shadow: 0 0 5px orange, 0 0 10px red, 0 0 15px orange;
    border-radius: 14px;
    padding: 1px 2px 5px 10px;
    background-position-x: center;
    background-position-y: 60px;
}

.blog-preview h4 {
    font-size: 130%;
    color: orange;
    text-shadow: 2px 2px #993d03;
}

.blog-preview p {
    border-bottom: 3px solid #ff6200;
}

.profile .blurbs{
background: url(https://i.pinimg.com/564x/40/3b/0b/403b0b9f2ed48a2b3ffe05e768dc8ac1.jpg);
    background-position: center;
    box-shadow: 0 0 5px orange, 0 0 10px red, 0 0 15px orange;
    border-radius: 14px;
    border: 1px solid orange;
    height:250px;
    overflow-y: scroll;
}
.profile .blurbs .heading, .profile .friends .heading {
    background: black;
    color: orange;
    padding: 7px 7px;
    border-radius: 15px 15px 0px 0px;
    font-size: 130%;
    text-align: center;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: orange;
    text-shadow: 2px 2px #a13e00;
    font-size: 130%;
    padding-bottom: 5px;
}

.profile .blurbs .section p {
    font-size: 100%;
}
.friends {
    border: 1px solid orange;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow: 0 0 5px orange, 0 0 10px red, 0 0 15px orange;
background: url(https://i.pinimg.com/564x/33/c9/bd/33c9bd0e89651cb4b27905dbd33fc220.jpg);
no-repeat fixed;
background-size: cover;
    color: orange;
}

.count {
    color: black;
}


.comments-table td:first-child, .music-table td:first-child {
    background: black;
    text-align: center;
    font-weight: bold;
    width: 38%;
}
.comments-table td, .music-table td {
    background: black;
    vertical-align: top;
}
.comment-replies {
    padding: 0 5px;
    border: 1px solid orange;
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 0 5px orange;
}
footer{
background: url(https://i.pinimg.com/564x/18/0d/5b/180d5be4e013f54ac20ecf1d92704176.jpg);
    background-position: center;
    border-radius: 8px;
    border: 1px solid orange;
    box-shadow: 0 0 5px orange, 0 0 10px red, 0 0 15px orange;
    color: red;
}
a {
    color: orange;
    text-decoration: none;
    text-shadow: 2px 2px #a13e00;
    font-style: italic;
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: black;
}

::-webkit-scrollbar-thumb {
    background: orange;
}

::-webkit-scrollbar-thumb:hover {
    background: red;
}

::-webkit-scrollbar-track {
    width: 2px;
    border: 1px solid orange;
}
}

html {
    filter: sepia(0.2);
</style>
<style> body, a, a:hover { cursor:url(http://media.tumblr.com/tumblr_mdhlazxPmp1qg3bod.png), auto }</style><a href=""></a><a href=""></a>
<style>
li.active .icon { content:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/713ec1c2-a589-45e4-9cd2-8aa0d5e15ea1/d572h0i-b87d8b2d-6954-456d-a48c-ef37567a2432.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzcxM2VjMWMyLWE1ODktNDVlNC05Y2QyLThhYTBkNWUxNWVhMVwvZDU3MmgwaS1iODdkOGIyZC02OTU0LTQ1NmQtYTQ4Yy1lZjM3NTY3YTI0MzIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dgP-nmh1RDmDeZ_EU72L_p_grBzrwZoxEUGL6Uiuvi8'); width: 20PX;height: 20px;}
</style>
<style>
.general-about{
  position: relative;
  margin-top: 30px;
}
.general-about .profile-pic::before{
  content: '';
  background: url('https://cdn.discordapp.com/attachments/1144935925097431202/1183265924439101510/dave_strider_shimeji_by_lukeplayer_d7q0mh8-fullview.png?ex=6587b544&is=65754044&hm=79f9ce161717b98ea082791abce3c8b9bf66d80b07ab3cacc372fd96b187ffde&') no-repeat;
  background-size: 70px;
  display: block;
  width: 200px;
  height: 100px;
  z-index: 999;
  position: absolute;
  top: -22px;
  left: 108px;
}
</style>
<style>
.general-about img {-webkit-mask-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/713ec1c2-a589-45e4-9cd2-8aa0d5e15ea1/d572h0i-b87d8b2d-6954-456d-a48c-ef37567a2432.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzcxM2VjMWMyLWE1ODktNDVlNC05Y2QyLThhYTBkNWUxNWVhMVwvZDU3MmgwaS1iODdkOGIyZC02OTU0LTQ1NmQtYTQ4Yy1lZjM3NTY3YTI0MzIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dgP-nmh1RDmDeZ_EU72L_p_grBzrwZoxEUGL6Uiuvi8);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>
<style>
.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/713ec1c2-a589-45e4-9cd2-8aa0d5e15ea1/d572h0i-b87d8b2d-6954-456d-a48c-ef37567a2432.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzcxM2VjMWMyLWE1ODktNDVlNC05Y2QyLThhYTBkNWUxNWVhMVwvZDU3MmgwaS1iODdkOGIyZC02OTU0LTQ1NmQtYTQ4Yy1lZjM3NTY3YTI0MzIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dgP-nmh1RDmDeZ_EU72L_p_grBzrwZoxEUGL6Uiuvi8);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>

<style>
@keyframes hoverrainbow {
  from {
    filter: saturate(300%) hue-rotate(0deg);
  }
  to {
    filter: saturate(300%) hue-rotate(360deg);
  }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes hoverEffects {
  from {
    filter: saturate(150%) hue-rotate(0deg);
    transform: translate(1px, 1px) rotate(0deg);
  }
  to {
    filter: saturate(150%) hue-rotate(360deg);
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

main img:hover {
  animation: 1s hoverrainbow, 0.5s shake, 1s hoverEffects;
  animation-iteration-count: infinite;
}
</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/UTaszc1Q6eY?controls=0//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 1 of 1 comments ( View all | Add Comment )
Vergil
1709171321
Woooow that's amazin O_o!!
Report Comment