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>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )