victim's office layout!

Tags: animator vs animation, alan becker, victim, tco, blue, white, glow, office, request
Description:

A layout made for victim lovers or Animator vs Animation fans! Pls comment if using!!! Mobile friendly , but the background photo is not centered, so it looks kinda ugly on mobile. The layout looks like this to be more unique.
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by Insomniac ⁠˘⁠ ⁠o⁠ ⁠˘  (https://layouts.spacehey.com/layout?id=102499) -->

<style>
main p{
   letter-spacing: 2px;
   font-weight: 400; 
   line-height: 1.5;
   color: white !important;

</style>

<style>
a:hover, nav .links a:hover, nav .top a:hover, footer a:hover, button:hover, .friends a p:hover{
  color: white !important;
  font-style: italic;
  text-transform: uppercase;
}
</style>


<style>
    .container{
        width: 1200px;
    }
</style> 


<style>
}
.profile {
  display: grid;
  grid-template:
    "left"
    "right";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
/* normally the width is 40%, try changing back to see why this
doesn't look good */
.profile div.col.w-40 {
  width: 100%;
}

/* left column */
.col.w-40 {
  grid-area: left;
  display: grid;
  grid-template:
    "general-about contact"
    "header  table1 "
    "url-info table2 "
    "mood     table2 ";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

/* Your title/Name */
h1 {
  grid-area: header;
}

/* Your picture/online status */
.general-about {
  grid-area: general-about;
}
/* Mood/blog/pics */
.mood {
  grid-area: mood;
}
/* contact */
.contact {
  grid-area: contact;
}
/* spacehey URL */
.url-info {
  grid-area: url-info;
}
/* General/Music/etc */
.table-section:first-of-type {
  grid-area: table1;
}
/* The other table */
.table-section:last-of-type {
  grid-area: table2;
}
/* contains "View Blog" Button */
.blog-preview {
  grid-area: blog-preview;
}

/* contains about me */
.blurbs {
  grid-area: blurbs;
}
/* Friends pictures grid */
.friends:not(#comments) {
  grid-area: friends;
}

/* comments */
#comments {
  grid-area: comments;
}

/* clears margins making grid-gaps more uniform
" > *" selects all child elements */
.profile > *,
.col.w-40 > * .col.right > *,
.profile .blurbs,
.profile .contact,
div.col.w-40.left div.table-section,
div.col.w-40.left div.url-info {
  margin: 0px;
}
</style>


<style>

#q, button {
color: #fff;
background-color: white;
border: 1px solid grey;
font-family: inherit;
}
p, i, b, .count {
color: #fff !important;
}
a, .profile .friends .person p, .logout-btn {
color: #000 !important;
text-decoration: underline !important;
}
.container {
margin: 0 auto 0;
}
.icon {
display: none;
}
nav, nav .links a {
color: #fff;
}
nav .top {
margin-top: 2px;
background: none;
background-color: white;
border: 2px solid grey;
border-bottom: none;
}
nav .links {
background-color: white;
border: 2px solid grey;
}
<style>

<style>/* Custom Profile Headers */
.contact .heading{ font-size:0; }
.contact .heading:before{ content: "Contact Me"; font-size:.9rem; font-weight: bolder; }

.w-40 .table-section:nth-last-child(2) .heading h4{ font-size:0;}
.w-40 .table-section:nth-last-child(2) .heading:before{content: "My interests:"; font-size:.9rem; font-weight: bolder; }

.w-40 .table-section:last-child .heading h4{ font-size:0; }
.w-40 .table-section:last-child .heading:before{ content: "Follow Me!"; font-size:.9rem; font-weight: bolder; }

.blog-preview h4{ font-size:0; }
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "My New Blogs"; font-size:.9rem; font-weight: bolder; }

.blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "Me"; font-size:.9rem; font-weight: bolder; }

.blurbs .inner .section:nth-child(1) h4{ font-size:0; }
.blurbs .inner .section:nth-child(1) h4:before{ content: "About Me:"; font-size:.9rem; }

.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "Who I'd Like To Meet:"; font-size:.9rem; }

.friends .heading{ font-size:0; }
.friends .heading:before{ content: "My friends..."; font-size:.9rem; font-weight: bolder;}

.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "Leave me a comment!"; font-size:.9rem; font-weight: bolder;}
</style>

