⋆ ࣪ ִֶָ 🌱 jona 🐛 ׁ ۪'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

fox layout!!

comment using if you are using!

code is kinda wack and because the code makes text white it looks white but it is there but just copy it (not moble friendly)


<style>

/*CUSTOMIZE PROFILE*/


/*PROFILE BANNER INSTRUCTIONS - This is your profile banner. To keep with the style if you're making a banner, the dimensions are included in the sample art. But your image should automatically crop into the correct size. To change your banner, where it says "background-image", you want to copy the image address of your desired image, and paste it after the ' in the brackets. Make sure there is a ' before and after your url.*/


main:before {

width: 100%;

height: 300px;

display: block;

content: "";

background-image: url('https://i.pinimg.com/originals/35/47/dc/3547dc9342eb2081acf47096f65f8e6d.gif');

background-position: center center;

background-size: cover;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;

}

}

</style>


<style>

/*PROFILE BACKGROUND INSTRUCTIONS - Heres your profile background. Currently it is set ot the default color, but you can change this to any color you want by replacing the HEX code with a new one. Or alternitivley, add a URL in the URL section to add an image. If adding an image instead of a color, you may need to remove the color HEX code first so it doesnt overlap.*/


body {

background-color: #2b2e33;

}

body {

    background: url(https://i.pinimg.com/736x/4a/52/d3/4a52d30458eb47bc9ad0368d6205be0c.jpg)

fixed; background-size:cover;

main{


}

<style>

/* Global text color set to soft orange */

body, p, h1, h2, h3, h4, h5, h6, span, div, a, td {

    color: #FFA07A; /* Soft orange color */

}


/*CUSTOMIZE PROFILE*/

main:before {

width: 100%;

height: 300px;

display: block;

content: "";

background-image: url('https://i.pinimg.com/originals/35/47/dc/3547dc9342eb2081acf47096f65f8e6d.gif');

background-position: center center;

background-size: cover;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;

}

}


/*PROFILE BACKGROUND INSTRUCTIONS*/

body {

    background-color: #2b2e33;

}

body {

    background: url(https://i.pinimg.com/736x/4a/52/d3/4a52d30458eb47bc9ad0368d6205be0c.jpg)

    fixed; background-size:cover;

}


}



/* Global text color set to soft orange */

body, p, h1, h2, h3, h4, h5, h6, span, div, a, td {

    color: #a18d6d; /* Soft orange color */

}


/*CUSTOMIZE PROFILE*/

main:before {

width: 100%;

height: 300px;

display: block;

content: "";

background-image: url('https://i.pinimg.com/originals/35/47/dc/3547dc9342eb2081acf47096f65f8e6d.gif');

background-position: center center;

background-size: cover;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;

}

}


/*PROFILE BACKGROUND INSTRUCTIONS*/

body {

    background-color: #2b2e33;

}

body {

    background: url(https://i.pinimg.com/736x/4a/52/d3/4a52d30458eb47bc9ad0368d6205be0c.jpg)

    fixed; background-size:cover;

}



</style>





<style>

/*NON CUSTOMIZABLE ELEMENTS, ALTER AT OWN RISK.*/

.container > nav:nth-child(1) {

margin-left: -548px;

margin-right: -545px;

}

.container > main:nth-child(2) {

margin-top: 0px;

margin-left: -200px;

margin-right: -200px;

}


.profile-info {

border-left-width: 0px;

border-right-width: 0px;

margin-left: 550px;

}

.profile-info {

border-bottom-width: 0px;

border-top-width: 0px;

}

</style>


<style>

.details {

margin-top: -50px;

}


div.col:nth-child(3) > span:nth-child(1) > h1:nth-child(1) {

margin-left: 180px;

}

.details > p:nth-child(1) {

margin-right: 400px;

margin-top: 1px;

}

div.left:nth-child(1) {

margin-left: 325px;

}

.center > form:nth-child(1) {

margin-left: -220px;

margin-top: 10px;

}

.active {

margin-left: 340px;

}

</style>


<style>

.profile-pic {

margin-bottom: -105px;

}

.details {

margin-top: -190px;

}


</style>


<style>

.details > p:nth-child(2) {

margin-top: 20px;

}

.details > p:nth-child(1) {

margin-top: 33px;

}

.profile-pic > img:nth-child(1) {

margin-top: -20px;

}

.blog-preview {

margin-top: -55px;

}

.logout-btn {

margin-right: 345px;

margin-left: -;

}

.center > form:nth-child(1) {

margin-top: 1px;

margin-top: 23px;

}

}

</style>

<style>

nav .top {

background: #c29159;

}

nav .links {

background-color: #423220;

}

main {

background: #f2e0cb;

}

</style>


<style>

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

background: #2;

}

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

background: #d4b087;

}

