Red and black layout

Tags: red

Description:

Red and black layout with floating profile animation. Made from bits and pieces of other code, change it up however you like. Just comment if used!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Sip O' Poison (https://layouts.spacehey.com/layout?id=31553) -->

<style>

main:before {
width: auto;
margin-bottom: 2px;
border: 2px solid #fc031c;
height: 80px;
display: block;
content: "";
box-shadow: 0px 0px 10px 5px #fc031c;
background-image: url('https://i.pinimg.com/originals/9d/cd/bb/9dcdbb204749b58c73430dd427b32bf4.gif');
background-position: center center;
background-size: cover;
}


body{background:url("https://i.pinimg.com/564x/81/8a/77/818a774d4784a1ae4d8b4ea8311ca23d.jpg") no-repeat fixed; background-size:cover;
}

.row.profile{
box-shadow: 0px 0px 10px 6px #fc031c;
}
}

nav .links .special a {
color: #fc031c;
}

small {
font-size:100%;
}
 
main {
background-color: black;
}

.general-about .profile-pic img {
border: 2px solid #fc031c;

box-shadow: 0px 0px 10px 0px #fc031c;
 }   

b {
font-size: 14px;
}

time.ago {
color: #fc031c;
}

h1{
font-size: 30px !important;
text-shadow: 5px 5px 0px #fc031c;
color: #fc031c;
}

.profile .friends .inner b, .profile .friends .inner a{
color: #fc031c;
text-shadow: 2px #fc031c;
}

p{
font-size: 16px;
}

.details-table td a {
color: #fc031c;
}

.details-table td p {
color: #fc031c;
font-size: 14px;
}

  .table-section .heading{ font-size:14px; }

}

.profile h1{
color: #fc031c !important;
font-size: 5px;
}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size: 14px;
}

.friends p, .friends a {
color: #fc031c;
}

.profile .friends .inner{
    text-align: center;
background-image: url("");
border: 2px inset #fc031c;
box-shadow: 0px 0px 10px 0px #fc031c;
background-position: center;
}

.profile .blurbs .section h4 {
text-align: center;
font-size: 14px;
color: #fc031c;
border: 2px #fc031c;
}

.button {
    background: black;
    color: #fc031c;
}

.profile-info{
background:url("") no-repeat fixed; background-size:cover; background-image: center;
border: 2px inset #fc031c;
box-shadow: 0px 0px 15px 0px #fc031c;
}

.profile-info a{
font-size: 14px;
color: #fc031c;
text-shadow:  3px 3px 2px #fc031c;
}

.profile-info h3{
color: #fc031c;
}

.profile .blurbs .heading, .profile .friends .heading {
color: #fc031c;
background-color:transparent;
}

.profile .blurbs .inner{
background: url("");
box-shadow: 0px 0px 10px 0px #fc031c;
border: 3px inset #fc031c;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: transparent;
color: #fc031c;
}

.contact .heading h4{
display:none !important;
}

.logo {

    background: #fc031c;
}

h4 {
font-size: 14px !important;
color: #fc031c;
  font-family: Arial, sans-serif;
 }

p {
  font-family: Arial, sans-serif;
color: #fc031c;
   } 

   a {
font-size: 14px;
     color: #fc031c; 
   }


a:hover {
     color: #fc031c; 

}
    .count {
        color: #fc031c;
    }

.profile .friends .person p {
color: #fc031c;  
}
.profile .friends .person p:hover {
color: #fc031c;  
}

.blog-preview{
text-align: center;
background-image: url();
color: #fc031c;
border: 2px solid #fc031c;
box-shadow: 0px 0px 10px 0px #fc031c;
}

.blog-preview p, .blog-preview a, .blog-preview h4{
background-color: black;
}

.contact .heading h4{
font-size:14px;
}

.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px #fc031c;
border-style: solid;
border-width: 2px #fc031c;
border-image: url("") 60 fill round;
}

a, .profile .friends .person p, .logout-btn {
color: #fc031c !important;
text-decoration: underline !important;
}

.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/6d55e561-3bed-4736-a075-7ebadb191dc7/ddhpev0-caf83ef7-905e-47f8-960c-7ec2b234ce6d.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzZkNTVlNTYxLTNiZWQtNDczNi1hMDc1LTdlYmFkYjE5MWRjN1wvZGRocGV2MC1jYWY4M2VmNy05MDVlLTQ3ZjgtOTYwYy03ZWMyYjIzNGNlNmQucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.wjsxqTjrIEPMGnaEMbxAz9WOKx_ifTi5Tkg0Ypwrw9o);
}
  

.profile .contact {
background-color: black;
}
.profile .contact {
border: 2px solid #fc031c;
box-shadow: 0px 0px 10px 0px #fc031c;
  font-family: Arial, sans-serif;
background: transparent;
}

.profile .contact a{
font-size: 12px;
}

.f-col{
border: 2px #fc031c;
}

.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 friend */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add 2 fav */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chat */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.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/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
} 

.contact .inner a img {
 font-size: 0;
}
.contact .inner a img:before {
 font-size: 1em;
 display: block
}

.profile .table-section .details-table td p, .profile .table-section .details-table td a{
color: #fc031c;
}

.profile .table-section .details-table td {
background:url("");
background-image: center;
border: 2px inset #fc031c;
box-shadow: 0px 0px 10px 0px #fc031c;
}


.profile .friends .comments-table td {
background-image: url("");
position: center;
border: 3px solid #fc031c;
}
.comments-table td*{


  }
.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px #fc031c; 

}

.comments-table td:first-child img{
border-style: solid;
border-width: 2px;
border-image: url("") 60 fill round;
box-shadow: 0px 0px 19px 0px #fc031c;

}

.comment-replies{
border: 3px inset #fc031c;
color: #fc031c;
}

.general-about .details{
padding: 2px;
background: black;
border: 3px inset #fc031c;
background-image: url("https://i.pinimg.com/564x/f8/f5/72/f8f572a64e70cada5afe184a231a03d9.jpg");
background-size:cover;
box-shadow: 0px 0px 10px 0px #fc031c;
  font-family: Arial, sans-serif;
}

.general-about .details p:not(.online){
color: #fc031c !important;
font-size: 14px;
  font-family: Arial, sans-serif;
}

.general-about .details a{
  font-family: Arial, sans-serif;
color: #fc031c !important;
font-size: 14px;
}

nav{ 
color: #fc031c;
font-size: 13px !important;
text-transform:none;
text-align: center;
    }

.links{
width=810px;
}

nav .links {
background: black;
box-shadow: 0px 0px 10px 6px #fc031c;
}

nav .links a:hover {
color: #fc031c;
}

nav .top{
background-color: transparent;
}

nav .top a{
color: #fc031c !important;
}

nav .top label{
color: #fc031c;
}


.profile .url-info {
border: 3px inset #fc031c;
color: transparent;
font-size: 0.1px;
box-shadow: 0px 0px 10px 0px #fc031c;
}
.profile .table-section {
border: none;
}


nav .links a{
color: #fc031c;
  font-family: Arial, sans-serif;
font-size: 14px;
}

table.comments-table {
border: 2px inset #fc031c;
}


footer p{
color: #fc031c;
font-size: 100%;
}

footer a{
color: #fc031c;
}

footer {
color: transparent !important;
box-shadow: 0px 0px 15px 6px #fc031c;
text-decoration: underline !important;
text-decoration-style: dotted !important;
background: transparent;
  }    

    </style>

<style>

h1{
animation: type 3s steps(27);
  color: transparent;
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}

</style>

<style>
.url-info{
    background: url('https://i.pinimg.com/736x/ac/ff/d4/acffd440984920dd3aa15aca1b4c7830.jpg');
    background-position: center;
    height: 77px;
    background-size:cover;
}

.url-info p{
    opacity: 0.0;
}

</style>

<style>
table.comments-table{
background-color: black;
display: block;
height: 300px!important;
overflow-y: scroll;
border-color: #fc031c;
border-width: 5px;
}
</style>

<style>
    .comments-table td:first-child{
background-color: black;

}

.comments-table td{
border-width:0;
background-color: black;
border: 2px solid #fc031c;
</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 20 of 61 comments ( View all | Add Comment )

michael	20 days ago using Report Comment
Jeff the Killer	1 month ago i am so fuckin usin this Report Comment
Osmorino	2 months ago using! Report Comment
Liaᯓ★	2 months ago Using :) Report Comment
alaina </3	2 months ago using! Report Comment
𖤐 HiraethN0lUcK 𖤐	3 months ago Using Report Comment
Elliot	3 months ago using :3 Report Comment
Devine_insanity (X_+	3 months ago Using ^_^ Report Comment
vincentzx	3 months ago Using!! ^_^ Report Comment
vincentzx	3 months ago Using!! ^_^ Report Comment
vincentzx	3 months ago Using!! ^_^ Report Comment
⋆｡°✩Marci☆	4 months ago using!! Report Comment
D4m144nn.14	4 months ago Usinggg :33 Report Comment
(★ᴗ★)✧	4 months ago using :) Report Comment
ming_sita0_o	4 months ago using Report Comment
MC BUSHPIG	6 months ago Using :D Report Comment
lucas	7 months ago using! Report Comment
Ronin	7 months ago Using! Report Comment
✰ spencer ✰	8 months ago using!! Report Comment
xXfrogXx	8 months ago using Report Comment