<style>/* Friends Info */
    .profile .friends .heading{color: #ffffff;}
.profile .friends{text-align: center;}
    .count {color: #fff;}
    .profile .friends .person p{color: #fff !important;}
	.profile .friends .person img {border-radius: 500px;}

    .profile .friends .person img:not(.icon) {
        border-radius:15px;
        box-shadow: 1px 0px 7px 2px rgba(255, 255, 255, 0.71);
        border: 2px solid rgba(255, 255, 255, 1);
    }
    
    .profile .friends .person img:not(.icon):hover {
        transform: scale(1.1);
        transition: 0.5s ease;
    }
    
    .profile .friends .person img:not(.icon) {transition: 0.5s ease}
</style>

<style>/* Blog Info */
.blog-preview h4 {color: #FFFFFF;}

    .blog-preview p {
        background-color: none;
        padding: 5px 10px;
        border-radius: 10px;
        color: #ff;
font-weight: bolder;
    }
	
    .blog-preview p a{color: #FFFFFF !important;}
	
    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: #fff !important;
    }
</style>


<style>/* Profile Picture & Online Icon */
	.details p {text-align: center; font-family: monospace; font-size: 15px;}
	.profile-pic {border-radius: 20px; overflow: hidden;}
.profile .mood {color: #fff;}
	.mood {text-align: right;}
    .online {visibility: hidden;} 
    .online img { 
        content: url("https://ct.pimp-my-profile.com/online/26.gif"); 
        animation-name: none; 
        visibility: visible; 
        height: 15px; 
        width: 60px;
		display: block;
		margin-left: auto;
		margin-right: auto;
    }
.profile .url-info {color: #FFFFFF;}
</style>


<style>/* Links */
    a:hover {color: #FFFFFF;}
</style>


<style>
/* Profile Name Header */
	
@import url('https://cory.anota.do/spacehey/pdg_neon.css');
	:root{ --neon-text-color: #FFFFFF;}
.profile .left h1:first-child {font-size: 2.65rem;}
	.profile .left h1{ font-family: 'Vocaloid', sans-serif; font-size: 25px; text-align: center; text-transform: uppercase; overflow-wrap: break-word;}
</style>


<style>
nav img.logo {


content:url("https://static.wikia.nocookie.net/738e7a18-93da-4a28-bcb1-6c6b47733955/scale-to-width/250") ;
   }
</style>


<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "✧"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "✧"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "✧"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "✧"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "✧"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "✧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "✧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "✧"
}   
</style>


<style>
 
    :root {
        --logo-blue: #fff;
        --darker-blue: #ffffff;
        --lighter-blue: #fff;
        --even-lighter-blue: #413e73;
        --lightest-blue: #413e73;
        --dark-orange: #fff;
        --light-orange: #413e73;
        --even-lighter-orange: #413e73;
        --green: #413e73;
    }
    * {
        font-family: Monospace;
    }
    body
        {background: url("https://files.catbox.moe/fhlnci.png")
        no-repeat fixed; background-size: cover;
     }
    .blog-preview p {
        background-color: none;
        padding: 5px 10px;
        border-radius: 10px;
        color: white;
    }
    .blog-preview p a{
        color: #4256a8!important;
    }
    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: white!important;
    }
    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
    }
    .profile .contact me!,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    table.details-table {
        border-collapse: collapse;
    }
    table.details-table td {
        background-color: transparent !important;
    }
    .profile-pic {
        border-radius: 100px;
        overflow: hidden;
    }
    .heading {
        padding: 5px 0 !important;
        margin-top: 25px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #ffffff !important;
        border-bottom: 2px solid;
    }
    main {
        border-radius: 0 0 15px 15px;
        background: rgba(255, 255, 255, 0.10) !important;
    }
    .container {
        border-radius: 0 0 15px 20px;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
    }
    footer {
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.15) !important;
        display: block !important;
    }
    table.comments-table td {
        background-color: rgba(227, 217, 198, 0.20) !important;
    }
    .comments-table td:first-child img {
        width: 80px;
        border-radius: 1px;
    }
   .profile .friends .person img {
        border-radius: 500px;
    }
    .friends-grid img{
        opacity(50%) 
        border-radius: var(--curve) 
        filter: color: #ffffff;
    .blog-preview p {
        font-size: 1.4rem;
    }
    a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
</style>


<style>
.friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img
{
border: 0px dotted white !important;
outline: none !important;
}
</style>


<style>

.container:before {
  border-radius: 6px;
  height: 100%;
  left: 0;
  top: 0;
  box-shadow: 0px 0px 15px 2px #000000c3, inset 0px 0px 0px 1px var(--aero-black), inset 0px 0px 0px 2px #d9e2eb;
  background: linear-gradient(#fff0 20%,hsla(0,0%,100%,.7) 29%,transparent 29.3%);
}
.container {
  animation:.5s windowOpen cubic-bezier(.19,1,.22,1);
  box-shadow: 0 0 15px 2px #000000c3,inset 0 0 0 1px var(--aero-black),inset 0 0 0 2px #d9e2eb;
  background: linear-gradient(-139deg,rgba(135,173,190,.47) 0%,rgba(0,0,0,0) 25%),var(--aero-accent);
  border-radius: 6px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(2px);
  padding: 8px;
}


</style>


<style>
 .profile{
        background-color: ;
        border-radius: 30px;
        border: 1px solid white;
        box-shadow: 0px 0px 13px white;
    }
</style>


<style>

 nav .top {
        background-color: #;
        background-position: center;
        border-radius: 5px;
        position: relative;
        border: 1px solid white;
        border-radius: 20px;
        box-shadow: 3px 0px 10px white;
          } 
</style>


<style>
.profile-pic {
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 7px white}
</style>


<style>
    .profile{direction: rtl;}
.blog-preview{direction: ltr; text-align: center;}
    .blurbs{direction: ltr;}
    .friends{direction: ltr;}
    .general-info{direction: ltr;}
.profile .left h1{direction: ltr;}
    .details-table{direction: ltr;}
    .profile .table-section .heading{direction: ltr;}
    .details p{direction: ltr;}
	.mood{direction: ltr; text-align: right;}
.contact .heading {display: none !important;}
.url-info{direction: ltr; text-align: right;}
</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 2 of 2 comments ( View all | Add Comment )
Maneko!!👁
1723041205
This is so cool omg!!
Report Comment
ShopGuy
1716005262
im using this!!!!
Report Comment