Black calm layout (idk waht to name it, was my previous layout.)

Tags: black, calm, compacted, blue tint
Description:

uhh.... idk, people will barely use this anyways- (messy code)
Code:

<!-- (c) Layout created by ⁽ Z a i i ⁾ (https://layouts.spacehey.com/layout?id=80689) -->

<style>

main:before {

width: auto;

margin-bottom: 1px;

border: 1px solid black;

height: 165px;

display: block;

content: "";

box-shadow: 0px 0px 10px 1px #cceeff;

background-image: url('https://i.pinimg.com/originals/e9/fb/55/e9fb555cc9f41d3db57cfdf8bca9bb14.gif');

background-position: center center;

background-size: cover;

}

</style>






<style>

body {

font-family: Courier New, monospace;

background-color: black;
background-image: url('https://thumbs.gfycat.com/AffectionateDesertedGoa-max-1mb.gif');



}

#q, button {

color: #ffffff;

background-color: black;

border: 1px solid #ffffff;

font-family: inherit;



box-shadow: 0px 0px 10px #cceeff;



}

p, i, b, .count {

color: #ffffff !important;

}

a, .profile .friends .person p, .logout-btn {

color: #ffffff !important;

text-decoration: underline !important;



}

.container {

margin: 0 auto 0;

}

.icon {

display: none;

}

nav, nav .links a {

color: #ffffff;

}

nav .top {

margin-top: 2px;

background: none;

background-color: black;

border: 2px dotted #ffffff;

border-bottom: none;



box-shadow: 0px 0px 10px #cceeff;



}

nav .links {

background-color: black;

border: 2px solid #ffffff;



box-shadow: 0px 0px 10px #cceeff;



}



main {

background: black;

color: #ffffff;

border-left: 2px dotted #ffffff;

border-right: 2px dotted #ffffff;



box-shadow: 0px 0px 10px #cceeff;



}

.heading, .url-info {

color: #ffffff !important;

background: none;

background-color: black !important;

border: 2px solid #ffffff !important;



box-shadow: 0px 0px 10px #cceeff;



}

.inner {

color: #ffffff !important;

border: 2px dotted #ffffff;

border-top: none;



box-shadow: 0px 0px 10px #cceeff;



}

.profile-info {

border: 2px solid #ffffff;



box-shadow: 0px 0px 10px #cceeff;



}

.profile-info .inner {

border: none;



box-shadow: 0px 0px 10px #cceeff;



}

.friends .inner {

border-bottom: none;



box-shadow: 0px 0px 10px #cceeff;



}

#comments {

border-bottom: 2px dotted #ffffff;



box-shadow: 0px 0px 10px #cceeff;



}

.profile .contact, .profile .table-section, .home-actions {

border: none !important;



box-shadow: 0px 0px 10px #cceeff;



}



/* contact icons */

.contact .inner a img {

font-size: 0;

}



.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

/* add to friends */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")

}



.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorite */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")

}



.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send a message */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")

}



.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* foward to friend*/

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")

}



.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block user */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")

}



.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add 2 group  */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")

}



.profile .contact .f-row:first-of-type {

margin-top: 0px;

padding-top: 7px;

}

.profile .blurbs .section h4 {

color: #ffffff !important;

}

.details-table {

margin: 2px;

}

.details-table, td {

border: 1px solid #ffffff;

border-collapse: collapse;



box-shadow: 0px 0px 10px #cceeff;



}

td {

color: #ffffff !important;

background: none;

background-color: black !important;

} 

table.details-table {

max-width: 98%;

}

.profile h1 {

font-size: 2em;

}

footer {

background: black;

border: 2px dotted #ffffff;

box-shadow: 0px 0px 10px #cceeff;



}

footer p {

color #ffffff !important;



}

.comments-table {

border: none;

border-collapse: collapse;



box-shadow: 0px 0px 10px #cceeff;



}

.comment-replies {

border: 1px solid #ffffff;

margin: 2px;



box-shadow: 0px 0px 10px #cceeff;



}

nav .info {

background: none;

}



.col, main, footer, nav::before, .online, nav .links, nav .top {



animation: float 4s;



animation-iteration-count: infinite;



animation-timing-function: ease-in-out;



}



.col, main, footer, nav::before, .online, nav .links, nav .top {



animation: float 4s;



animation-iteration-count: infinite;



animation-timing-function: ease-in-out;



}



@keyframes float {



0% { transform: translate(0, 0px);



}



50% {



transform: translate(0, 8px);



}



100% {



transform: translate(0, -0px);

}


<style>
.online{content:url("https://lh3.googleusercontent.com/fife/AKsag4M4JL-VG5gHAg0wvE4Tsx7zuOt2ppHk7tUZcC1pV_MPGKWSSwQ6I_kAOSs6C8-O-zsWVmsD8h1y6utx6-GpbmHQl405E2bCLSVDe5aUDRD_rEvZYMC0G_wv2ejc9o8FT1bNVFJZvBoQWHGNveWlcLvb0tZqZpWMO7MmrmGIFcx1humpHLR4RR6VycuHFgwF15I6vNlRfN0XIrsek0-eAeHzkq5vUvRTu183oRyPjCoZRsirQ7333d-JibEf7a5QvhmX4w62nUq2gREVroHZWOXhEnL5GcZXveeFihQ5JDoF68KL2Z9dN8je8KBkKFUxeRibRChm9eq48VH2OVdNc5bk_LLLiSKZy_KTNQUA9aFpc0LE79qN6_4F-zEldFPJfgfQaFhU7wgunFczKNqc6zyk_Z2Yhq14RsgxCaMZtloPFgJd6uQEifl8anJ75x8_fDFgGKXQJasOpEl6QYtcuoshujJeWxlhBwAPQ5ZCQqEITTfCns8nQp_jVj_y2nmTnaHr6y-Kv6q9IFvqVSkDwJSWB0Z4B1_p2De_KtMg2qeKtArnjLCdatRPKjT305LVdCCPMqStpfPB4ca0TgfSzMWPGQGE3t1W1c_tCcPiyiOItIUtxlIWME1eOIMYK4fOnxjfbVRkGUwKPNyegTJspzXTRBXJLZQihMT37FywgwzmqX__LHjsxJ_aGnB-dGiM4syshdwg6_Idf8o3CXd7EmO6A1eb0-cD5SUkGe4aKmSUD-v1V8yh7BxNb1mXdpXBxUSo-PaTOxuK1ySekVCcckWob24jldpFwY3_BDVu6qgSrgVpcmz2z_jeWxH-4ucS4Uq6mPNYhK8HNWsaB7N2YCSo2F4pdHCVeIDRIQYcCT8OWeSw_HoMRF3CYTpKEMSKWDXXcrdt12vyFl4BZk_zRMHW7FN0syICYVp4Nd-HX4nJCjelsj5UdERumHWpKediSMxRwOslnb41UEqXg9MCpyXH3RcTJflaDyaT-s-gF0S53uyT9-FqTQMTBCdpaepaC4RL1o4f1_nTsRSRNzTphT2kDI4nIUglQP-KDQ48GTMkmY1fl3XdHr9-ImCM2mQHLCk0nDXrg_4bHuPji-vfw2aPdJAf-eb8OpOkvaJe2oJm-U8en5I4HL5T7Va3DYamkFdULdyqeIrPXifiNdUTRdup1YpJv3NuqccKIXZQCduWureiox3bxwnGxsP5MnO1bn9LzeruNqNgnrc3gC_YwzYarhPpqodjPfVCvF0me66fYFpfNv6PgoWyTHRQpbtAZQAnTLs8qVh6DaWP67bn8-J8ES71UGXz1hRDlCT2uk7HdSh6uRy8BlQanfzhuO_B4jJx6Rfbl14NQLtowP9QDbZUQ2H8Drzri7hBqXRm18RbWQ_MEYzjMOlFBO7PM7A4LQ68j-3no0tySfQ5s4DYPvab8aGIkNxGQ8cJPhRamc7jl0C28RI__XNZk-W_Af8rbgx1fzSDrMJOH6LcsvM7G8PRFhsSNZVJ_rQfr94byY7q-sizTrr_liYV0gA_g2n7EuemMkuw7_G20MPIAYFtuGLSPfK-EbvcVNYxGjg7pwLI4XuPn7K7cIojDDRY0mDjkQE-Fpda7xRJns4=w1365-h768");
}
</style>

<style>
:root {
--topic1: "☆ general"; /* EDIT INTEREST LABELS HERE */
--topic2: "☆ music";
--topic3: "☆ movies";
--topic4: "☆ tv";
--topic5: "☆ books";
--topic6: "☆ besties";

}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px #cceeff !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
filter: brightness(95%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
content: var(--topic6);
}
</style>
.general-about .profile-pic img{
 clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%)
}

<style>

<style>
img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@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); }
}
<style>
/*hovr animations*/
img, .friends img{
  overflow: hidden;
  margin: auto;
  transition: all 0.5s;

}

img:hover, .friends img:hover{
  transform: scale(1.3) rotate(12deg);
  webkit-filter: blur(1px); /* Chrome, Safari, Opera */
  filter: blur(1px);

}

</style>
.table-section {
    height: 130px;
    overflow-y: auto;
    border: none!important;
}



<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>
<style>
main{
    height: 460px;
    overflow-y: scroll;
}
main .left{
    border-right:solid black 1px;
padding: 40px;
</style>
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 0 of 0 comments ( View all | Add Comment )