:root {

--lighter-blue: #8c765d;

}

.details-table td:first-child {

background: #695642;

}

.details-table td:first-child {

color: #faebd9;

}

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

color: #473f35;

}

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

color: #36322e;

}

.profile .blurbs .section h4 {

color: #36322e;

}

:root {

--lightest-blue: #ffecd6;

}

.comments-table td, .music-table td {

background: #ffecd6;

}

.comments-table td:first-child, .music-table td:first-child {

background: #d6b289;

}

</style>



extra things included

GBFEERCBGFBGGHFDHXBHFXDFSTTOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOPPPPPP

<style>


/*CUSTOMIZE PROFILE*/




/*PROFILE BANNER INSTRUCTIONS - This is your profile banner. To keep with the style if you're making a banner, the dimensions are included in the sample art. But your image should automatically crop into the correct size. To change your banner, where it says "background-image", you want to copy the image address of your desired image, and paste it after the ' in the brackets. Make sure there is a ' before and after your url.*/




main:before {


width: 100%;


height: 300px;


display: block;


content: "";


background-image: url('https://i.pinimg.com/originals/35/47/dc/3547dc9342eb2081acf47096f65f8e6d.gif');


background-position: center center;


background-size: cover;


}


@media only screen and (max-width: 600px) {


main:before{


height: 200px;


}


}


</style>




<style>


/*PROFILE BACKGROUND INSTRUCTIONS - Heres your profile background. Currently it is set ot the default color, but you can change this to any color you want by replacing the HEX code with a new one. Or alternitivley, add a URL in the URL section to add an image. If adding an image instead of a color, you may need to remove the color HEX code first so it doesnt overlap.*/




body {


background-color: #2b2e33;


}


body {


    background: url(https://i.pinimg.com/736x/4a/52/d3/4a52d30458eb47bc9ad0368d6205be0c.jpg)


fixed; background-size:cover;


main{




}


<style>


/* Global text color set to soft orange */


body, p, h1, h2, h3, h4, h5, h6, span, div, a, td {


    color: #FFA07A; /* Soft orange color */


}




/*CUSTOMIZE PROFILE*/


main:before {


width: 100%;


height: 300px;


display: block;


content: "";


background-image: url('https://i.pinimg.com/originals/35/47/dc/3547dc9342eb2081acf47096f65f8e6d.gif');


background-position: center center;


background-size: cover;


}


@media only screen and (max-width: 600px) {


main:before{


height: 200px;


}


}




/*PROFILE BACKGROUND INSTRUCTIONS*/


body {


    background-color: #2b2e33;


}


body {


    background: url(https://i.pinimg.com/736x/4a/52/d3/4a52d30458eb47bc9ad0368d6205be0c.jpg)


    fixed; background-size:cover;


}




}






/* Global text color set to soft orange */


body, p, h1, h2, h3, h4, h5, h6, span, div, a, td {


    color: #a18d6d; /* Soft orange color */


}




/*CUSTOMIZE PROFILE*/


main:before {


width: 100%;


height: 300px;


display: block;


content: "";


background-image: url('https://i.pinimg.com/originals/35/47/dc/3547dc9342eb2081acf47096f65f8e6d.gif');


background-position: center center;


background-size: cover;


}


@media only screen and (max-width: 600px) {


main:before{


height: 200px;


}


}




/*PROFILE BACKGROUND INSTRUCTIONS*/


body {


    background-color: #2b2e33;


}


body {


    background: url(https://i.pinimg.com/736x/4a/52/d3/4a52d30458eb47bc9ad0368d6205be0c.jpg)


    fixed; background-size:cover;


}






</style>










<style>


/*NON CUSTOMIZABLE ELEMENTS, ALTER AT OWN RISK.*/


.container > nav:nth-child(1) {


margin-left: -548px;


margin-right: -545px;


}


.container > main:nth-child(2) {


margin-top: 0px;


margin-left: -200px;


margin-right: -200px;


}




.profile-info {


border-left-width: 0px;


border-right-width: 0px;


margin-left: 550px;


}


.profile-info {


border-bottom-width: 0px;


border-top-width: 0px;


}


</style>




<style>


.details {


margin-top: -50px;


}




div.col:nth-child(3) > span:nth-child(1) > h1:nth-child(1) {


margin-left: 180px;


}


.details > p:nth-child(1) {


margin-right: 400px;


margin-top: 1px;


}


div.left:nth-child(1) {


margin-left: 325px;


}


.center > form:nth-child(1) {


margin-left: -220px;


margin-top: 10px;


}


.active {


margin-left: 340px;


}


</style>




<style>


.profile-pic {


margin-bottom: -105px;


}


.details {


margin-top: -190px;


}




</style>




<style>


.details > p:nth-child(2) {


margin-top: 20px;


}


.details > p:nth-child(1) {


margin-top: 33px;


}


.profile-pic > img:nth-child(1) {


margin-top: -20px;


}


.blog-preview {


margin-top: -55px;


}


.logout-btn {


margin-right: 345px;


margin-left: -;


}


.center > form:nth-child(1) {


margin-top: 1px;


margin-top: 23px;


}


}


</style>


<style>


nav .top {


background: #c29159;


}


nav .links {


background-color: #423220;


}


main {


background: #f2e0cb;


}


</style>




<style>


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


background: #2;


}


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


background: #d4b087;


}


