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

C0d3d._	1742712308 using Report Comment
hesitant️vamp	1742685962 Using! Report Comment
Noa	1738498580 Love this <3 using rn! Report Comment
vee	1731114611 using Report Comment
Beetle Bugsly	1729489033 using! Report Comment
sillybilly	1728358310 using !! Report Comment
Aoba Seragaki	1727967651 Using!! Report Comment
blamejohn	1727915359 using!! Report Comment
ozymandias ︎︎	1726701301 Using! Report Comment
Eun Adores	1725858628 using! Report Comment
goober ⚞•⚟	1725524536 using! Report Comment
Vic murmur	1724428259 using! Report Comment
Doudou	1723075840 usinggg Report Comment
Emmy! (#1 Alolan Raichu fan + Augustine defender)	1721610920 Using :3 Report Comment
<﹖>	1721251032 using :3 Report Comment
𝚜𝚊𝚐𝚎ᶻ 𝗓 𐰁 (inactive)	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