how to code a profile layout :)

hi guys! this is js a little tutorial on how to code...hehehehee...and also some pieces of code i use for certain stuff and things

MAKE SURE YOUR CODE IS IN BETWEEN THE <STYLE> AND </STYLE> TAGS!!!!!

for example:

<style>

body{

blah blah blah

blah blah blah

}

</style>

thats the most important..because your code wont work without it...

now..what does each piece of code mean?

body - the body is where you put cursor code, your font family for the body text and all that...its basically the base of your code. this includes the background behind the profile row

.profile-row - the profile row is basically the main part of your profile, where all your info and stuff sits, like your table section and your bio and photos and all that stuff. 

.module .heading, - this is the color heading of your sections liek the bio and the photos and the videos and all that stuff....you're going to have to include MORE than just the module part but dont fret I WILL include that stuff later

.module - this is the actual like body section OF the individual sections, its where u'll put the background code and the font color and stuff

so next is the actual code. now im sorry but im NOT going to give you full code since i fear this is supposed to be for you to learn from...and if i gave it to you that wouldnt be very helpful to your learning...BUT I BELIEVE IN YOU!!!! (also its not very hard)

within the body{ }

put background-image: url('IMAGE-URL'); OR background-color: #HEXCODE; based on what you want it to be 

add font-family:"FONT",  ;

font-size: 15px; or whatever size you want it to be

cursor: url('');

and color: #HEXCODE; which is the text color!

within the .profile-row{ }

put background-image: url(''); OR background-color: #HEXCODE; 

psstt....if you dont want a profile row background dont include this code!

this part is very annoying and tedious so just copy and paste all this into your code:

  .module .heading, .friends .heading, .table-section .heading, .profileInfo .heading, .contact .heading, .blurbs .heading, .section .heading{

    background-color: HEXCODE !important;

    font-family:"font", ;

    font-size: 18px;

    text-align: center;

    color: #HEXCODE !important;

  }

 .table-section,

.friends,

.blurbs,

.module,

.profileInfo 

.contact{

    background-image: url('https://i.pinimg.com/736x/dd/3b/3d/dd3b3d9c70bdfbd5dc7dbea35f992bf4.jpg');

    border: 2px grey solid !important;

    border-radius: 1px !important;

    color: #HEXCODE !important;

  }

your welcome...

next the blog and comment section:

.blog-preview .heading{ }

background-color #HEXCODE; OR background-image: url(''); (i recommend using a color not an image)

.blog-preview { }

background-image: url(''); OR background-color: #HEXCODE;

border: 1px solid/dashed/dotted #HEXCODE; (pick any of the 3!)

border-radius: 1px; (determines how round the box will be)

#comments, .comments-table td {

  background-image: url("https://i.pinimg.com/736x/60/ef/24/60ef2487bb2e29cde96cea529af17c4d.jpg") !important;

  background-size: cover !important;

  background-position: center center !important;

  background-repeat: no-repeat !important;

}

for links you want to do this:

   a, .profile a, .table-section a, .module a{

    color: #COLOR HEX !important;

  }

  and for contact:

  .contact .heading{

  background-color: black;

  color: #COLORHEX !important;

  text-align: center;

  }

.contact{

background-image: url(''); OR background-color #COLORHEX;

    border: 2px #8e3ccb solid !important;

    border-radius: 1px !important;

    color: #f7f7f7 !important;

  }

then for the nav bar and header

.myspace-header .top-nav{
background: #COLORHEX;

}

.myspace-header .main-nav-wrapper{

background: #COLORHEX;

}

.myspace-header .nav-logo{

content: url('');

  width: 180px;

  height: auto;

}

thats all the main stuff, of course you can add more or less!!!!!! thers also a profile elements section where a lot of good pieces of code are :) thats where i found code for my loading screen and other things

some sources i use:

CURSORS

i use pintrest for images and gifs!

you can also find many pixels, blinkiex, stamps and what-not on neocities! ill link some of my favs (WILL UPDATE WITH MORE LINKS!! )

https://pixelsafari.neocities.org/

https://adriansblinkiecollection.neocities.org/

https://blinkiecollecti0n.neocities.org/

https://www.glitter-graphics.com/

thats all!!!! if you have any questions comment and i will respond...ill also update this with anything else i feel needs to added :)