I just wanted to save my layout but here's a preview anyways!
<style>
:root{
--bottom-banner: url("https://i.pinimg.com/originals/35/33/b6/3533b69af9d5241e0389d4c22547bfea.gif");
}
/* CHANGE THE BANNER DOWN THERE INSIDE THE PARENTHESES (Use a image URL) */
.edit-link{font-size:0;}
@media (min-width: 30em) {.col.w-40 {width: 36%;}}
.person:not(:nth-child(4), :nth-child(8))::after {
content: "";
width: 30px;
height: 120px;
background: url(https://64.media.tumblr.com/4a32708ddbbafabf5dd61110257c3d94/7370bf55a1ad29ce-52/s500x750/b68243833a44f4698dec926011a4531227c84f6e.gifv);
background-size: cover;
position: relative;
display: flow-root;
bottom: 120px;
left: 95px;
}
.person{margin: 0 16px 0 0; height: 150px;}
nav .top{margin-top: 4px; background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%); border: ridge 4px #ee77aa}
.logo-fallback {filter: drop-shadow(1px 1px 0px #ee88aa) drop-shadow(1px 0px 0px #ee88aa) drop-shadow(0px 1px 0px #ee88aa) drop-shadow(-1px -1px 0px #ee88aa) drop-shadow(1px -1px 0px #ee88aa) drop-shadow(-1px 1px 0px #ee88aa);} nav .top b{color: #e8559a}
nav .links{text-align: center; height: 33px; background: #0000; padding-top: 8px; padding-left: 0px;}
.blurbs .heading{
background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%) !important;
border: ridge 4px #ee77aa;
color: #aa2255 !important;
padding: 4px;
border-radius: 8px 8px 2px 2px;
font-size: 120%;
}
.friends .heading{
background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%) !important;
border: ridge 2px #e8559a;
padding: 4px 14px !important;
border-radius: 4px 4px 0px 0px !important;
color: #aa2255 !important;
}
.friends .inner{
background: linear-gradient(180deg, #ffbcde 4%, #fdfcff 108%);
border: solid 2px #e8559a;
padding: 14px;
border-radius: 0px 0px 4px 4px;
}
.profile .friends .person p {
color: #aa2255;
background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%) !important;
border-top: ridge 2px #e8559a;
border-right: ridge 2px #e8559a;
border-left: ridge 2px #e8559a;
padding: 4px 14px !important;
border-radius: 4px 4px 0px 0px !important;
margin-bottom: -2px;
}
.friends{margin-top: 8px;}
nav .links li{background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%); border: solid 2px #e8559a; padding: 4px; border-radius: 4px 4px 2px 2px; box-shadow: 0px 0px 8px rgba(255, 240, 250, 0.75);}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{content: none;}
nav .links a{text-shadow: 0px 0px 3px #e8559a, 0px 0px 3px #e8559a;}
.blog-preview p:first-of-type, label{text-shadow: 0px 0px 2px #ffcfdf; font-style: italic; color: #e8559a; border: solid 1px #e8559a; background-color: #ffe7ef; padding: 2px 4px; border-radius: 4px; font-weight: bold;}
main{color: #aa2255; text-shadow: 0px 0px 2px #ffcfdf, 0px 0px 1px #ffcfdf; padding: 20px 8px 8px 8px; border: double 5px #e8559a; margin-top: 8px; background: url(https://i.pinimg.com/736x/e8/c3/9d/e8c39dc7645ba43b1041fe7e6d2207da.jpg);}
button{background: linear-gradient(0deg, #cc4488 4%, #ffaadd 108%); color: #fff; text-shadow: 1px 0px 0px #ffaadd, 1px 1px 0px #ffaadd, 0px 1px 0px #ffaadd, -1px 0px 0px #ffaadd, -1px -1px 0px #ffaadd, 0px -1px 0px #ffaadd; padding: 3px; border: solid 2px #aa2255; border-radius: 5px;}
body{background: url(https://i.pinimg.com/736x/0d/e6/e7/0de6e7f5bb141c28add9e59b1cb403c3.jpg); background-size: 33%;}
footer{background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%); border: ridge 4px #ee77aa} .edit-info{background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%); border: ridge 4px #ee77aa} .edit-info p, .edit-info h4{background: rgba(255, 240, 250, 0.6); padding: 4px; border-radius: 8px; border: solid 2px rgba(255, 240, 250, 0.4); text-shadow: 0px 0px 2px #ffcfdf, 0px 0px 1px #ffcfdf;}
a{color: #ff00aa;}
footer p{color: #fff; text-shadow: 0px 0px 2px #ffcfdf, 0px 0px 1px #ffcfdf;} #q{background: linear-gradient(180deg, #ffcfdf 0%, #ffe7f0 18%, #ffcfdf 36%, #fdfcff 108%); border: solid 3px #dd6699;}
footer .links li{background: linear-gradient(180deg, #ffaacc 4%, #fdfcff 108%); border: solid 2px #e8559a; padding: 2px; border-radius: 2px 2px 1px 1px; border: solid 1px #e8559a;}
nav .links .icon{content: url(https://images.emojiterra.com/google/android-12l/512px/1f353.png);} .profile-pic .pfp-fallback {border: 3px double #aa2255 !important; box-shadow: 0px 0px 20px #ee77aa;}
main::after{ width: auto; margin-bottom: 12px; margin-top: 34px; border: 4px double #f9d; height: 263px; display: block; content: ""; background-image: var(--bottom-banner); background-position: center center; background-size: cover; opacity:.75; margin-left: 16px; margin-right: 16px; box-shadow: 0px 0px 16px #ff66aa;}
footer a{text-shadow: none;}
.comments-table td{border: 3px double #aa2255; box-shadow: 0px 0px 20px #ee77aa; background-size: cover; background: url(https://i.pinimg.com/736x/9f/99/95/9f9995c8cec601eb37f683546d88b883.jpg);}
.details-table td{border: 3px double #aa2255; box-shadow: 0px 0px 20px #ee77aa; background-size: cover; background: url(https://i.pinimg.com/736x/9f/99/95/9f9995c8cec601eb37f683546d88b883.jpg);}
.details-table td:first-child, .comments-table td:first-child{border: 3px double #aa2255; box-shadow: 0px 0px 20px #ee77aa; background-size: cover; background: url(https://i.pinimg.com/originals/f4/e6/5e/f4e65ea95b1cdd825ca4d54a4e461e9c.jpg);}
.details-table td:first-child{width: auto;}
img.pfp-fallback{border: solid 2px #dd6699;}
.container{
width: 1050px;
}
main{
padding: 12px;
}
nav .top .left .logo {
width: 215px;
height: 42px;
}
.blurbs .inner .section:last-of-type:after{
content: var(--whoidliketomeet);
font-size:0.81rem;
color: #aa2255;
text-shadow: 0px 0px 2px #ffcfdf, 0px 0px 1px #ffcfdf;
}
blurbs .inner .section:last-of-type h4{
font-size: 0px !important;
}
.blurbs .inner .section:first-of-type h4:after{
content: var(--aboutme-heading);
font-size:0.81rem;
color: #aa2255;
text-shadow: 0px 0px 2px #ffcfdf, 0px 0px 1px #ffcfdf;
}
.blurbs .inner .section:first-of-type h4{
font-size:0;
}
.details-table:first-of-type td:first-child{color: #0000; text-shadow: none;}
.friends-grid{padding:32px;}
.table-section{border: none;}
.table-section .heading, .contact .heading{background: linear-gradient(180deg, #ee88aa 4%, #fdfcff 108%) !important; border: ridge 4px #ee77aa; color: #aa2255 !important;}
.online img {
content: url(https://images.emojiterra.com/google/android-10/512px/1f365.png);
animation: spin 2s infinite linear;
}
.online { color: #ff0020; font-weight:bold; animation: sillyness 1s infinite linear;}
@keyframes spin{
from{ transform:rotate(0deg); }
to{ transform:rotate(-360deg); }
}
@keyframes sillyness{
0%{transform: translateY(0px)}
75%{transform: translateY(-15px)}
100%{transform: translateY(0px)}
}
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner a:before {
content: ""
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
display: inline-block;
background: url("https://i5.glitter-graphics.org/pub/638/638145bltz6zqhdo.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorites */
display: inline-block;
background: url("https://i6.glitter-graphics.org/pub/638/638146kvkkfs33zm.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send Message */
display: inline-block;
background: url("https://i10.glitter-graphics.org/pub/1065/1065500cl3si27n8p.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend */
display: inline-block;
background: url("https://i5.glitter-graphics.org/pub/553/553525locp67mrqu.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
display: inline-block;
background: url("https://i10.glitter-graphics.org/pub/1073/1073020lz9hw5tluj.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
display: inline-block;
background: url("https://i6.glitter-graphics.org/pub/1864/1864126gg6pk5sjxk.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group */
display: inline-block;
background: url("https://i5.glitter-graphics.org/pub/1823/1823285xkz7w3dlz4.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report user */
display: inline-block;
background: url("https://i4.glitter-graphics.org/pub/1595/1595794joznotovno.gif")no-repeat 0 0;
background-size: 100%;
width: 16px;
height: 16px;
}
.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
border: none;
}
.profile-info{
border: solid 1.75px #000;
background: var(--bottom-banner);
height: 182px;
width: 440px;
background-size: 440px 182px;
font-size:0!important;
}
.profile-info a{color: #0000; text-shadow: none;} .profile-info p{color: #0000; text-shadow: none;}
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )