This is my current layout.

Since I get an error when I try to post my layout (namely "Posing layouts is temporarily unavailable. Check back soon."), I shall post it here. My layout is mostly a collage of other layouts with a bit of my own code.

<!-- Special thanks to: ♱ ˚₊ ‧ 。𝔯𝔢𝔦 。‧₊˚♱, Salem, fini hoover :3, and tilapia -->

<center>

<iframe width="400" height="400" src="https://www.youtube.com/embed/butyYRz4sgw?loop=1&autoplay=1" title="Bustin' Surfboards" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

</center>


<style>

/*nyan cat online sign*/


.online img {

  content: url(http://dl.glitter-graphics.net/pub/3058/3058251t4udpjlpsc.gif);

  height: 2.5em;

  animation-name: none;

}

</style>


<style>

/* design */

.logo {

content:url("https://64.media.tumblr.com/636e5f2e6511ece9da79befa3e2f03ab/be1128c5c16cdf09-1d/s540x810/05bd8e87265ea8e4fcabd3e5ce489666439bf79c.pnj"); width: auto;

}


/* Gen Body Settings */

.container {

  border: 1px solid lightblue; 

}


/*https://i.pinimg.com/564x/3a/de/2f/3ade2f3f58a94cdaccc27413227ad1bc.jpg*/


main {

    background: url("https://i.pinimg.com/564x/3a/de/2f/3ade2f3f58a94cdaccc27413227ad1bc.jpg"); 

  background-size: 100%; 


}


body {

   background: url(https://i.pinimg.com/736x/aa/51/1a/aa511a90855cf8a098314c0b6af5ad76.jpg);  

   background-size: 50%;

   backdrop-filter: blur(0.8px)}


footer {

   height: 130px;

   background-image: url(https://www.icegif.com/wp-content/uploads/2023/06/icegif-649.gif);

   background-position: centre !important;

   background-size: cover;}


.icon {

    height: 1em;

    width: 1em;

}


/* Profile Settings */


.details-table td {

  background-color: transparent;

  color: #2f748a;

}  


.details-table td p {

  font-size: 11px;

  font-family: "Segoe UI", Arial, sans-serif;

  color: #2f748a;


.details-table td:first-child {

  background: linear-gradient(lightblue, white 20px);

  text-align: center;

  text-shadow: white 0px 1px 2px;

  width: 30%;

  box-shadow: #ffffffab 0px 1px 2px 2px inset;

  color: #ff0076;

  font-family: "Segoe UI", Arial, sans-serif;

  font-size: 15px;

  font-weight: normal;

}


.profile .contact .heading h4, .profile .table-section h4 {

  font-weight: normal;

}


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

    border: 0;

}


.profile .contact .inner, .profile .table-section .inner {

    background: url(https://cdn.mos.cms.futurecdn.net/EofuTa42mfBXgFqVWHnGXV.jpg); 

  background-size: 100%; 

    border: lightblue 1px solid;


    

}


.profile-info {

  border: 0;

  margin: 0;

  padding: 0;

}


.profile-info h3 {

  font-weight: normal;

  font-size: 11px;

  color: #83a2ab;

  margin: 0;

}


.profile h1 {

  letter-spacing: 0.3px;

  font-size: 14px;

  margin: 0;

}


.general-about .profile-pic {

 height: 100px;

 border: 1px solid #2f748a;

 box-shadow: #a1c2cc 0px 2px 2px;

}


.mood p, .profile .url-info  {

 font-size: 13px;

 font-family: "Segoe UI", Arial, sans-serif;

}


.mood b, .profile .url-info b{

  font-weight: normal;

  font-family: "Segoe UI", Arial, sans-serif;

  font-size: 0.875em;

}


.general-about .profile-pic img {

 height: 100px; 

 width: 100px;

}


/* Link Settings */

.mood a, .inner a, .friends a {

 color: #2f748a;

 font-weight: normal;

 font-size: 13px;

 font-family: "Segoe UI", Arial, sans-serif;

}


.blog-preview a {

 color: #2f748a;

 font-weight: normal;

 font-size: 12px;

 font-family: "Segoe UI", Arial, sans-serif;

}


/* Nav Bar */


nav .links {

 background: linear-gradient(#eefbee 15%, #91cfe3, #d0eff9); 

 box-shadow: white 0 1px 1px 1px inset;

 padding: 0;

 text-align: center;

}


nav .links a {

  color: #2f748a;

  text-shadow: white 0px 2px 4px;

  padding: 1px

}


nav .links a:hover {

  color: #2f748a;

  background: linear-gradient(white, lightgreen);

  text-decoration: none;

  padding-top: 0;

}


nav .links li.active a {

  color: #1a586c; 

  font-weight: normal;

}


nav .links li:not(:last-child)::after {

  color: white;

  text-shadow: lightblue 1px 0px 1px;

}


/* Nav Top */


nav .top {

 background: linear-gradient(#bddde8 , #1d94ba 40%, lightblue); 

 box-shadow: #fff6 0px 0px 2px 3px inset;

}


/* Friends */

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

  width: 50px;

  height: 50px;

}


.profile .inner b {

 font-size: 11px; 

 font-family: 'ms ui gothic';

 color: #2f748a;

}


.profile .inner span.count {

 color: pink; 

}


.profile .friends .person p {

 font-size: 11px;

 font-family: "Segoe UI", Arial, sans-serif;

 color: #4983ce;

}


.profile .url-info{

   padding: 2px;

   background-image:url(https://cdn.mos.cms.futurecdn.net/EofuTa42mfBXgFqVWHnGXV.jpg);

   background size: 100% !important;


}


.comments-table td:first-child {

  background: linear-gradient(#bddde8, #1d94ba 40%, lightblue);

  text-align: center;

  text-shadow: white 0px 1px 2px;

  width: 30%;

  box-shadow: #ffffffab 0px 1px 2px 2px inset;

}

.comments-table img:not(.icon){

    border: 1px solid white;

    box-shadow: 0px 1px 2px #fff;

}


.comments-table td {

 background-color: transparent; 

}

button:not(.logout-btn) {

 background: linear-gradient(#eefbee 15%, #91cfe3, #d0eff9); 

 box-shadow: white 0 1px 1px 1px inset;

 color: #2f748a;

 font-size: 11px;

 font-weight: normal;

 text-shadow: white 0px 2px 5px;

 border: 1px solid #91cfe3;

 border-radius: 2px;

 padding: 2px;


button:not(.logout-btn):hover {

 background: linear-gradient(white, lightgreen); 

 box-shadow: white 0 1px 1px 1px inset;

 color: #2f748a;

 font-size: 11px;

 font-weight: normal;

 text-shadow: white 0px 2px 5px;

 border: 1px solid #91cfe3;

 border-radius: 2px;

 padding: 2px;


<style>

.friends-grid::before {

width: 1000px;

height: 80px;

object-fit: cover;

margin-bottom: 10px!important;

}



.friends-grid::before{

width: 1000px;

height: 80px;

object-fit: cover;

margin-bottom: 10px!important;




</style>


<style>

/* contact icons */

.contact .inner a img {

font-size: 0;

}

.contact .inner a img:before {

font-size: 1em;

display: block


}

:root {

  --sign1: "🐟";

  --sign2: "🐠";

}


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

/* add to friends */

content: var(--sign1)

}

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

/* add to favorite */

content: var(--sign2)

}

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

/* send a message */

content: var(--sign2)

}

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

/* foward to friend*/

content: var(--sign1)

}

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

/* instant message */

content: var(--sign1)

}

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

/* block user */

content: var(--sign2)

}

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

/* add 2 group  */

content: var(--sign2)

}

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

/* report */

content: var(--sign1)

}   


</style>

<div class="snowflakes">

<div class="snowflake"><img src="https://i.gifer.com/origin/19/195503a21dce442011b13dbac4fd5e76_w200.gif"/></div>

<div class="snowflake"><img src="https://i.gifer.com/origin/b1/b1d68c139f8c0514b039ff63703633aa_w200.gif"/></div>

<div class="snowflake"><img src="https://www.icegif.com/wp-content/uploads/2023/10/icegif-263.gif"/></div>

<div class="snowflake"><img src="https://www.netanimations.net/pinkfish.gif"/></div>

<div class="snowflake"><img src="https://i.gifer.com/origin/19/195503a21dce442011b13dbac4fd5e76_w200.gif"/></div>

<div class="snowflake"><img src="https://www.netanimations.net/pinkfish.gif"/></div>

<div class="snowflake"><img src="https://www.icegif.com/wp-content/uploads/2023/10/icegif-263.gif"/></div>

<div class="snowflake"><img src="https://i.gifer.com/origin/b1/b1d68c139f8c0514b039ff63703633aa_w200.gif"/></div>

</div>



<style>

/* Fish animation */

    @-webkit-keyframes snowflakes-fall{0%{left:-10%}100%{left:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(80px);transform:translateY(80px)}}@keyframes snowflakes-fall{0%{left:-10%}100%{left:100%}}@keyframes snowflakes-shake{0%,100%,{transform:translateY(0)}50%{transform:translateY(80px)}}

.snowflake{scale: 0.4; position:fixed;left:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}

.snowflake:nth-of-type(0){top:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){top:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){top:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){top:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){top:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){top:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){top:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){top:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){top:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){top:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){top:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){top:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>



<style>

/* bubbles */

html:before {

  background-image: url(https://media3.giphy.com/media/3ohhwoER829Q2hWwx2/giphy.gif?cid=6c09b952e9ldw8bbnxnrlf2wr8q4mjvezqm6jmjk0swzgvf8&rid=giphy.gif&ct=s);

  content: "";

  height: 300%;

  left: -50%;

  opacity:.2;

  position: fixed;

  top: -110%;

  width: 300%;

  pointer-events:none;

}

</style>


0 Kudos

Comments

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