basic brown

Tags: brown; simple

Description:

i was bored and decided to play around with css. it was my first time making a layout from scratch so its not the best plus it took me like a day. pls leave a comment if u like it and itd be nice to get some credit on ur profile if you use it

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');

:root {
    --logo-blue: ;
    --darker-blue: #3d2b1f;
    --lighter-blue: #3d2b1f;
    --even-lighter-blue: #3d2b1f;
    --dark-orange: #3d2b1f;
    --light-orange: transparent;
    --even-lighter-orange: #3d2b1f;
    --green: #3d2b1f;
    --headers: #836953;
    --links: #836953;
    --hover: #987654;
    --text: #ffffff;
    --names: #836953;
    --lightest-blue: black;
}

h3, h4, h5, .url-info b {color: var(--headers) !important;} /* headings */
a {color: var(--links) !important; font-weight: bold;} /* color of links */
a:hover {color: var(--hover) !important;} /* color of links on hover */
p, h2 {color: var(--text) !important;} /* color of text */
h1, .friends a p {color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p {color: var(--hover) !important;} /* color of names on hover */
nav label {color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important; text-align: center;} /* aboutme & want2meet headings */
.comment-reply:not(:first-child) {border-top: 3px double hotpink;} /* line in between comment replies*/
.count {color: #836953;}

/* get custom cursors at https://www.cursors-4u.com/ */
* {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important;}

/* intro gif or img */
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.kym-cdn.com/photos/images/newsfeed/001/277/798/41e.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}

h1, h2, h3, h4, h5, a, p, nav label, .section{ 
    text-transform:lowercase !important; /* this makes everything lowercase */
}

h4 {
   padding-left: 5px;
}

.profile h1 { /* your name that appears above ur pfp */
    font-size: 25px;
}

body{ /* background of the whole page */
    background-color: #3d2b1f;
    background-image: url(https://i.pinimg.com/originals/43/7c/b7/437cb739d14912acd84d65ee853b9067.gif);
}

/* float effect on pfp and friends pfps */
.profile-pic, .profile .friends .person img:not(.icon), .profile .friends .person p, .profile h1{ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
}    

/* custom online thing */ /*use filter to change color, its og green. you can generate the filter here https://angel-rs.github.io/css-color-filter-generator/ */
.online {
    content: url(https://supplies.ju.mp/assets/images/gallery27/77f15a92.gif?v=cb9dd7fb);
    filter: brightness(0) saturate(100%) invert(39%) sepia(45%) saturate(291%) hue-rotate(346deg) brightness(96%) contrast(87%);
}

/* deletes 'x's links' section. delete this to show it */
.profile .left .table-section:last-child {
    display:none;
}
.profile .left div:nth-of-type(5) .heading{
   display:none;
}

/* deletes 'x's blurbs' heading.delete this to show it */
.blurbs .heading{display: none !important;}

/* deletes the url box. delete this to show it */
.url-info {
    display: none;
}

/* nav. aka the top of the page */
nav .top { /* part where the spacehey logo is and all */
    background: black;
    padding: 15px 10px 14px 10px;
    display: flex;
    border-radius: 20px;
    margin-bottom: 10px;
}

nav img.logo { /*spacehey logo. again, use filter to change color if u want */
    filter: invert(0%);
    !important;
}

.search-wrapper input[type=text] { /* search bar */
    background-color: rgba(0, 0, 0, 0.0) !important;
    border-color: white !important;
    color: white !important;
    border-radius: 1px !important;
    font-weight: bold;
}

button { /* search button */
    border-radius: 0px !important;
    border: 0px solid green!important;
    font-family: var(--font-family) !important;
    background-color: rgba(0, 0, 0, 0.0) !important;
    color: #836953!important;
    font-weight: bold;
}

nav label { /* color of the links at the top ex 'home' etc */
 color: white !important;
 font-weight: bold;
}

ul.links { /* part of the nav with the links */
 border-radius: 20px;
 background-color: black;
 font-size: 5px;
 text-align: center;
}

/* main structure of your profile */
main {
 margin-top: 10px;
 background-color: black;
 border-radius: 20px;
}

/* removes the headings in some of the boxes because it interfered with the rounded corners */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    background: transparent;
}

/* 'contacting x' box */
.contact {
    border-radius: 20px;
}
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
/* you can change the emojis on the contacting options */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* Add to Friends */
	content: "🦔"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "🧸"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🐌"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "👜"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "🦌"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🦦"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "💼"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🐻"
}

.table-section {
   border-radius: 20px;
}

table.details-table {
    padding-left: 8px;
    padding-right: 8px;
}

/* comment section */
.comments-table {
    display: block;
    height: 340px!important;
    overflow-y: scroll; /* for the scroll box */
}

table.comments-table {
    border: #3d2b1f;
}

.comment-replies {
    padding: 0 5px;
    border: 1px solid black
}

/* to change the tittles in the interests section */
.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child p { font-size:0; }
.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child p:before { content:"games"; font-size:.7rem; }

.table-section:nth-last-child(2) .details-table tr:nth-child(4) td:first-child p { font-size:0; }
.table-section:nth-last-child(2) .details-table tr:nth-child(4) td:first-child p:before { content:"shows"; font-size:.7rem; }

.table-section:nth-last-child(2) .details-table tr:nth-child(5) td:first-child p { font-size:0; }
.table-section:nth-last-child(2) .details-table tr:nth-child(5) td:first-child p:before { content:"other"; font-size:.7rem; }

.table-section:nth-last-child(2) .details-table tr:nth-child(6) td:first-child p { font-size:0; }
.table-section:nth-last-child(2) .details-table tr:nth-child(6) td:first-child p:before { content:" "; font-size:.7rem; }

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

footer {
 background-color: black;
 border-radius: 20px;
}
</style>
<style>
/* Force scrollbars onto browser window */

/* Scrollbar styles */

::-webkit-scrollbar {
    width: 10px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 1px;
    border: 1px black;
}

::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: black;
}

</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 36 comments ( View all | Add Comment )

vee	1731114611 using Report Comment
Beetle Bugsly	1729489033 using! Report Comment
OL1VER💥	1728358310 using !! Report Comment
Viktor	1727967651 Using!! Report Comment
shellywhelly	1727915359 using!! Report Comment
ozymandias ︎︎	1726701301 Using! Report Comment
Eun Adores	1725858628 using! Report Comment
goober ⚞•⚟	1725524536 using! Report Comment
alne murmur	1724428259 using! Report Comment
estherisher	1723075840 usinggg Report Comment
EmmaノEmmy (≧∇≦)	1721610920 Using :3 Report Comment
<﹖>	1721251032 using :3 Report Comment
𝚜𝚊𝚐𝚎ᶻ 𝗓 𐰁	1718502147 planning on using :D Report Comment
whatsnacks	1716596107 using!! will credit you in my profile too! tysm <3 Report Comment
Alessio	1711414938 USING!! Report Comment
<3	1711189114 using <3 Report Comment
9lumzz	1710641720 Using <3 Report Comment
mach!inator	1710401116 THIS IS SO GOOD ^_^ WILL BE USING!! THANKS!! Report Comment
anwaarji	1709065553 I will be trying this out! Thank you. Report Comment
𝓕𝓻𝓮𝓪𝓴𝔂nines	1704440863 Using!! Report Comment