Mutant. 25+'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

Black Blue Simple Layout

image host

<!-- (c) Layout bones by layout! (https://layouts.spacehey.com/layout?id=107589) 

Final layout by Mutant (https://spacehey.com/mutant3#profile)  -->


<style>

@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');

body{font-family: 'Play', sans-serif;}

{background-color: black;}

img {

filter: sepia(100%) hue-rotate(179deg) saturate(1.99);

}

body::bee {

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  z-index: 2;

  background: linear-gradient(rgba(20, 20, 100, 0.2) 50%, rgba(0, 0, 0, 0) 50%);

  background-size: 100% 2px, 3px 100%;

  pointer-events: none;

}

#q, button {

color: #C4F6FF;

background-color: black;

border: 1px solid grey;

font-family: inherit;

}

p, i, b, .count {

color: #C4F6FF !important;

}

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

color: #C4F6FF !important;

text-decoration: underline !important;

}

.container {

margin: 0 auto 0;

}

.icon {

display: none;

}

nav, nav .links a {

color: #C4F6FF;

}

nav .top {

margin-top: 2px;

background: none;


background-color: black;

border: 2px solid grey;

border-bottom: none;

}


nav .links {


background-color: black;


border: 2px solid grey;


}


body{


background-image:


url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Black_from_a_camera.jpg/1200px-Black_from_a_camera.jpg);


background-attachment: fixed;


background-size: 1000px;


}



main {


background: black;


color: #C4F6FF;


border-left: 2px solid grey;


border-right: 2px solid grey;


}


.heading, .url-info {


color: #C4F6FF !important;


background: none;


background-color: black !important;


border: 2px solid grey !important;


}


.inner {


color: #C4F6FF !important;


border: 2px solid grey;


border-top: none;


}


.profile-info {


border: 2px solid grey;


}


.profile-info .inner {


border: none;


}


.friends .inner {


border-bottom: none;


}


#comments {


border-bottom: 2px solid grey;


}


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


border: none !important;


}


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


margin-top: 0px;


padding-top: 7px;


}


.profile .blurbs .section h4 {


color: #C4F6FF !important;


}


.details-table {


margin: 2px;


}


.details-table, td {


border: 0px solid grey;


border-collapse: collapse;


}


td {


color: #C4F6FF !important;


background: none;


background-color: black !important;



table.details-table {


max-width: 98%;


}


.profile h1 {


font-size: 20px;


}


footer {


background: black;


border: 2px solid grey;


}


footer p {


color #C4F6FF !important;


}


.comments-table {


border: none;


border-collapse: collapse;


}


.comment-replies {


border: 1px solid grey;


margin: 2px;


}


nav .info {


background: none;


}



</style>



<iframe width="0" height="0" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy" class="hideobj">


</iframe>



<style>


main:before {


 width: 100%;


 height: 200px;


 display: block;


 content: "";


 background-image: url(https://i.pinimg.com/originals/d1/ce/15/d1ce15d284b3e347422df62818e09af6.gif);


background-position: center; 


background-size: 100%;


}



</style>




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



<iframe width="1" height="1" src="https://www.youtube.com/embed/Ogn-mqe-nsU?autoplay=1&mute=1&loop=1&playlist=Ogn-mqe-nsU" frameborder="0" allow="autoplay; encrypted-media"></iframe>









<style>

main:before {

 width: 100%;

 height: 200px;

 display: block;

 content: "";

 background-image: url(https://qph.cf2.quoracdn.net/main-qimg-206ca65132eacb20e6987583665794c4);

 background-position: center; 

 background-size: 100%;

}

main:after {

 width: 100%;

 height: 200px;

 display: block;

 content: "";

 background-image: url(https://i.pinimg.com/originals/d1/ce/15/d1ce15d284b3e347422df62818e09af6.gif);

 background-position: center; 

 background-size: 100%;

}


.profile-info {


display:none;

}


.table-section + .table-section { display: none; }


.friends .inner, .friends .heading {

display: none;

}


#comments .inner, #comments .heading {

display: block;

}


.url-info {

    display: none;

}

.profile .blurbs .section:first-child {

    display: none;

}


.blurbs .inner .section:last-of-type h4 {

    font-size: 0;

}


.blurbs .inner .section:last-of-type h4::after {

    content: " ";

    font-size: .8rem;

}


.blurbs .heading::before {

    content: "Blurb";

    font-size: .8rem;

    font-weight: bold;

}


.blurbs .heading {

    font-size: 0;

}


/* Remove border from blurbs content but keep header border */

.blurbs .inner {

    border: none !important;

    background: none !important;

}



#comments .heading::before {

    content: "Friends' comments";

    font-size: .8rem;

    font-weight: bold;

}


#comments .heading {

    font-size: 0;

}


.blog-preview h4 {

    font-size: 0; /* hides original header text */

}


.blog-preview h4 {

    display: block;             /* full width like blurb header */

    padding: 2px 6px;

    border: 2px solid grey;

    border-radius: 0px;

    text-align: left;           /* text sticks to left */

    width: 100%;                /* full width of container */

    box-sizing: border-box;     /* include padding in width */

}



.blog-preview h4::before {

    content: "Latest Blog Entries ";

    font-family: 'Play', sans-serif;

    font-size: 0.8rem;

    font-weight: bold;

    color: #C4F6FF;

}


.blog-preview h4 a {

    font-size: 0.8rem;

    font-weight: normal;

    color: #C4F6FF;

}


.blog-preview h4 a {

    font-size: 14px; /* restore link visibility */

}

.table-section:nth-last-child(2) .heading {


    display: none !important;


}


.table-section:nth-last-child(2) .details-table tr:first-child {display:none;}




.table-section:nth-last-child(2) .details-table tr:nth-child(2){display:none;}




.table-section:nth-last-child(2) .details-table tr:nth-child(3){display:none;}




.table-section:nth-last-child(2) .details-table tr:nth-child(4){display:none;}




.table-section:nth-last-child(2) .details-table tr:nth-child(5){display:none;}




.table-section:nth-last-child(2) .details-table tr:nth-child(6){display:none;}


.table-section:nth-last-child(2) .inner,


.table-section:nth-last-child(2) .details-table {


    border: none !important;

}

/* Remove border from contact block content but keep header */

.profile .contact .inner {

    border: none !important;

    background: none !important;

}


/* Remove border from comments block content but keep header */

#comments .inner {

    border: none !important;

    background: none !important;

}

#comments {

    border-bottom: none !important;

}



</style>


2 Kudos

Comments

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

Lori

Lori's profile picture

Ooh, nice 🖤


Report Comment



Thanks :)

by Mutant. 25+; ; Report