layout tester's profile picture

Published by

published

Category: SpaceHey

white layout

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

</iframe>



<img src="https://64.media.tumblr.com/75b501b17ead0adbace04db141e577b8/dfe928c691579e6d-6c/s540x810/31424db269b01549c656819cb06a3cd4a3539d0d.pnj"/>


<img src="https://64.media.tumblr.com/afb6d6be5287b09555ab0895d7371b2d/tumblr_ou70c2khyy1v0ama5o1_400.gifv"/>




<style>

footer::after{

  bottom: 0;

  font-size: 0;

  left: 80%;

  position:fixed;

  pointer-events: none;

  content:url("https://64.media.tumblr.com/e53f200a46824025fafc13bf6d3a5869/4a160e3a30f40488-0c/s250x400/803560203a67d645f7039b44a4b559d4e8853700.pnj");

}

</style>



<style>


.logo {


content:url("https://64.media.tumblr.com/ce42b3cb2db42c641577ca6f69c533ad/tumblr_myikqiFee61r1fz9do1_540.pnj");


}


</style>




<style>




body{


    background-image: url('https://64.media.tumblr.com/e22fd36d19924fd080e7c01b50025d5e/39ad59508955828e-32/s400x600/ef75461be70a8ea052e4f45a81ed96033b33e24d.gifv');


    background-size: 552px;


}


nav .links{


    color: #000000;


    background-color: #b9b9b9;


    border-right: solid 1px;


    border-left: solid 1px;


    border-bottom: solid 1px;


    background-color: #b9b9b9;


    text-shadow: 2px 2px 5px #000000;


    font-weight: bold;


    font-family: italic;


    text-align: center;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


}


nav .top{


    background-color: #b9b9b9;


    border-top: solid 1px;


    border-left: solid 1px;


    border-right: solid 1px;


    background-color: #b9b9b9;


    color: #000000;


    text-shadow: 2px 2px 5px #000000;


    font-weight: bold;


    font-family: italic;


    font-size: 15px;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


}




a:hover{


    color: white;


}


main {


    background-image: url('https://64.media.tumblr.com/c69abc054670af2c57ccdfcefb5548d8/52c958a36ec7ca6d-cf/s400x600/81f02a02082b017b59319407b4acc9f4ca5db1b4.gifv');


    padding: 20px 0px;


}


main .left{


    background: transparent;


    background-size: 550px;


    padding: 20px;


}


main .right{


    background: transparent!important;


}


.general-about .profile-pic {


    border: solid 1px #ab978b;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    margin-bottom: 30px;


    animation-name: floating;


    animation-duration: 3s;


    animation-iteration-count: infinite;


    animation-timing-function: ease-in-out;


    margin-left: 0px;


    margin-top: 0px;


}


@keyframes floating {


    0% { transform: translate(0,  0px); }


    50%  { transform: translate(0, 5px); }


    100%   { transform: translate(0, -0px); }


}


/*===============you can change the link to anything else===============*/


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


.profile-pic:after { background-image: url("https://64.media.tumblr.com/3935e736d7a7a6fb6136490c03991080/cba18bd80716edea-1e/s250x400/0c390d79a40038b778b9f1867751ed8160c75465.gifv"); 


display: inline-block; content:"" }


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


