Layoutt

Tags:

Description:

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


<style>
/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com or https://www.cursors-4u.com
============⚠️==========*/
a:hover{
 cursor: url('https://img.icons8.com/ios-filled/30/fa314a/kris.png'), auto;
}
* {
 cursor: url('https://img.icons8.com/fluent-systems-filled/30/fa314a/skull-candle.png'), auto;
}
</style>

<style>
/* font-family */
@import url('https://fonts.googleapis.com/css2?family=Astloch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap');
</style>

<style>
/* this is the grain that appears over the profile */
html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url(https://i.imgur.com/QpnTsrV.jpg);
    content: "";
    height: 300%;
    left: -50%;
    opacity:.2;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
}
@keyframes grain {
 0%, 100% { transform:translate(0, 0) }
 10% { transform:translate(-5%, -10%) }
 20% { transform:translate(-15%, 5%) }
 30% { transform:translate(7%, -25%) }
 40% { transform:translate(-5%, 25%) }
 50% { transform:translate(-15%, 10%) }
 60% { transform:translate(15%, 0%) }
 70% { transform:translate(0%, 15%) }
 80% { transform:translate(3%, 35%) }
 90% { transform:translate(-10%, 10%) }
}

/* this is where the colors are rooted */

:root{
    --headers: firebrick;
    --text: firebrick; 
    --names: red;
    --links: maroon;
    --font-family: 'IM Fell DW Pica SC', serif;
    --curve: 0px;
    --borders: 0px solid black;
}
/* this is where the colors for specific things are located */
.blog-preview h4, h2, h3, h5{color: var(--headers)!important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color:red!important} /* color of links on hover */
p, .count {color: var(--text);} /* color of text */
.profile .friends .person p {color: var(--names); font-weight:1;} /* color of names, and friends counter */
nav label{color: var(--links);} /* color of search */
.details p:last-child{color: var(--text);} /* where the last login and status appears */
@media(max-width: 600px){ /* MOBILE */

.container{
  width:100%!important;
}
}
.container{
    width:40%;
}

/* this is where the body ends up being styled */

body{
    background-image: url('');
    background-size: contain;
    background-position: center;
    background-color: black;;
    text-align: center;
}
/* this is where your name appears */
h1{
    color:darkred;
    font-family: 'Astloch', cursive; 
    font-size: 40px!important;
    text-shadow: 2px 2px 3px darkred;
}

/* the navigation is adjusted here */
nav{
    background-color: transparent;
    border: none;
    border-radius: var(--curve);
    text-align: center;
}

nav .top{
    color: darkred; /* line that appears between help/login/signup */
}

nav .top, nav .links {
    background-color: transparent;
    border-radius: var(--curve);
}
nav .links{
    border-top:1px solid darkred;
    border-bottom:1px solid darkred;
}
/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ⸸";
    color: red;
}

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
    filter: brightness(0) saturate(100%) invert(10%) sepia(74%) saturate(5025%) hue-rotate(9deg) brightness(92%) contrast(121%) !important; 
    height:30px;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid darkred!important;
    color:darkred!important;
}

button{
    border: 0px solid firebrick!important;
    font-family: 'IM Fell DW Pica SC', serif;!important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color: darkred !important;
}

/* the online symbol and text */

.online{
    margin:auto;
    padding-bottom: 5px;
    content: url(https://dl.glitter-graphics.com/pub/104/104607x61kd02dl0.gif);
}

/* font family for the headers, navigtion links, links, body text */

a, p, nav label, .section{ 
    font-family: var(--font-family); 
    font-size: 12px!important;
    font-weight: 1;
}
h2, h3, h5{
    font-family: var(--font-family);
    font-size: 12px!important;
    font-weight: 1;
}

/* the hr code.
the hr is the horizontal line when you want to 
separate important info or add a break in your paragraphs*/

hr{
    height:1px;
    background: red;
    border: none!important;
}

/* this is where you adjust the borders and background */
.blurbs, .mood, .friends, .contact, .profile .table, .blog-preview, .profile .table-section{
    border-radius: var(--curve);
    border: var(--borders)!important;
    background-color: transparent!important;
}
.comment-replies{border:1px solid darkred;} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 4px double darkred;} /* line in between comment replies*/
.comment-reply p{
 margin: 0;
 text-align: left;
}

