color and b&w layout

Tags: black and white, bela

Description:

If you have any questions, please comment below or go to my blog here.

Image Credits —

⇘ Body Background: https://wallpaperaccess.com/full/1146672.jpg

Preview:

click on the image for a larger preview

Code:

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

<style>
a:hover{
    cursor: url('https://img.icons8.com/dotty/30/000000/top-view-bird.png'),auto;
}
*{
    cursor: url('https://img.icons8.com/ios-glyphs/30/000000/top-view-bird.png'),auto;
}
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');

:root {
    --headers: #626ba4;
    --links: #6a6ca5;
    --text: #423a51;
    --names: #6a6ca5;
    --background_image: url("https://wallpaperaccess.com/full/1146672.jpg");
    --font-family: 'Sriracha', cursive;
    --curve: 10px;
}
h3, h4, h5, .url-info b {color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
p, h2{color: var(--text) !important;} /* color of text */
h1, .count, .friends a p{color: var(--names) !important;} 
nav label{color: var(--headers) !important;} /* color of search */
.section h4{display:none !important;text-align:center!important;} /* aboutme & want2meet headings */
.online{color: var(--links) !important;} 
.section{color: var(--text) !important;} 


h2, h3, h4, h5, a, p, nav label, .section { 
font-family: var(--font-family) !important;	
text-transform:none !important;
}
h2, h3, h4, h5, p {
    padding-left:5px !important;
}
h1{ 
    font-family: 'Rye', cursive;
    font-size: 30px!important;
    padding:10px;
    letter-spacing:0.1em !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-width: 1px !important;
  -webkit-text-stroke-color: #6a6ca5 !important;
}
body {
    background-image: var(--background_image) !important;
    background-size: contain;
    background-color:black !important;
    background-attachment: fixed;
}   
.url-info, .blurbs, .mood, .blog-preview, 
.friends, .contact, .table, .table-section{
    background-color: transparent !important;
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: 0px solid blue !important;
    backdrop-filter: grayscale(100%)!important;
    -webkit-backdrop-filter:grayscale(100%)!important;
}

.table-section {
    border:none !important;
    background-color:var(--box_color_and_seethru)!important;
    border-radius: var(--curve) !important;}
.heading {
    background-color: #a29ac3!important;
    text-align:center!important;
    border-radius: 5px 5px 0px 0px;
    margin-top: -3px;
    margin-left: -3px;
    margin-right: -3px;
}
.profile-pic img {
    border-radius: var(--curve);
}
.friends-grid img{
    outline:none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
}
.inner img{
    outline:none !important;
    border-radius: var(--curve) !important;
}
.comments-table {
    display: block;
    height: 600px!important;
    overflow-y: scroll;
    border: 0px double red !important;
    outline: none !important;
    padding: 10px;
    margin: 5px;
}
.comments-table td:first-child {
    background: url('');
    background-size:cover;
}
.comments-table td{
    background-image: url('');
    background-size: cover;
    border: 0px solid red;
    text-align: center;
}
nav {
    background-color: transparent !important;
    border-radius: 0px 0px var(--curve); !important;}
nav .links{
    text-align: center;
}
nav ul {
    background:none !important;}
nav ul a img, .mood a img {
    display:none !important;}
.top {
    background:none !important;
    background-color:rgba(0, 0, 0, 0.0); !important;}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(45%) sepia(10%) saturate(1813%) 
    hue-rotate(200deg) brightness(92%) contrast(86%); !important;}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " | ";
    color: BlueViolet;
}
.url-info{display:none !important;}
td {
    background-color:rgba(0, 0, 0, 0.0) !important;
    border-radius: var(--curve) !important;}
main{border-radius: var(--curve) !important;}
main{background-color: transparent !important;}
.friends th, tr, #comments, .comments-table, 
.friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, 
.blurbs, .blog-preview{
    border: 5px solid #a29ac3 !important;
    outline: none !important;
    border-radius: var(--curve);
}
.blog-preview{text-align:center;}
.icon{border:none !important;}
.mood{margin-bottom:10px !important;text-align:center;}
.blurbs{margin-top:10px !important;}
.friends{margin-top:10px !important;text-align:center;}
.profile-info{border-radius: var(--curve) !important;}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.comment-replies{border:5px dotted white;}
.table-section{padding-bottom:2px !important;}
#comments{margin-top:15px !important;padding-bottom:15px !important}
.details p:last-child{color:var(--links) !important;  filter: brightness(95%);}

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 1px dotted var(--headers) !important;
    color:var(--names) !important;
    border-radius: var(--curve) !important;
}
button{
    border-radius:var(--curve)!important;
    border: 0px dotted var(--headers) !important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color:var(--headers) !important;
}

.blurbs .heading{
    background-color: #a29ac3!important;
    text-align:center!important;
    border-radius: 5px 5px 0px 0px;
    margin-top: -2px;
    margin-left: -3px;
    margin-right: -3px;
}
.profile-info {
    border: 5px solid #a29ac3 !important;
    border-radius: 10px;
    background-color: transparent!important;
    backdrop-filter: grayscale(100%)!important;
    -webkit-backdrop-filter:grayscale(100%)!important;
}
.profile-info .inner {
    font-weight: bold;
    text-align: center;
    color: #a29ac3;
}    
footer{
    border: 5px solid #a29ac3 !important;
    border-radius: 10px;
    background-color: transparent!important;
    backdrop-filter: grayscale(100%)!important;
    -webkit-backdrop-filter:grayscale(100%)!important;

}
hr{
    border: 1px solid #a29ac3;
}
</style>

<style>
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px dotted #a29ac3;
}
::-webkit-scrollbar-thumb {
    background: #a29ac3;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a29ac3;
}
</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.