.profile-pic:after{ 


  border: 4px solid  rgb(66,92,182);  


  box-shadow: 1px 0px 10px 2px rgb(66,92,182);



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


    animation-name: floating;


    animation-duration: 3s;


    animation-iteration-count: infinite;


    animation-timing-function: ease-in-out;


    margin-left: 0px;


    margin-top: 0px;



.profile .mood{


    background-color: #b9b9b9;


    border: solid 1px #ab978b;


    margin-bottom: 30px;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    text-align: center;


    color: #000000;


    font-family: italic;


    text-shadow: 2px 2px 5px;


}


.profile .contact{


    background-color: #b9b9b9;


    border: solid 1px #ab978b;


    margin-bottom: 30px;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    text-align: center;


    color: #000000;


    font-family: italic;


}


.profile .url-info{


    background-color: #b9b9b9;


    margin-top: 30px;


    border: solid 1px #ab978b;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    color: #000000;


    font-family: italic;


    text-align: center;


}


.profile .contact .heading{


    color: #000000;


    font-family: italic;


    background-color: #b9b9b9;


    text-shadow: 2px -1px 5px;


    font-size: 15px;


}


.profile .table-section{


    margin-top: 30px;


    font-family: italic;


    border: solid 1px #ab978b;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    background-color: #b9b9b9;


    text-align: center;


}


.profile .blog-preview{


    border: solid 1px #ab978b;


    margin-bottom: 30px;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    text-align: center;


    color: #000000;


    font-family: italic;


    text-shadow: 2px 2px 5px;


    background-color: #b9b9b9;


    font-size: 15px;


}


.profile .blurbs .inner{


    border-bottom: solid 1px #ab978b;


    border-left: solid 1px #ab978b;


    border-right: solid 1px #ab978b;


    margin-bottom: 30px;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    text-align: center;


    color: #000000;


    font-family: italic;


    text-shadow: 2px 2px 5px;


    background-color: #b9b9b9;


}


.profile .friends .inner{


    background-color: #b9b9b9;


    border-bottom: solid 1px #ab978b;


    border-left: solid 1px #ab978b;


    border-right: solid 1px #ab978b;


    margin-bottom: 30px;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    text-align: center;


    color: #000000;


    font-family: italic;


    font-size: 15px;


    text-shadow: 2px 2px 5px;


}


table.comments-table{


    background-color: #b9b9b9;


    color: #000000;


    text-align: center;


    font-family: italic;


    font-size: 13px;


}


.profile .table-section .heading{


    background-color: #b9b9b9;


    color: #000000;


    font-family: italic;


    text-shadow: 2px 2px 5px;


    font-size: 15px;


}


.details-table td{


    background-color: #b9b9b9;


    border-bottom: solid 1px #ab978b;


    color: #000000;


    font-family: italic;


}


.details-table td *{


    background-color: #b9b9b9;


    color: #000000;


    font-family: italic;


    text-shadow: 2px 2px 5px;


    font-size: 12px;


}


.details-table td{


    color: #000000;


    background-color: transparent!important;


}


.profile .blurbs .heading{


    background-color: transparent;


    border-top: solid 1px #ab978b;


    border-left: solid 1px #ab978b;


    border-right: solid 1px #ab978b;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    text-align: center;


    color: #000000;


    font-family: italic;


    text-shadow: 2px 2px 5px;


    font-size: 15px;


}


.profile .friends .heading{


    background-color: #b9b9b9;


    border-top: solid 1px #ab978b;


    border-left: solid 1px #ab978b;


    border-right: solid 1px #ab978b;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    text-align: center;


    font-family: italic;


    font-size: 15px;


    color: #000000;


    text-shadow: 2px 2px 5px;


}


.comments-table td{


    background-color: transparent;


    border: solid 1px #ab978b!important;


    outline: none!important;


    background-size: cover;


}


.comments-table td:first-child{


    background-color: transparent;


    border: solid 1px #ab978b!important;


    outline: none!important;


}


.comments-table{


    border: solid 1px #ab978b!important;


}


.comments-table td *{


    color: #000000;


}


/*===============Replace Icons on comments, remove/edit===============*/


.comments-table td * > img { display:none; }


.comments-table td:first-child{


    background-image: url('https://64.media.tumblr.com/f9d0cbaf25e2bd483f3085a50f0f8815/8e921341038bd203-dc/s400x600/5250df27252a65078ece371ff26a745814b93840.gifv');


    background-size: cover; height: 150px; width: 169px;


}


.profile h1{


    color: #000000;


    font-family: 'Yu Gothic';


    font-size: 30px;


    text-align: center;


    text-shadow: -1px 3px 10px #000000;


}


/*===============Online===============*/


.online {


    content: url('http://www.myspacegens.com/images/online_now/102.gif');


}


.details p:last-child{


    color: #000000;


    text-shadow: 2px 2px 5px #000000;


}


.url-info {display: none !important;} /* to hide the url */


.blurbs .heading{display: none !important;} /* to hide the blurbs heading */




a {color: var(--links) !important;} /* color of links */


a:hover {color: var(white) !important;} /* color of links on hover */


p, h2 {color: var(--text) !important;} /* color of text */


.friends a p {color: var(--names) !important;} /* color of names, and friends counter */


.friends a:hover p {color: var(--hover) !important;} /* color of names on hover */


nav label {color: var(--links) !important;} /* color of search */


.section h4 {color: var(--headers) !important; text-align: center;} /* aboutme & want2meet headings */


.comment-reply:not(:first-child) {border-top: 3px double red;} /* line in between comment replies*/


.count {color: #ab978b;}




a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {


    text-decoration: underline;


    text-decoration-style: wavy;


}


nav .links a:hover {


    text-decoration: underline;


    text-decoration-style: wavy;


}


.logout-btn:hover, .logout-btn:active {


    text-decoration: underline;


    text-decoration-style: wavy;


}


.blurbs{


    border-top: solid 1px #ab978b;


}




.comments-table {


    display: block;


    height: 500px!important;


    overflow-y: scroll;


    border: var(--borders) !important;


    outline: none !important;


    border: none!important;


}


.profile-info{


    margin-bottom: 30px;


    background-color: #b9b9b9;


    border: solid 1px #ab978b;


    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ab978b;


    color: #000000;


}


.general-about .details{


    color: #000000;


    font-family: italic, bold;


    font-size: 13px;


}


footer {


    background-color: transparent;


    color: #b9b9b9;


    text-shadow: 2px 2px 5px #000000;


}






<style>


/* Force scrollbars onto browser window */




::-webkit-scrollbar {


    width: 5px;


    height: 12px;


}




::-webkit-scrollbar-track {


    border-radius: 0px;


    width: 2px;


    border: 1px solid red;


}




::-webkit-scrollbar-thumb {


    background: red;


    border-radius: 0px;


}




::-webkit-scrollbar-thumb:hover {


    background: red;


}




</style>



<style>


table, th, td {


  border: 0px solid;


     }


:root {


  --topic1: "love";

  --topic2: "music";

  --topic3: "movies";

  --topic4: "books";

  --topic5: "blinkies";

  --topic6: "stamps";


 }


.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}


.details-table tr td:first-child p::after{

    

    

color:var(--links) !important;

letter-spacing:normal !important;

text-shadow: 2px 2px black !important;

filter: brightness(95%) !important;

   

   

}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{

  content: var(--topic1);

}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{

  content: var(--topic2);

}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{

  content: var(--topic3);

}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{

  content: var(--topic4);

}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{

  content: var(--topic5);

}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{

  content: var(--topic6);

}


</style>


<style>

main {

  /* sets background */

    background-image: url( );

    background-repeat: repeat;

    background-size: 50% ;

  }  

</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: "🦢"

}

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

/* add to favorite */

content: "🦢"

}

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

/* send a message */

content: "🖤"

}

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

/* foward 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 2 group  */

content: "🎧"

}

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

/* report */

content: "🎧"

}   

</style>


<style>


/*Intro GIF Animation (fade out)*/

  body:before {

    content: " ";

    height: 100vh;

    width: 100vw;

    display: block;

    position: fixed; 

    top: 0; 

    left: 0; 

    z-index: 100;

    background-image: url(' '); /*gif link here*/

    background-size: cover;

    background-repeat: no-repeat;

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

    pointer-events: none;

  }

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

</style>


<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat985.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/29/tiny-bunny.html" target="_blank" title="Tiny Bunny"><img src="https://cur.cursors-4u.net/cursor.png" alt="Tiny Bunny" style="position:absolute; top: 0px; right: 0px;"/></a>


0 Kudos

Comments

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