SCLPTURES

Tags: dark, simple, minimalist, customizable

Description:

uuh ok so im very much a css beginner so this might look a bit bad but its okay for a first try. i referenced a few other layouts (didnt copy and paste anything just kinda skimmed it) to see how everything works so i hope thats fine ... if you're gonna use this then you don't need to comment or credit, i added guides so you can modify as much as you'd like ^_^

expect frequent updates ^_^'

update: not a big change but i added a thing that turns your comments into a scrollbox so your page isn't 5000 feet long

update 2: another small change but it has a box shadow now ! i didnt know how to add it before and now i figured it out... DON'T JUDGE ME...!! also if u wanna add a banner this is a lifesaver ong https://blog.spacehey.com/entry?id=5169

Preview:

Code:

<!-- (c) Layout created by 𝑺𝑪𝑳𝑷𝑻𝑼𝑹𝑬𝑺 (https://layouts.spacehey.com/layout?id=99711) --> <!-- previewed using https://nein-mc.neocities.org/csstest/ ^_^ --> <style> /* this has the background and main font. cursor from https://www.cursors-4u.com/ ^_^ */ body { background-color:#1c1a19; background-image:url(https://file.garden/ZcHr2DRVyFfOaOPX/dark-wood.png); background-attachment:fixed; background-size:20%; color:white; font-family:georgia; cursor: url(https://file.garden/ZcHr2DRVyFfOaOPX/cursor.png), default; } /*adds a shadow to your whole profile container */ .container { box-shadow:4px 4px 5px #000; } /* changes the background colour for the big box that contains everything */ main { background-color:#525252; } /* changes the cursor when you hover on a link. cursor from https://www.cursors-4u.com/ ^_^ */ a:hover { cursor: url(https://file.garden/ZcHr2DRVyFfOaOPX/pointer.png), pointer; text-decoration:none; color:grey; } /* changes the main link color */ a { color:black; } /* changes the spacehey logo to fit the layout aesthetic, feel free to delete this whole section if you want the default one */ .logo { content: url(https://file.garden/ZcHr2DRVyFfOaOPX/IMG_3471.png); max-width:300px; filter:drop-shadow(2px 2px 1px #000) } /* changes the shadow of the spacehey logo on hover */ .logo:hover { filter:drop-shadow(2px 2px 2px #000); } /* changes the background colour for all the content containers */ .profile .friends, .profile .url-info, .profile .contact, .profile .table-section, .profile .blurbs, nav .top, nav .links, footer, .profile .table-section td { background-color:#313131; border:transparent; } /* turns your comments into a scrollbox for convenience */ #comments { grid-area: comments;height: 300px; overflow: scroll; overflow-x: hidden; } /* changes your username size and adds a shadow, if you dont want an uppercase username remove the "text-transform:uppercase;" ^_^ */ .profile h1 { font-size:40px; font-style:italic; text-transform:uppercase; text-shadow:2px 2px 2px #000; color:white; } /* adds a shadow to your profile picture and changes the border radius */ .profile-pic img { max-width: 150px; border-radius:30px 0px 30px 0px; filter:drop-shadow(2px 2px 1px #000); } /* changes the shadow of your profile picture on hover to give an effect of floating */ .profile-pic img:hover { filter:drop-shadow(3px 3px 2px #000); } /* changes the font for "now online" */ .online { color:white; text-shadow:1px 1px 2px #000; font-size:20px; } /* changes the "now online" text shadow on hover */ .online:hover { text-shadow:2px 2px 3px #000; } /* removes the little icon when you're online, feel free to delete this whole section if you still want it to show ^_^ */ .online img { display:none; } /* changes the header colour for all the containers */ .profile .blurbs .heading, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading { background-color:#3b3b3b; color:white; } /* changes the background colour for the comments */ .profile .comments-table td { background-color:#313131; border:transparent; } /* changes the colour of the links in the darker boxes on hover */ .profile .contact a:hover, .profile .friends .comments-table a p:hover, .profile .friends a:hover, .profile .friends .person p:hover, .profile .blurbs a:hover, .profile .table-section a:hover, .profile .url-info a:hover { color:grey; } /* changes all the text in the darker boxes to white */ .profile .table-section p, .profile .url-info p, .profile .blurbs p, .profile .contact a, .profile .table-section a, .count, .profile .friends .person p, .profile .friends p, .profile .friends a, .profile .blurbs a, .profile .url-info a { color:white; } /* changes the "view blog" link to white */ .profile .blog-preview h4 a { color:white; } /* changes the "view blog" link on hover */ .profile .blog-preview h4 a:hover { color:grey; } /* adds a shadow to the navigation links */ nav .links a:link { text-shadow:0px 0px 1px #000; } /* changes the navigation links on hover */ nav .links a:hover { color:white; text-decoration:none; text-shadow:1px 1px 2px #000; } /* changes the link colours on hover */ a:hover { color:grey; } /* changes the header colours in the blurb section */ h4 { color:white !important; text-align:center; } /* changes the text colour in the footer */ footer p, footer a { color:white } </style> <!-- the end \(^_^)/ -->

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.