Scribd
Upload
399 views4 pages

CD Layout Spacehey

The document contains CSS code for customizing the look of a profile page on a social media platform. It includes selectors for styling various page elements like the background, text, links, containers, profile picture, comments and more. The CSS is commented to explain what each section changes on the page for a customized light yellow and black theme.

Uploaded by

Anabelle
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
399 views4 pages

CD Layout Spacehey

The document contains CSS code for customizing the look of a profile page on a social media platform. It includes selectors for styling various page elements like the background, text, links, containers, profile picture, comments and more. The CSS is commented to explain what each section changes on the page for a customized light yellow and black theme.

Uploaded by

Anabelle
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<style>

/* this has the background and main font. cursor from https://www.cursors-4u.com/
^_^ */
body {
background-color:#F0E68C;
background-attachment:fixed;
background-size:20%;
color:black;
font-family:roboto;
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:black;

/* 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:gold;

/* 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:#F0E68C;
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:roboto;
text-transform:uppercase;
text-shadow:2px 2px 2px #000;
color:black;

/* 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:Black;
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:gold;

/* 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:gold;

/* 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 \(^_^)/ -->

You might also like