Published by ImaZombie

published 1691255340
updated 1705626147

View Blog View Profile Report Blog Entry

HTML/CSS code snippets, layout tutorial, page resources ( ❛ ᴗ ❛ ) WIP

HI!!! on this blog there are code snippets and tuts on how to make ur own layout (if its ur first time coding a layout make sure to read carefully so you dont make any mistakes ;3)

the first bit of code is a simple layout with custom cursor, online now icon, contacting table icons, colors, background image, profile container, header and footer

<style>

font-size: 150%;

}

h1,h2,h3,h4,h5{

font-size: 200%;

}

body {

}

.profile {

background-color: rgb(insert rgb);

}

/* ignore these */

.profile .blurbs .heading,

.profile .friends .heading{

background-color: rgb(insert rgb);

color: black;

}

/*ignore these */

.profile .contact .heading,

.profile .table-section .heading{

background-color: black;

color: rgb(insert rgb);

}

/*header*/

main:before {

width: auto;

margin-bottom: 25px;

border: 1px solid black;

height: 120px;

display: block;

content: "";

background-position: center center;

background-size: cover;

}

/*footer*/

footer {

border-radius: 15px;

color: white;

}

table.comments-table td {

color: rgb(insert rgb);

}

/*online now icon*/

.online { visibility: hidden; } .online img { content: url("insert url here"); animation-name: none; visibility: visible; height: 25px; width: 90px;

}

/*color*/

:root {

--logo-blue:black;

--darker-blue: black;

--lighter-blue: black;

--even-lighter-blue: ;

--lightest-blue: ;

--dark-orange: black;

--light-orange: white;

--even-lighter-orange: white;

--green: pink;

}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

background-color: black;

color: white;

}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */

.profile .table-section .details-table td {

background-color: black;

color: white;

}

/* headings on the right */

.profile .blurbs .heading, .profile .friends .heading {

background-color: black;

color: white;

}

</style>

<style>

/*contacting icons*/

.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 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: "✩"

}

</style>

/*cursor*/

first i will be going over how to add images (background, contacting icons, online now icons, cursor, header and footer)

on the code where is says "url here" or "insert url here" thats wher u will add your url (example. (url here) -----> (https://i7.glitter-graphics.org/pub/745/745447eyod5wufg2.gif))

how you would get those url you double click or right click on the image you want ,click "open image in new tab", and on the search bar on top copy the "https" code into where it says "url here" or "insert url here"

if you want gifs as your contacting icons change the "✩" to

url('insert url here')

(i will leave page resources at the bottom of this blog)

now onto the colors there very simple to do

:root {

--logo-blue:black;

--darker-blue: black;

--lighter-blue: black;

--even-lighter-blue: ;

--lightest-blue: ;

--dark-orange: black;

--light-orange: white;

--even-lighter-orange: white;

--green: pink;

}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

background-color: black;

color: white;

}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */

.profile .table-section .details-table td {

background-color: black;

color: white;

}

/* headings on the right */

.profile .blurbs .heading, .profile .friends .heading {

background-color: black;

color: white;

}

this part of the code is where the main colors are, you can change the colors to such as simple ones like ,red, black, white ec. if you want the colors to be darker/lighter you write them like ,darkred ,lightblue, but i like to use hex or rgba/rgb sites (again all the sites will be listed at the end)

snippets ( ᵔ ᴗ ᵔ )

this part of the blog will be snippets of css/html that you might want to add to ur profile to make it look cooler!

loading screen

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url(' (insert gif link here) ');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
nav, footer {
	margin: 1em;
	position: relative;
	box-shadow: 5px 8px 10px #0006;
}

you will place this piece of code right above your footer

place you gif url in where it says (insert gif link here) and use the same technique as the one listed above :3

animated profile picture

<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: URL(" (link for gif here) "); display: inline-block; content:"" }

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */

</style>

you will place this piece of code right above your first opening style tag <style>

and once again place you gif url in where it says "link for gif here"

rounded pfp/star pfp

rounded pfp

you can mess around with the roundness of the pfp by changing where its says 500px (0 meaning the most sharp)

.profile-pic {

border-radius: 500px;

overflow: hidden;

}

.profile .friends .person img {

border-radius: 500px;

}

star pfp

.general-about .profile-pic img{
 clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%)
}


borders
the 4px is how thick the border is ,solid is the style of border, black is the color border, the border-radius part where it says 0px is the roundness of the border

.profile .contact, .profile .url-info, .profile .table-section, .blurbs, .friends, 
.profile-info{

border: 4px solid black !important}
border-radius: 0px
}

nav links (the home/browse ec. section)

.links li a .icon  { /*the pallet next to art section*/
  display: none;
}
.links .special a:link, .links .special a:visited  { /*color of art button*/
  color: #dde5fd;
}

.links .special a:hover { /*hover color of art button*/
  color: #0e1131;
}
    nav .links a {
    text-decoration: none;
    color: #dde5fd; /* Change Link color*/
    font-size: 0.98em;
}
    
nav .links a:hover  {
    color: #0e1131; /* Change Link hover color*/
    text-decoration: underline;
}

nav .links {
    background-color: rgba(245, 39, 145, 0);/* Change background color 
behind links*/
}
nav .links a {
     text-shadow: 0 0 3px #373d86; /*nav links shadows*/
}

username box/design

h1 {

font-size: 30px!important;

line-height: 80px;

font-family: 'Silkscreen', cursive;

font-weight:normal;

text-transform: uppercase;

letter-spacing: -1.5px;

color: #2a3d5e;

text-align:center;

padding-bottom:0px;

padding-top:0px;

text-shadow: 0 0 5px ;

background: #000;

background-image:url("url here");

background-position: center;

background-size: 100%;

border: solid 3px #a9b9e8;

}

the username desgins looks like :

but you can edit it to look however you want

tv lines on your profile

where it says (rgba(13, 0, 103, 0.17) 50%, rgba(13, 0, 103, 0.39) 50%)

that is the color of the tv lines the site i use is listed at the bottom you can change the color however you want but make sure that you turn the transparency down so you can still be able to your profile

}

html:before {

content: " ";

display: block; position: fixed;

top: 0; left: 0; bottom: 0; right: 0;

background: linear-gradient(rgba(13, 0, 103, 0.17) 50%, rgba(13, 0, 103, 0.39) 50%);

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

}

flip profile

put this code above your <style> tag

<style>

/*flip profile*/

.profile{

direction: rtl;

}

.blurbs, .profile .table-section .heading, .blog-preview a, .friends, .general-info, .contact, .url-info, .details-table, .details p, .mood{

direction: ltr;

}

</style>

glowing username

you can chose ur own colors using a hex color picker

{

color: /*the username glow and shadow*/

{ color: hotpink;

//text-shadow: 1px 1px #ffd1dc;

};

text-shadow: 2px 2px 3px #ffd1dc, 0 0 25px #ffd1dc, 0 0 5px black;

}

replacing the url with a image/gif

.profile .url-info{ background: url('https://i.imgur.com/3DTuHY6.png'); /*replace pic here*/ background-position: center; background-size: cover; border: var(--borders)!important; border-radius: var(--curve); height: 400px; }

.url-info p{ opacity: 0.0; }

}

making background fit and making the main profile image

background image:

body{background:url("https://i.pinimg.com/originals/20/63/4b/20634beaedf47ec6a0a79d003604f6f2.gif") no-repeat fixed; background-size:cover;}

}

main profile image:

main{

background: url( image url here);

)

contacting table

you can always delete the text shadow if you dont want it