/* your interest and comments table row background color */
td{
    background-color: transparent!important;
}

/* the middle section of your profile background color*/

main{
    background: transparent;
    border-radius: var(--curve);
    border: transparent;
    outline: none;
}

/* the interest table */
.table-section{
    border:none !important;
    border-radius: var(--curve) !important;
}

/* the header section of the boxes */
.profile .contact .heading, .profile .table-section .heading,.home-actions .heading, .profile .friends .heading{
    background: url('https://media.giphy.com/media/jQS9YkJXofyeI/giphy.gif');
    background-size: contain;
    border: 1px solid black;
    font-family: 'IM Fell DW Pica SC', serif;
    font-size: 16px!important;
    font-weight: bold;
    color:black;
    text-align: center;
    text-shadow: 1px 1px 5px black;
}
/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */

.profile-info {
    background-color: transparent !important;
    border: var(--borders) !important;
    border-radius: var(--curve) !important;
}

/* adjusting images borders and adding styling if you want to */
.profile-pic img{
    background: url('https://media.giphy.com/media/jQS9YkJXofyeI/giphy.gif');
    background-size: 30%30%;
    padding:5px;
}
.profile-pic {
    margin:auto;
}
/* you can add text-align:center; if you want your friends to be centered */
.friends-grid{
    text-align: center;
}
.profile .friends .person img:not(.icon){
    border-radius: var(--curve) !important;
    height:100px;
    width:100px;
}

/* custom contact */
.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 me */
 content: "✚"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
 /* faves? */
 content: "☑"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
 /* chit chat */
 content: "⥂"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
 /* forwardd */
 content: "➨"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
 /* instant chat */
 content: "✉"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
 /* block */
 content: "✘"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
 /* group me */
 content: "❧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
 /* report */
 content: "☠"
}

/* this is the comments table scroll code. 
you can delete this if you don't want a scroll box */

.comments-table {
    display: block;
    height: 600px!important;
    overflow-y: scroll;
    border: 0px dotted #000 !important;
    outline: none !important;
    border-radius: none;
    padding:5px;
}
.comments-table td:first-child *{
    color: var(--text);
}
.comments-table td:first-child{
    background-image: url('');
    background-size: cover;
    background-position: center;
}
.comments-table td{
    background-image: url('');
    background-size: cover;
    background-position: center;
    border: 2px solid black;
    padding:10px;
    border-radius: 0px;
}

footer{
    background: transparent;
}
footer a{
    color: firebrick;
}
footer p{
    color: red;
}

/* . hidden things */
.blurbs .heading {display:none;} /* hides the blurbs title */
.profile .left .table-section:last-child {display:none;} /* hides the links section */
.url-info {display:none !important;} /* hides url box */
.details-table td:first-child{display:none;} /* hides general, music, etc titles */
.blurbs .inner .section:nth-child(2) {display:none;} /* hides the "who I'd like to meet" */
.blog-preview h4 {display:none;} /*hides blog names */
</style>

<style>
/* Force scrollbars onto browser windows. 
Doesn't work in Firefox */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px dotted darkred;
}
::-webkit-scrollbar-thumb {
    background: darkred; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: red;  
}
</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 3 of 3 comments ( View all | Add Comment )

cory charbonneau

cory charbonneau's profile picture

using :)


Report Comment

nascar daughter

nascar daughter's profile picture

haiiii I'm using one of your layouts its pretty sick thank uuuuuuu


Report Comment

nascar daughter

nascar daughter's profile picture

haiiii I'm using one of your layouts its pretty sick thank uuuuuuu


Report Comment