HELPFUL LINKS 

• TO PREVIEW YOUR LAYOUT CODING WHILE EDITING: [Nein-MC]
• FOR HEX & RGB CODES: [HTML Color Codes]
• TO IMPORT FONT FOR PROFILE HEADER: [CDN Fonts] OR [Google Fonts]
• TO ADD A CUSTOM 'ONLINE NOW' IMAGE: [Jody Marie 💖's Blog]
• TO ADD A CUSTOM CURSOR & CUSTOM SCROLLBAR: [Jody Marie 💖's Blog]
• TO ADD A HEADER/BANNER IMAGE TO THE TOP OF YOUR PROFILE LAYOUT: [Jody Marie 💖's Blog]
• TO FLIP PROFILE: [Jody Marie 💖's Blog]
• TO FIND OTHER HELPFUL WEBSITES TO HELP MAKE YOUR PROFILE LAYOUT: [Jody Marie 💖's Blog]

PROFILE LAYOUT TEMPLATE

*Tip: Open Nein-MC in a new tab, copy code below, & paste code into the first box on the Nein-MC website. Then, change & add the hex codes/URLs/font names/headers that need to be changed or added. You can see all the changes you make as you make them by using the Nein-MC website. Once you are satisfied, highlight your entire profile layout code from the first box, copy it, & then paste it into your 'About Me' section when you go to Edit Profile. Then click Save! 😊

<style>/* Profile Design Info */

    :root {

        --logo-blue: #HEX CODE GOES HERE; /*CHANGE COLOR OF SPACEHEY BAR AT TOP */

        --darker-blue: #HEX CODE GOES HERE; /*CHANGE COLOR OF PROFILE LINKS */

        --lighter-blue: #HEX CODE GOES HERE; /*CHANGE COLOR OF NAVIGATION BAR */

}

/* Profile Background CSS Code For Large Background Image */

    body

        {background: url("URL GOES HERE"); /* CHANGE BACKGROUND IMAGE */

background-position: left;

background-size: 100%;

background-repeat: no-repeat;

background-attachment: fixed;}

}

/* Profile Container Info */

main {

        background: #HEX CODE GOES HERE !important; /* CHANGE BACKGROUND COLOR OF PROFILE WHERE TEXT GOES */

        color: #HEX CODE GOES HERE; /* CHANGE FONT COLOR OF PROFILE TEXT */

        border-radius: 0 0 10px 10px; /* ROUND BOTTOM OF PROFILE EDGES */

    }

.container {

        border-radius: 15px 15px 0 0;

        overflow: hidden;

        margin-top: 30px;

        padding: 10px;

    }

* {font-family: NAME OF FONT GOES HERE;} /* CHANGE FONT STYLE OF PROFILE TEXT - EXAMPLES: Monospace, Verdana, Arial, etc... */

/* Profile Footer Info*/

    footer {

        border-radius: 15px; /* ROUND EDGES OF FOOTER */

        background: #HEX CODE GOES HERE; /* CHANGE BACKGROUND COLOR OF FOOTER */

        color: #HEX CODE GOES HERE !important; /* CHANGE FONT COLOR OF FOOTER TEXT */

        display: block !important;

    }

footer .links a{color: #HEX CODE GOES HERE !important;} /* CHANGE FONT COLOR OF FOOTER LINKS */

    footer .links a:hover{color: #HEX CODE GOES HERE !important;} /* CHANGE FONT COLOR OF FOOTER LINKS WHEN HOVERING */

.profile .contact,

    .profile .url-info,

    .profile .table-section,

    .home-actions {

        border: none;  /* REMOVES BORDER FROM CONTACT, URL INFO, & PROFILE TABLES */

    }

</style>

<style>/*Search Users Box */

    .top input{border-radius: 15px 15px 15px 15px;} */ ROUNDS SEARCH BOX AT TOP OF PROFILE */

</style>

<style>/*Buttons */

    button{

    border-radius: 25px 25px 25px 25px !important; /* ROUNDS BUTTONS ON PROFILE, LIKE ONE BY SEARCH BAR AT TOP OF PROFILE */

color: #HEX CODE GOES HERE; /* CHANGE FONT COLOR OF BUTTON */

font-weight: bold; /* CHANGE WEIGHT OF FONT ON BUTTON */

    background-color: #HEX CODE GOES HERE !important; /* CHANGE BACKGROUND COLOR OF BUTTON */

}

</style>

<style>/* Navigation Bar */

    nav {

        border-radius: 15px 15px 0 0;

        overflow: hidden;

    }

    nav .links a{

        color: #HEX CODE GOES HERE !important; /* CHANGE FONT COLOR OF NAVIGATION LINKS */

        text-shadow: none !important;

font-weight: bolder;

    }

    nav .links a:hover {color: #HEX CODE GOES HERE !important;} /* CHANGE FONT COLOR OF NAVIGATION LINKS WHEN HOVERING */

    nav .links {

        text-align: center; /* CHANGE ALIGNMENT OF NAVIGATION LINKS */

        padding: 3.5px 3.5px 5.5px 3.5px;

        font-size: 70%; /* CHANGE FONT SIZE */

    }

</style>

<style>/* Links */

    a:hover {color: #HEX CODE GOES HERE;} /* CHANGE FONT COLOR OF PROFILE LINKS WHEN HOVERING */ 

</style>

<style>/* Profile Name Header */

@import url('URL GOES HERE'); 

.profile .left h1{ 

font-family: 'FONT NAME GOES HERE', sans-serif; /* CHANGE FONT STYLE ACCORDING TO ONE CHOSEN FROM IMPORTED URL FONT */

font-size: 40px; /* CHANGE SIZE OF PROFILE NAME */

color: #HEX CODE GOES HERE; /* CHANGE FONT COLOR OF PROFILE NAME */

text-align: center; /* CHANGE ALIGNMENT OF PROFILE NAME */

overflow-wrap: break-word; 

}

</style>

<style>/* Profile Picture, Profile Mood, & Profile URL */

.profile-pic {border-radius: 500px; overflow: hidden;} / *MAKES PROFILE PIC ROUND */

.profile .mood {color: #HEX CODE GOES HERE;} /* CHANGE PROFILE MOOD FONT COLOR */

.profile .url-info {color: #HEX CODE GOES HERE;} /* CHANGE PROFILE URL INFO FONT COLOR */

</style>

<style>/ * Custom Online Now Image  - DELETE THE FOLLOWING CODE IF YOU DON'T WANT TO CHANGE THE DEFAULT ONLINE NOW IMAGE */

    .online {visibility: hidden;} 

    .online img { 

        content: url("URL GOES HERE"); 

        animation-name: none; 

        visibility: visible; 

        height: 15px; /* CHANGE HEIGHT OF CUSTOM ONLINE ICON IMAGE */

        width: 60px; /* CHANGE WIDTH OF CUSTOM ONLINE ICON IMAGE */

display: block;

margin-left: auto;

margin-right: auto;

    }

</style>   

<style>/* Headers Colors */

    .heading {

        padding: 5px 0 !important;

        margin-top: 15px;

        margin-bottom: 10px;

        background-color: #HEX CODE GOES HERE !important; /* CHANGE BACKGROUND COLOR OF HEADERS */

        color: #HEX CODE GOES HERE !important; /* CHANGE FONT COLOR OF HEADERS */

        text-align: center; /* CHANGE TEXT ALIGNMENT OF HEADERS */

        border-bottom: 2px solid white; /* CHANGE BORDERS OF HEADERS */

border-radius: 10px 10px 10px 10px; /* ROUNDED HEADER EDGES */

    }

.profile .blurbs .section h4{color: #HEX CODE GOES HERE; font-weight: bolder;} /* CHANGE FONT COLOR OF 'ABOUT ME', 'WHO I'D LIKE TO MEET', & PROFILE INTERESTS HEADERS, SUCH AS 'GENERAL', 'MUSIC', ETC... */

</style>

<style>/* Interests Table Info */

    table.details-table {border-collapse: collapse;} /* GETS RID OF BORDER FOR INTERESTS TABLE */

    table.details-table td {background-color: #HEX CODE GOES HERE !important;} /* CHANGE COLOR OF INTEREST TABLE BACKGROUND AREAS */

.details-table td:first-child {color: #HEX CODE GOES HERE !important;} /* CHANGE FONT COLOR OF INTEREST TABLE TEXT */

</style>

<style>/* Blog Info */

.blog-preview h4 {color: #HEX CODE GOES HERE;} /* CHANGE FONT COLOR OF BLOG HEADER */

    .blog-preview p {

        background-color: none;

        padding: 5px 10px;

        border-radius: 10px;

        color: #HEX CODE GOES HERE; /* CHANGE FONT COLOR OF BLOG TITLES */

font-weight: bolder; /* CHANGE FONT WEIGHT */

    }

    .blog-preview p a{color: #HEX CODE GOES HERE !important;} /* CHANGE FONT COLOR OF BLOG LINKS */

    .blog-preview p a:hover,

    .blog-preview p a:active,

    .blog-preview p a:focus{

        color: #HEX CODE GOES HERE !important; /* CHANGE FONT COLOR OF BLOG LINKS WHEN HOVERING */

    }

</style>

<style>/* Friends Info */

    .profile .friends .heading{color: #HEX CODE GOES HERE;} 

.profile .friends{text-align: center;}

    .count {color: #HEX CODE GOES HERE;} /* CHANGE FONT COLOR OF NUMBER OF PROFILE FRIENDS */

    .profile .friends .person p{color: #HEX CODE GOES HERE !important;} /* CHANGE FONT COLOR OF FRIEND LINKS */

.profile .friends .person img {border-radius: 500px;} /* ROUNDS FRIEND PROFILE IMAGES */

    .profile .friends .person img:not(.icon) {

        border-radius:15px; /* ROUNDS BORDER OF FRIEND PROFILE IMAGES */

        border: 2px solid rgba(255, 255, 255, 1); /* CHANGE BORDER STYLE AROUND FRIEND PROFILE IMAGES BY CHANGING RGB CODE, WHICH ARE THE FIRST THREE NUMBERS IN THE PARENTHESES */

        box-shadow: 1px 0px 7px 2px rgba(255, 255, 255, 0.71); /*CHANGE GLOW COLOR AROUND FRIEND PROFILE IMAGES BY CHANGING RGB CODE, WHICH ARE THE FIRST THREE NUMBERS IN THE PARENTHESES - CAN DELETE BOX-SHADOW CODE IF YOU DON'T WANT THERE TO BE A GLOW */

    }

/* ALLOWS THE FRIEND PROFILE IMAGE TO GET BIGGER ON HOVER */    

    .profile .friends .person img:not(.icon):hover { 

        transform: scale(1.1);

        transition: 0.5s ease;

    }

    .profile .friends .person img:not(.icon) {transition: 0.5s ease}

</style>

<style>/* Comments Info */

    table.comments-table td {

        background-color: #HEX CODE GOES HERE !important; /* CHANGE BACKGROUND COLOR OF COMMENTS TABLE */

        border: none; /* GETS RID OF BORDER FOR COMMENTS TABLE */

    }

    .comments-table td:first-child img {

        width: 80px; /* CHANGES WIDTH OF COMMENT PROFILE IMAGES */

        border-radius: 500px; / *ROUNDS COMMENT PROFILE IMAGES */

    }

.comments-table{

        display: block;

        height: 350px; /* CHANGE HEIGHT OF COMMENT TABLE SCROLLBOX */

        overflow-y: scroll;

        border: none;

    }

</style>

<style>/* Custom Profile Headers */

.contact .heading{ font-size:0; }

.contact .heading:before{ content: "CONTACT HEADER GOES HERE"; font-size:.9rem; font-weight: bolder; }

.w-40 .table-section:nth-last-child(2) .heading h4{ font-size:0;}

.w-40 .table-section:nth-last-child(2) .heading:before{content: "INTEREST HEADER GOES HERE"; font-size:.9rem; font-weight: bolder; }

.w-40 .table-section:last-child .heading h4{ font-size:0; }

.w-40 .table-section:last-child .heading:before{ content: "LINKS HEADER GOES HERE"; font-size:.9rem; font-weight: bolder; }

.blog-preview h4{ font-size:0; }

.blog-preview h4 a{font-size:.8rem;margin-left:5px; }

.blog-preview h4:before{ content: "BLOGS HEADER GOES HERE"; font-size:.9rem; font-weight: bolder; }

.blurbs .heading{ font-size:0; }

.blurbs .heading:before{ content: "BLURBS HEADER GOES HERE"; font-size:.9rem; font-weight: bolder; }

.blurbs .inner .section:nth-child(1) h4{ font-size:0; }

.blurbs .inner .section:nth-child(1) h4:before{ content: "About Me:"; font-size:.9rem; }

.blurbs .inner .section:nth-child(2) h4{ font-size:0; }

.blurbs .inner .section:nth-child(2) h4:before{ content: "Who I'd Like To Meet:"; font-size:.9rem; }

.friends .heading{ font-size:0; }

.friends .heading:before{ content: "FRIENDS HEADER GOES HERE"; font-size:.9rem; font-weight: bolder;}

.friends#comments .heading{ font-size:0; }

.friends#comments .heading:before{ content: "COMMENT HEADER GOES HERE"; font-size:.9rem; font-weight: bolder;}

</style>