bj alex layout (!!! 18+)

Tags: bj alex, webtoons, bl, yaoi, alternative, black and white, black, web, windows, internet

Description:

( !!! VIEW LAYOUT HERE (temporary, will put when this layout is no longer available for live viewing: https://spacehey.com/profile?id=1718935) hello ♡ this is the first layout of mine that i have shared! i was heavily inspired by a lot of the web-design based layouts i've seen and i thought it would be a creative idea to have one based on one of my favorite webtoons. my coding is not that good plz no critique dfjkgdkfhdf i included, as most creators do, a link for html colors (and making rgba codes w/ transparency) and fonts from google to use. font is based off webtoon font style. feel free to edit this layout based on your personal preference! it doesn't have to be bj alex themed. i think it works well as an edgy alternative theme as well. please leave my credit in there if u use!! and comment if u use as well :-) thank you.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ˚⋆NಇLLY｡⋆ (https://layouts.spacehey.com/layout?id=28544) -->

<div class="chestnuts"></div>
<div class="alexdg"></div>

<style>
/* thank you for using this layout!
for gradient/semi-transparent colors, use https://rgbacolorpicker.com/
for fonts, use https://fonts.google.com */
@font-face {
font-family: 'Anime Ace';
src: url('https://dl.dropbox.com/s/u4gu715cd6u2yaz/animeace_i.ttf');
}
</style>
<style>
/* background */
body {
background-color: #fff;
background: url(https://i.imgur.com/MHguuB3.gif);
background-size: 1000px;
font-family: 'Anime Ace' !important;
}
/* loading screen/transition before it loads into ur main page */
body:before {
content: " ";
height: 2000px;
width: 2000px;
display: block;
position: fixed; 
z-index: 100;
background-image: url('https://i.pinimg.com/originals/02/0f/d6/020fd63e247cd9453a11dd7855a9f405.gif');
background-size: 100%;
background-repeat: no-repeat;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} 
}
/* cover/header image */
main:before {
 width: 100%;
 height: 300px;
 display: block;
 content: "";
 background-image: url('https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExODhhZWY5NzNhOTZmYjMzMzQ2YzI4ZjYxMjg0ZDFkMDRkZDA3Nzg2NyZjdD1n/lEraACfNxbVm6Yhy0B/giphy-downsized-large.gif');
 background-position: center center;
 background-size: cover;
}
/* actual body section color */
main {
background: rgba(0, 0, 0, 0.41);
font-size: 60%;
color: grey;
background-size: cover;
border: 2px solid rgba(29, 29, 29, 0.88);
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.76) 5px 5px;
}
/* header for name */
.profile h1 {
display: block;
padding: 5px;
margin: 0px;
width: 100%;
border-bottom-style: groove;
background-image: url(https://i.imgur.com/I2AQDLI.png), linear-gradient(to right, #000000, #ff4d4d);
background-repeat: no-repeat;
background-position: right;
font-weight: 600;
font-size: 12px;
color: #fff;
}
/* top left box, under name */
.profile .general-about {
background: url(https://i.pinimg.com/originals/d5/a7/cb/d5a7cb46e2f15a8fed10aaf1dd00965c.gif);
background-repeat: repeat;
border: 2px solid rgba(29, 29, 29, 0.88);
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.76) 5px 5px;
padding: 7px;
width: 100%;
font-weight: bold;
margin-bottom: 10px;
}
/* mood */
.profile .left .mood {
margin-bottom: 10px;
background: url(https://i.pinimg.com/originals/d5/a7/cb/d5a7cb46e2f15a8fed10aaf1dd00965c.gif);
background-repeat: repeat;
border: 2px solid rgba(29, 29, 29, 0.88);
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.76) 5px 5px;
}
/* mood header */
.mood:before {
display: block;
padding-left: 5px;
border-bottom-style: groove;
background-image: url(https://i.imgur.com/F9XL1gn.png), linear-gradient(to right, #000000, #ff4d4d);
background-repeat: no-repeat;
background-position: right;
font-weight: 600;
font-size: 12px;
color: #fff;
content: "Mood";
}
.profile .left .mood p {
margin: 10px;
}
/* spacehey url */
.profile .url-info {
display: block;
margin-bottom: 10px;
border-bottom-style: groove;
background-image: linear-gradient(to right, #000000, #ff4d4d);
background-repeat: no-repeat;
background-position: center;
border: 2px solid rgba(29, 29, 29, 0.88);
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.76) 5px 5px;
font-weight: 600;
color: #fff;
}
/* edit ur profile section */
profile .profile-info {
display: block !important;
padding-left: -5px;
margin: 0px;
border-bottom-style: groove;
background-image: linear-gradient(to right, #000000, #ff4d4d) !important;
background-repeat: no-repeat;
background-position: left;
border: 2px solid rgba(29, 29, 29, 0.88);
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.76) 5px 5px;
font-weight: 600;
font-size: 12px;
color: grey;
margin-bottom: 10px;
}
/* text for url if needed */
.profile .url-info p {
margin-left: 1em;
text-align: center;
margin-bottom: 10px;
}
/* search bar and logout */
nav {
color: #fff;
text-align: center;
font-size: 72%;
font-size: max(72%, 12px);
}
nav .links .special a {
color: #fff;
}
/* profile pic */
.general-about .profile-pic {
display: block;
float: left;
height: 160px;
border: 2px solid rgba(29, 29, 29, 0.88);
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.76) 5px 5px;
}
.profile-pic {
border-radius: 500px;
overflow: hidden;
margin-top: 0px!important;
margin-left: 0px!important;
}
/ *change font size and color and shadows, and grayscale for image icons */
.profile h1 {
@import url(https://allfont.net/allfont.css?fonts=anime-ace);
font-size: 2.7em;
font-family: 'Anime Ace', arial;
color: #fff;
}
.profile .friends .person img:not(.icon) {
filter: grayscale(100%);
}
div.profile h1 {
font-size: 2.5em;
text-shadow: 2px 2px 2px #000000;
overflow: hidden;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 1.4s;
}
a {
color: grey;
color: grey;
text-decoration: none;
font-size: 11px;
}
/* font size for page */
p {
font-size: 11px;
}
/* nav links font */
nav .links a {
text-decoration: none;
color: #939393;
font-family: Arial;
font-size: 15px;
}
b, strong {
font-weight: bolder;
color: #fff;
font-size: 12px;
}
/* nav bg color */
nav .links {
background-color: #323232;
border: solid 3px rgba(81, 81, 81, 0.39);
}
/* if you want to add a divider between the links */
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
content: " ‎ ‎ ‎ ‎ ‎";
color: #ff0202;
}
/* background of all sections */
.inner {
color: #fff !important;
background: url(https://i.imgur.com/uErOmPJ.gif);
border: 2px solid rgba(29, 29, 29, 0.88);
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.76) 5px 5px;
background-size: cover;
}
/* interests table */
.details-table td {
background: #fff;
background: rgba(255, 102, 102, 0.63);
text-align: center;
vertical-align: top;
padding: 5px 12px 5px;
border-spacing: 10px;
}
.details-table td p {
margin: 2px;
color: white;
overflow-wrap: break-word;
word-break: break-word;
hyphens: manual;
font-size: 10px;
}
.details-table {
margin: 2px;
border-spacing: 10px;
}
.comments-table td, .music-table td {
background: #000000;
vertical-align: top;
}
.comments-table td:first-child, .music-table td:first-child {
background: #f9c56c;
background: #0000000;
text-align: center;
font-weight: bold;
width: 29%;
margin-bottom: 10px;
}
/* other headings */
.profile .blurbs .heading {
display: block;
padding-left: 5px;
margin: 0px;
border-bottom-style: groove;
background-image: url(https://i.imgur.com/osULxBg.png), linear-gradient(to right, #000000, #ff4d4d);
background-repeat: no-repeat;
background-position: right;
font-weight: 600;
font-size: 12px;
color: #fff;
}
.profile .friends .heading, .profile .left .mood .heading {
display: block;
padding-left: 5px;
margin: 1px;
border-bottom-style: groove;
background-image: url(https://i.imgur.com/F9XL1gn.png), linear-gradient(to right, #000000, #ff4d4d);
background-repeat: no-repeat;
background-position: right;
font-weight: 600;
font-size: 12px;
color: #fff;
}
.profile .table-section .heading, .home-actions .heading {
background: #ff7dae;
color: #fff;
padding: 4px 7px;
border: 2px solid rgba(29, 29, 29, 0.88);
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.76) 5px 5px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
display: block;
padding-left: 5px;
margin: 1px;
border-bottom-style: groove;
background-image: url(https://i.imgur.com/F9XL1gn.png), linear-gradient(to right, #000000, #ff4d4d);
background-repeat: no-repeat;
background-position: right;
font-weight: 600;
font-size: 12px;
color: #fff;
}
.profile .contact, .profile, .profile .table-section, .home-actions {
background: rgba(85, 85, 85, 0.6);
border: 2px solid rgba(29, 29, 29, 0.88);
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.76) 5px 5px;
margin-bottom: 10px;
color: grey;
}
/* footer */
footer {
text-align: center;
color: white;
font-size: 70%;
margin: 10px 0 10px;
padding: 10px 5px;
background: url(https://i.imgur.com/uErOmPJ.gif);
background-size: 800px;
background-position: center;
}
nav .links, footer .links {
list-style: cambodian;
margin-top: auto;
}
.profile .blurbs .heading h4 {
display: inline-block;
padding: 0px;
font-size: 13.5px;
}
.profile .blurbs .section h4 {
margin: 0;
color: #959595;
font-size: 13px;
}
.details-table td:first-child {
@import url(https://allfont.net/allfont.css?fonts=anime-ace);
background: rgba(255, 102, 102, 0.63);
font-weight: bold;
width: 50%;
font-family: 'Anime Ace', arial;
font-size: 3.5mm;
}
nav .top {
background: #363636;
padding: 15px 10px 16px 10px;
display: flex;
background-size: cover;
background-position: bottom;
}
/* spacehey logo */
.logo {
content:url("https://i.imgur.com/lwBlkm9.jpg");
}
.profile .p {
font-size: 100%;
margin: 0;
word-break: break-all;
color: #fff;
}
.profile-info {    
border: 2px solid rgba(29, 29, 29, 0.88);
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.76) 5px 5px;
background-image: linear-gradient(to right, #000000, #ff4d4d);
background-repeat: no-repeat;
background-position: right;
display: flex;
align-items: center;
justify-content: center;
padding: 15px 5px;
margin-bottom: 10px;
background-size: 500px;
}
/* animations */
img:hover, .friends:hover {
      animation:shake 3s;
      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,1px) rotate(0deg);
    }
}
div.chestnuts, div.alexdg {
animation: float 3s;
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>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
}
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	    /*add to friends*/
	    content: url("https://i.imgur.com/Z4JVkIH.png")
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	    /* add to favorites */
	    content: url("https://i.imgur.com/Z4JVkIH.png")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    /* send Message */
	    content: url("https://i.imgur.com/Z4JVkIH.png")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    /* forward to friend */
	    content: url("https://i.imgur.com/Z4JVkIH.png")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    /* instant message */
	    content: url("https://i.imgur.com/Z4JVkIH.png")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    /* block user */
	    content: url("https://i.imgur.com/Z4JVkIH.png")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	    /*add to group*/
	    content: url("https://i.imgur.com/Z4JVkIH.png")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	    /* report user */
	    content: url("https://i.imgur.com/Z4JVkIH.png")
    } 
</style>
<style>
div.alexdg {
background: url(https://i.imgur.com/bESyceV.png);
background-size: 100%;
position: fixed;
right: 150px;
bottom: 70px;
height: 55px;
width: 172px;
z-index: 100;
opacity: 100%;
}
div.chestnuts {
background: url(https://i.imgur.com/FzdVHet.png);
background-size: 100%!important;
position: fixed;
right: 50px;
bottom: 100px;
height: 354px;
width: 370px;
z-index: 100;
}
</style>
<style>
/* online status */
.online {
content: url(https://i.imgur.com/Jv2iJmq.gif);
}
</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.