:root {


--lighter-blue: #8c765d;


}


.details-table td:first-child {


background: #695642;


}


.details-table td:first-child {


color: #faebd9;


}


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


color: #473f35;


}


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


color: #36322e;


}


.profile .blurbs .section h4 {


color: #36322e;


}


:root {


--lightest-blue: #ffecd6;


}


.comments-table td, .music-table td {


background: #ffecd6;


}


.comments-table td:first-child, .music-table td:first-child {


background: #d6b289;


}


</style>



<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://i.pinimg.com/originals/48/39/db/4839dbfc8c4063987b1105839d1f9ea7.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 0s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>


<style>


/*CONTACT 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: url(https://external-media.spacehey.net/media/sb82P4c7-xpTWB8RPjYS9RtqBbz67xB5wge-h4SmviIM=/https://64.media.tumblr.com/16c8744f5d92717664d43bdeb9c91004/48ab18e98b53e06b-9f/s75x75_c1/561dbc4da2c0d62bb73862c715c583b8eb96feff.gif)}




.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {


/* ADD TO FAVOURITE */


content: url(https://external-media.spacehey.net/media/sbdZNr2l3_ushU_I0zK9TKGy0FIB3-mV3HTfEhaefHlw=/https://64.media.tumblr.com/f1ac129807846226f04ec720864517ba/48ab18e98b53e06b-6c/s75x75_c1/f75d55f6ccf9c83aadde341bd0f4780f3f6581b6.gif)}




.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {


/*SEND A MESSAGE */


content: url(https://external-media.spacehey.net/media/s9eKehbymZEaY0HZ1rnyJeasn1e2JYltCchMwzRSVqkM=/https://64.media.tumblr.com/118fd43958aca7793aece001e36ea35f/6969750ef8e944fd-b0/s75x75_c1/dfd546a223cc2d9e2c856f043c83bb21ce8553ff.gifv)}




.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {


/*FORWARD TO FRIEND*/


content: url(https://external-media.spacehey.net/media/s3FChXZP0jzqLb-oB1DP7EK_GwLYyBko8j5OJugg2WTY=/https://64.media.tumblr.com/f63257d91758b2d31e94edb0fae3a70e/2dc23981bf9dbd40-4d/s75x75_c1/3094356b6d7f01ae036d999ff7ea721cab7761c2.gif)}




.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {


/*INSTANT MESSAGE*/


content: url(https://external-media.spacehey.net/media/skYsFCKjS3w6jw-4rYHuQ9bg-lWMqAZmuS7OGUFc81hY=/https://64.media.tumblr.com/b9fdab2f98d194930ff2e89112f6bee5/6969750ef8e944fd-d3/s75x75_c1/241f9d3f3b7245d17771692751fcda661a49fb9b.gifv)}




.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {


/*BLOCK USER*/


content: url(https://external-media.spacehey.net/media/sxdGKM5bi9RvnK9F2dbBjjpycwyFMRKFCyCIsd8VkgFI=/https://64.media.tumblr.com/528ea015de24cc8bc3fddc3aec3efcd1/48ab18e98b53e06b-c9/s75x75_c1/e9d5e1178fa61da8a6fb62231e4160e852f19ddb.gif)}




.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {


/*ADD 2 GROUP*/


content: url(https://external-media.spacehey.net/media/sqbswdUwrOYs4iaDUD8TVz7GXgbXHhtT5cImFZ4n5q1k=/https://64.media.tumblr.com/f93e291c15643f76dd3b0997ad59547a/48ab18e98b53e06b-0a/s75x75_c1/b7ac081fed1c9222e968c842dc53753dc3dddc3f.gif)}




.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {


/*REPORT*/


content: url(https://external-media.spacehey.net/media/sBAtA8fpr6r1g3BMRv7EocDIVvxX5-tDfsjTkO8-A-IU=/https://64.media.tumblr.com/ef4f3e441799965fdb43e594875e640a/01244fd8cc4a0103-7a/s75x75_c1/7ad568f4953f3f8a9ee1ce2aaef05cf2f3d5e652.webp)}


</style>


<iframe width="0" height="0" src="https://www.youtube.com/embed/YidmA4DCjGc//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>


0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )