<!-- (c) Layout created by cristiana (https://layouts.spacehey.com/layout?id=1862) --> <style> @import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap'); :root { --image1: url("https://i.postimg.cc/sxK266Jt/7-ED95688-8127-4001-9-CD7-F61295-B79-B53.jpg"); --image2: url("https://i.postimg.cc/MTqxC0Xx/big-spring.jpg"); --image3: url("https://i.postimg.cc/7hQkJp9Y/IMG-1081.jpg"); --image4: url("https://i.postimg.cc/x8HdYjnV/2-AC5-A637-B82-A-4-BE9-9057-99451-BB2-FE00.jpg"); --image5: url("https://i.postimg.cc/nr8Hd87R/fleurs.jpg"); --image6: url("https://i.postimg.cc/c18CfhYk/birds-eye.jpg"); --image7: url("https://i.postimg.cc/zBHzSDLH/cliffs.jpg"); --image8: url("https://i.postimg.cc/YS9q0zM3/droplets.jpg"); --image9: url("https://i.postimg.cc/zfV88DF2/File-001-1.jpg"); --image10: url("https://i.postimg.cc/6pzpBmJq/File-001-2.jpg"); --image11: url("https://i.postimg.cc/xT30P4d5/File-001-3.jpg"); --image12: url("https://i.postimg.cc/52ftdMrD/File-002.jpg"); --image13: url("https://i.postimg.cc/bwYqV9Dh/File-003.jpg"); --image14: url("https://i.postimg.cc/W4Hpkq4P/File-003-1.jpg"); } body { overflow-x: hidden; background: url("https://i.postimg.cc/Z5YRs6Ks/3315469.jpg"); } body, .search-wrapper input, .top .center form button, .logout-btn, .logout-form { font-family: 'Reenie Beanie', cursive; } .container { background-image: url(https://i.postimg.cc/sD85zmSp/MO-Ruled-Pages-7ff7784e-44c5-4c24-86eb-2facd59e4b53.png); background-repeat: no-repeat; width: 908px; margin-top: 300px; padding: 0 11px; } nav { font-size: 20px; } nav .top, nav .links, nav .links a, main, .logout-btn, .logout-form { background: transparent; color: #224678; font-size: 20px; font-weight: normal; } nav .top { padding: 12px 6px 3px 26px; align-items: center; } nav .top .left .logo { padding: 6px; background: var(--logo-blue); border-radius: 5px; transform: rotate(-4deg); width: 120px; position: relative; top: 5px; } nav .top .center { text-align: left; padding-left: 8px; display: flex; flex-direction: column; flex-wrap: wrap; height: 35px; } nav .top .center form { position: relative; left: 300px; margin-top: 0; width: 223px; display: flex; flex-direction: column; } .search-wrapper { position: absolute; bottom: 0; } .search-wrapper input { border-color: var(--logo-blue); border-width: 1px; border-radius: 5px; font-size: 20px; height: 20px; } .top .center form button { align-self: flex-end; font-size: 20px; height: 20px; line-height: 20px; border: 1px solid var(--logo-blue); border-radius: 5px; } nav .links { display: flex; justify-content: space-evenly; } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { content: " |"; color: inherit; } .links li a img { display: none; } main { height: 628px; overflow-y: hidden; padding: 0; } .col.w-40.left { width: 100%; display: flex; flex-wrap: wrap; padding-left: 24px; position: relative; } .col.w-40.left > h1 { width: 162px; position: absolute; transform: rotate(5deg); text-transform: uppercase; top: 178px; z-index: 1; text-align: center; } .col.w-40.left > p:first-of-type { width: 100%; margin: 0; position: absolute; z-index: 1; } .general-about { display: flex; } .general-about p { margin: 0; width: 100px; } .general-about .details { height: min-content; } .details p:nth-child(2), .details p:nth-child(3) { position: relative; top: 25px; } p.online { position: relative; top: 20px; } .online img { height: 18px; position: relative; top: 3px; right: 6px; } .profile .mood { width: 55%; display: flex; flex-direction: column; justify-content: flex-end; position: absolute; right: 2px; top: 160px; } .profile .mood p { margin: 0; } .mood p:first-child { position: relative; bottom: 20px; left: 10px; } .mood p:first-child b { display: flex; flex-direction: column; } .profile .contact, .profile .url-info, .profile .table-section, .home-actions { width: 100%; border: 0; margin: 0; flex-direction: column; } .profile .contact .heading, .profile .table-section .heading, .home-actions .heading { display: none; } .profile .contact .f-row { display: flex; flex-direction: column; margin: 0; } .f-col { height: 21px; } img.icon { width: auto; height: auto; } .profile .url-info { padding: 0; position: relative; top: 20px; margin-bottom: 10px; } .profile .url-info p:last-child { position: absolute; right: 0; top: 25px; } .contact .inner { width: max-content; right: 5px; position: absolute; top: 10px; } .table-section { position: relative; top: 25px; } .table-section:last-child { top: 40px; } table.details-table { border-spacing: 1px; } table.details-table:nth-of-type(2) { position: relative; top: 15px; } .details-table td { padding: 0; } .details-table td, .details-table td:first-child { background: transparent; } td img.icon { height: 16px; position: relative; bottom: 5px; } .profile-info { border: 0; padding: 0; height: 20px; margin: 0; position: relative; top: 5px; } .blog-preview { position: relative; top: 23px; max-height: 85px; overflow-y: scroll; padding: 0 10px; } .blog-preview * { margin: 0; } .profile .blurbs { margin: 40px 0 0; height: 150px; overflow-y: scroll; } .profile .blurbs .heading, .profile .friends .heading { background: transparent; color: inherit; } .profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner { padding: 0 7px; } .profile .blurbs .section { margin: 0; } .profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p { margin: 0; } a:hover { text-decoration: none; } button:hover { cursor: pointer!important; } h1 { text-transform: uppercase; } h1:not(.col.w-40.left > h1) { font-size: 50px!important; line-height: 35px;} h2 { color: rgba(34,70,120,0.8); text-transform: uppercase; line-height: 25px; text-shadow: 3px 1px var(--dark-orange); letter-spacing: 2px; } h3 { } h4 { } .blurbs .section:first-of-type p:first-of-type { display: none; } .blurbs h3, .blurbs h4:not(h4:first-child), .blurbs p { line-height: 15px; } .blurbs h4:not(h4:first-child), .blog-entry h4 { background-image: linear-gradient(to right, rgba(253,255,0,0.6), rgba(253,255,0,0.3)); width: max-content; color: inherit!important; font-weight: normal; } .blurbs h4:not(h4:first-child), .blurbs p { display: inline; } h1, h2, h3, h4 { margin: 0!important; } h4:first-child:not(.section h4:first-child) { background-image: linear-gradient(to right, rgba(253,255,0,0.6), rgba(253,255,0,0.3)); width: max-content; } p { line-height: 21px; } .blurbs h1, .blurbs h2, .blurbs h3, .blurbs h4, .blurbs p { padding: 0 10px; } .profile .blurbs .section h4:first-child { text-transform: uppercase; letter-spacing: 1px; } .blurbs h3, .blog-entry h3 { text-transform: capitalize; } .friends:not(.friends#comments) { position: relative; top: 15px; } .friends:not(.friends#comments) > .inner { position: relative; top: 3px; } .friends-grid { height: 140px; overflow-y: scroll; display: flex; justify-content: space-evenly; flex-wrap: wrap; } .profile .friends .person { position: relative; } .profile .friends .person a:not(a:first-child) { border: solid white; border-width: 5px 5px 25px; box-shadow: 3px 3px 5px #515151; width: 150px; display: table-cell; } .profile .friends .person a:first-child p { position: absolute; top: 100px; } .profile .friends .person img:not(.icon) { width: 95px; height: 95px; } div#comments { position: relative; top: 20px; } div#comments .heading { display: none; } div#comments .inner { height: 128px; overflow-y: scroll; } table.comments-table, table.music-table, table.bulletin-table, .comments-table table tbody, .comments-table tr, .comments-table td, .music-table td, .comments-table td *, .music-table td * { background: transparent!important; border: 0!important; } .comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon) { border: solid white!important; border-width: 5px 5px 25px!important; transform: rotate(-5deg); box-shadow: 3px 3px 5px #515151; width: 90px; height: 110px; } .comments-table button { font-family: inherit; font-size: inherit; } .comments-table button, .comments-table p.report { font-size: inherit!important; font-weight: bold; margin: 0!important; color: var(--dark-orange); } .comments-table td:first-child, .music-table td:first-child { position: relative; } .comment-replies, td:last-child a:last-child:not(p.report a, small a, .details-table a) { padding-left: 14px; position: relative; bottom: 28px; } td a:first-child p { position: absolute; width: 100px; z-index: 1; transform: rotate(-5deg); top: 91px; left: 29px; word-break: normal; } .rotatepls { display: none; } .side-photos { display: flex; flex-direction: column; align-items: center; position: absolute; top: 300px; width: 270px; } .banner { display: flex; flex-direction: row; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 300px; padding: 30px; } .side-photos.leftside { left: -30px; } .side-photos.rightside { right: -20px; } .polaroid { background: white; height: 266px; width: 214px; box-shadow: 5px 5px 10px #515151; padding: 12px; } .banner:hover, .side-photos:hover { z-index: 1; } .polaroid:hover { z-index: 1; } .polaroid:focus { z-index: 1; } .banner.polaroid:not(div:first-child) { margin-left: -10px; } .side-photos.polaroid { margin-top: -10px; } .image { height: 190px; width: 190px; background-color: grey; background-size: cover; background-position: center; } #image1 { background-image: var(--image1); } #image2 { background-image: var(--image2); } #image3 { background-image: var(--image3); } #image4 { background-image: var(--image4); } #image5 { background-image: var(--image5); } #image6 { background-image: var(--image6); } #image7 { background-image: var(--image7); } #image8 { background-image: var(--image8); } #image9 { background-image: var(--image9); } #image10 { background-image: var(--image10); } #image11 { background-image: var(--image11); } #image12 { background-image: var(--image12); } #image13 { background-image: var(--image13); } #image14 { background-image: var(--image14); } .skewleft { transform: rotate(20deg); } .skewright { transform: rotate(-20deg); } .caption { display: flex; align-items: center; justify-content: center; max-width: 100%; height: 64px; overflow: hidden; text-align: center; font-size: 26px; line-height: 24px; color: #0f2440; } .general-about .profile-pic { background: white; padding: 5px 5px 33px; box-shadow: 5px 5px 10px #515151; height: auto; transform: rotate(5deg); } footer { background: transparent; margin-top: 50px; font-size: inherit; font-family: monospace; } .row.blog-entry { display: flex; } .blog-entry .col.w-20.left { width: 50%; } .edit-info { background: transparent; border: 0; display: flex; align-items: end; flex-wrap: wrap; flex-direction: column; height: 180px; padding: 0 20px; } .edit-info * { margin: 0; } .blog-entry .profile-pic { border-width: 10px 10px 35px!important; border: solid white; box-shadow: 5px 5px 10px #515151; transform: rotate(-5deg); height: 155px; margin-bottom: 5px; } .blog-entry p.category { display: flex; flex-direction: row; flex-wrap: wrap; width: 180px; overflow-wrap: break-word; } .edit-info .category b::after { content: " "; white-space: pre; } .blog-entry .col.right { width: 50%; height: 630px; overflow-y: scroll; } .blog-entry div#comments { position: absolute; right: 700px; top: 595px; } .blog-entry div#comments .inner { height: 415px; } .blog-entry button { font-family: 'Reenie Beanie', cursive; font-size: inherit; font-weight: bold; background: transparent; border: 0; line-height: 30px; } #credit { position: fixed; bottom: 3px; left: 3px; font-family: sans-serif; font-size: 10px; color: black; background: white; padding: 2px; border-radius: 2px; z-index: 5; letter-spacing: 1px; } #credit { position: fixed; bottom: 3px; left: 3px; font-family: sans-serif; font-size: 10px; color: black; background: white; padding: 2px; border-radius: 2px; z-index: 5; letter-spacing: 1px; } @media screen and (max-width: 800px) { .container { background-size: 198%; margin-top: 525px; } nav .top { position: relative; } nav .top .center form { left: 0; } nav .top .center { justify-content: flex-end; } nav ul.links { flex-wrap: wrap; justify-content: center; } main { overflow-y: scroll; overflow-x: hidden; height: 400px; width: 95%; } .row.profile { display: flex; flex-direction: column; } .general-about { display: initial; } .details p:nth-child(2), .details p:nth-child(3) { position: unset; } p.online { top: 0; left: 0; } .profile .mood { position: initial; width: auto; } .mood p:first-child { bottom: 0; left: 0; } .mood p:first-child b { display: initial; } .profile-info { margin: 15px 0; } .profile .url-info { display: flex; flex-direction: column!important; } .blog-preview { max-height: inherit; } .profile .blurbs, .friends-grid, div#comments .inner { height: auto; } td a:first-child p { left: 10px; } .comment-replies { margin-top: 25px; } .profile .url-info p:last-child { top: -5px; } .row.blog-entry { flex-direction: column; } .blog-entry .col.w-20.left { width: 70%; } .blog-entry .col.right { width: 90%; margin-left: 5%; } .polaroid { height: 125px; width: 100px; padding: 10px; } .image { width: 80px; height: 80px; } .caption { height: 33px; font-size: 18px; line-height: 14px; margin: 1px 0; } .side-photos { flex-direction: row; top: 150px; } .side-photos.leftside { left: 30px; top: 275px; } .side-photos.rightside { right: 60px; top: 400px; } .banner { height: auto; flex-wrap: wrap; } } </style> <div id="credit"> layout by <a href="https://www.spacehey.com/cristiana">cristiana</a> </div> <div class="banner flex-row"> <div class="polaroid skewleft"> <div class="image" id="image1"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image2"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image3"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image4"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image5"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image6"></div> <div class="caption"></div> </div> </div> <div class="side-photos leftside"> <div class="polaroid skewright"> <div class="image" id="image7"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image8"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image9"></div> <div class="caption"></div> </div> </div> <div class="side-photos rightside"> <div class="polaroid skewleft"> <div class="image" id="image11"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image12"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image13"></div> <div class="caption"></div> </div> </div>

Tags:

Description:

<!-- (c) Layout created by cristiana (https://layouts.spacehey.com/layout?id=1862) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');

:root {
    --image1: url("https://i.postimg.cc/sxK266Jt/7-ED95688-8127-4001-9-CD7-F61295-B79-B53.jpg");
    --image2: url("https://i.postimg.cc/MTqxC0Xx/big-spring.jpg");
    --image3: url("https://i.postimg.cc/7hQkJp9Y/IMG-1081.jpg");
    --image4: url("https://i.postimg.cc/x8HdYjnV/2-AC5-A637-B82-A-4-BE9-9057-99451-BB2-FE00.jpg");
    --image5: url("https://i.postimg.cc/nr8Hd87R/fleurs.jpg");
    --image6: url("https://i.postimg.cc/c18CfhYk/birds-eye.jpg");
    --image7: url("https://i.postimg.cc/zBHzSDLH/cliffs.jpg");
    --image8: url("https://i.postimg.cc/YS9q0zM3/droplets.jpg");
    --image9: url("https://i.postimg.cc/zfV88DF2/File-001-1.jpg");
    --image10: url("https://i.postimg.cc/6pzpBmJq/File-001-2.jpg");
    --image11: url("https://i.postimg.cc/xT30P4d5/File-001-3.jpg");
    --image12: url("https://i.postimg.cc/52ftdMrD/File-002.jpg");
    --image13: url("https://i.postimg.cc/bwYqV9Dh/File-003.jpg");
    --image14: url("https://i.postimg.cc/W4Hpkq4P/File-003-1.jpg");
}


body {
    overflow-x: hidden;
    background: url("https://i.postimg.cc/Z5YRs6Ks/3315469.jpg");
}
body, .search-wrapper input, .top .center form button, .logout-btn, .logout-form {
    font-family: 'Reenie Beanie', cursive;
}
.container {
    background-image: url(https://i.postimg.cc/sD85zmSp/MO-Ruled-Pages-7ff7784e-44c5-4c24-86eb-2facd59e4b53.png);
    background-repeat: no-repeat;
    width: 908px;
    margin-top: 300px;
    padding: 0 11px;
}
nav {
    font-size: 20px;
}
nav .top, nav .links, nav .links a, main, .logout-btn, .logout-form {
    background: transparent;
    color: #224678;
    font-size: 20px;
    font-weight: normal;
}
nav .top {
    padding: 12px 6px 3px 26px;
    align-items: center;
}
nav .top .left .logo {
    padding: 6px;
    background: var(--logo-blue);
    border-radius: 5px;
    transform: rotate(-4deg);
    width: 120px;
    position: relative;
    top: 5px;
}
nav .top .center {
    text-align: left;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 35px;
}
nav .top .center form {
    position: relative;
    left: 300px;
    margin-top: 0;
    width: 223px;
    display: flex;
    flex-direction: column;
}
.search-wrapper {
    position: absolute;
    bottom: 0;
}
.search-wrapper input {
    border-color: var(--logo-blue);
    border-width: 1px;
    border-radius: 5px;
    font-size: 20px;
    height: 20px;
}
.top .center form button {
    align-self: flex-end;
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    border: 1px solid var(--logo-blue);
    border-radius: 5px;
}
nav .links {
    display: flex;
    justify-content: space-evenly;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " |";
    color: inherit;
}
.links li a img {
    display: none;
}
main {
    height: 628px;
    overflow-y: hidden;
    padding: 0;
}
.col.w-40.left {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 24px;
    position: relative;
}
.col.w-40.left > h1 {
    width: 162px;
    position: absolute;
    transform: rotate(5deg);
    text-transform: uppercase;
    top: 178px;
    z-index: 1;
    text-align: center;
}
.col.w-40.left > p:first-of-type {
    width: 100%;
    margin: 0;
    position: absolute;
    z-index: 1;
}
.general-about {
    display: flex;
}

.general-about p {
    margin: 0;
    width: 100px;
}
.general-about .details {
    height: min-content;
}
.details p:nth-child(2), .details p:nth-child(3) {
    position: relative;
    top: 25px;
}
p.online {
    position: relative;
    top: 20px;
}
.online img {
    height: 18px;
    position: relative;
    top: 3px;
    right: 6px;
}
.profile .mood {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    right: 2px;
    top: 160px;
}
.profile .mood p {
    margin: 0;
}
.mood p:first-child {
    position: relative;
    bottom: 20px;
    left: 10px;
}
.mood p:first-child b {
    display: flex;
    flex-direction: column;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    width: 100%;
    border: 0;
    margin: 0;
    flex-direction: column;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    display: none;
}
.profile .contact .f-row {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.f-col {
    height: 21px;
}
img.icon {
    width: auto;
    height: auto;
}
.profile .url-info {
    padding: 0;
    position: relative;
    top: 20px;
    margin-bottom: 10px;
}
.profile .url-info p:last-child {
    position: absolute;
    right: 0;
    top: 25px;
}
.contact .inner {
    width: max-content;
    right: 5px;
    position: absolute;
    top: 10px;
}
.table-section {
    position: relative;
    top: 25px;
}
.table-section:last-child {
    top: 40px;
}
table.details-table {
    border-spacing: 1px;
}
table.details-table:nth-of-type(2) {
    position: relative;
    top: 15px;
}
.details-table td {
    padding: 0;
}
.details-table td, .details-table td:first-child {
    background: transparent;
}
td img.icon {
    height: 16px;
    position: relative;
    bottom: 5px;
}
.profile-info {
    border: 0;
    padding: 0;
    height: 20px;
    margin: 0;
    position: relative;
    top: 5px;
}
.blog-preview {
    position: relative;
    top: 23px;
    max-height: 85px;
    overflow-y: scroll;
    padding: 0 10px;
}
.blog-preview * {
    margin: 0;
}
.profile .blurbs {
    margin: 40px 0 0;
    height: 150px;
    overflow-y: scroll;
}
.profile .blurbs .heading, .profile .friends .heading {
    background: transparent;
    color: inherit;
}
.profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner {
    padding: 0 7px;
}
.profile .blurbs .section {
    margin: 0;
}
.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
    margin: 0;
}
a:hover {
    text-decoration: none;
}
button:hover {
    cursor: pointer!important;
}
h1 {
    text-transform: uppercase;
}
h1:not(.col.w-40.left > h1) {
    font-size: 50px!important;
    line-height: 35px;}
h2 {
    color: rgba(34,70,120,0.8);
    text-transform: uppercase;
    line-height: 25px;
    text-shadow: 3px 1px var(--dark-orange);
    letter-spacing: 2px;
}
h3 {

}
h4 {

}
.blurbs .section:first-of-type p:first-of-type {
    display: none;
}
.blurbs h3, .blurbs h4:not(h4:first-child), .blurbs p {
    line-height: 15px;
}
.blurbs h4:not(h4:first-child), .blog-entry h4 {
    background-image: linear-gradient(to right, rgba(253,255,0,0.6), rgba(253,255,0,0.3));
    width: max-content;
    color: inherit!important;
    font-weight: normal;
}
.blurbs h4:not(h4:first-child), .blurbs p {
    display: inline;
}
h1, h2, h3, h4 {
    margin: 0!important;
}
h4:first-child:not(.section h4:first-child) {
    background-image: linear-gradient(to right, rgba(253,255,0,0.6), rgba(253,255,0,0.3));
    width: max-content;
}
p {
    line-height: 21px;
}
.blurbs h1, .blurbs h2, .blurbs h3, .blurbs h4, .blurbs p {
    padding: 0 10px;
}
.profile .blurbs .section h4:first-child {
    text-transform: uppercase;
    letter-spacing: 1px;
}
.blurbs h3, .blog-entry h3 {
    text-transform: capitalize;
}
.friends:not(.friends#comments) {
    position: relative;
    top: 15px;
}
.friends:not(.friends#comments) > .inner {
    position: relative;
    top: 3px;
}
.friends-grid {
    height: 140px;
    overflow-y: scroll;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.profile .friends .person {
    position: relative;
}
.profile .friends .person a:not(a:first-child) {
    border: solid white;
    border-width: 5px 5px 25px;
    box-shadow: 3px 3px 5px #515151;
    width: 150px;
    display: table-cell;
}
.profile .friends .person a:first-child p {
    position: absolute;
    top: 100px;
}
.profile .friends .person img:not(.icon) {
    width: 95px;
    height: 95px;
}
div#comments {
    position: relative;
    top: 20px;
}
div#comments .heading {
    display: none;
}
div#comments .inner {
    height: 128px;
    overflow-y: scroll;
}
table.comments-table, table.music-table, table.bulletin-table, .comments-table table tbody, .comments-table tr, .comments-table td, .music-table td, .comments-table td *, .music-table td * {
    background: transparent!important;
    border: 0!important;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon) {
    border: solid white!important;
    border-width: 5px 5px 25px!important;
    transform: rotate(-5deg);
    box-shadow: 3px 3px 5px #515151;
    width: 90px;
    height: 110px;
}
.comments-table button {
    font-family: inherit;
    font-size: inherit;
}
.comments-table button, .comments-table p.report {
    font-size: inherit!important;
    font-weight: bold;
    margin: 0!important;
    color: var(--dark-orange);
}
.comments-table td:first-child, .music-table td:first-child {
    position: relative;
}
.comment-replies, td:last-child a:last-child:not(p.report a, small a, .details-table a) {
    padding-left: 14px;
    position: relative;
    bottom: 28px;
}
td a:first-child p {
    position: absolute;
    width: 100px;
    z-index: 1;
    transform: rotate(-5deg);
    top: 91px;
    left: 29px;
    word-break: normal;
}




.rotatepls {
    display: none;
}
.side-photos {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 300px;
    width: 270px;
}
.banner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    padding: 30px;
}
.side-photos.leftside {
    left: -30px;
}
.side-photos.rightside {
    right: -20px;
}
.polaroid {
    background: white;
    height: 266px;
    width: 214px;
    box-shadow: 5px 5px 10px #515151;
    padding: 12px;
}
.banner:hover, .side-photos:hover {
    z-index: 1;
}
.polaroid:hover {
    z-index: 1;
.polaroid:focus {
    z-index: 1;
}
.banner.polaroid:not(div:first-child) {
    margin-left: -10px;
}
.side-photos.polaroid {
   margin-top: -10px;
}
.image {
    height: 190px;
    width: 190px;
    background-color: grey;
    background-size: cover;
    background-position: center;
}
#image1 {
   background-image: var(--image1);
}
#image2 {
   background-image: var(--image2);
}
#image3 {
   background-image: var(--image3);
}
#image4 {
   background-image: var(--image4);
}
#image5 {
   background-image: var(--image5);
}
#image6 {
   background-image: var(--image6);
}
#image7 {
   background-image: var(--image7);
}
#image8 {
   background-image: var(--image8);
}
#image9 {
   background-image: var(--image9);
}
#image10 {
   background-image: var(--image10);
}
#image11 {
   background-image: var(--image11);
}
#image12 {
   background-image: var(--image12);
}
#image13 {
   background-image: var(--image13);
}
#image14 {
   background-image: var(--image14);
}
.skewleft {
    transform: rotate(20deg);
}
.skewright {
    transform: rotate(-20deg);
}
.caption {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: 64px;
    overflow: hidden;
    text-align: center;
    font-size: 26px;
    line-height: 24px;
    color: #0f2440;
}
.general-about .profile-pic {
    background: white;
    padding: 5px 5px 33px;
    box-shadow: 5px 5px 10px #515151;
    height: auto;
    transform: rotate(5deg);
}
footer {
    background: transparent;
    margin-top: 50px;
    font-size: inherit;
    font-family: monospace;
}
.row.blog-entry {
    display: flex;
}
.blog-entry .col.w-20.left {
    width: 50%;
}
.edit-info {
    background: transparent;
    border: 0;
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    flex-direction: column;
    height: 180px;
    padding: 0 20px;
}
.edit-info * {
    margin: 0;
}
.blog-entry .profile-pic {
    border-width: 10px 10px 35px!important;
    border: solid white;
    box-shadow: 5px 5px 10px #515151;
    transform: rotate(-5deg);
    height: 155px;
    margin-bottom: 5px;
}
.blog-entry p.category {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 180px;
    overflow-wrap: break-word;
}
.edit-info .category b::after {
    content: " ";
    white-space: pre;
}
.blog-entry .col.right {
    width: 50%;
    height: 630px;
    overflow-y: scroll;
}
.blog-entry div#comments {
    position: absolute;
    right: 700px;
    top: 595px;
}
.blog-entry div#comments .inner {
    height: 415px;
}
.blog-entry button {
    font-family: 'Reenie Beanie', cursive;
    font-size: inherit;
    font-weight: bold;
    background: transparent;
    border: 0;
    line-height: 30px;
}

#credit {
    position: fixed;
    bottom: 3px;
    left: 3px;
    font-family: sans-serif;
    font-size: 10px;
    color: black;
    background: white;
    padding: 2px;
    border-radius: 2px;
    z-index: 5;
    letter-spacing: 1px;
}
#credit {
    position: fixed;
    bottom: 3px;
    left: 3px;
    font-family: sans-serif;
    font-size: 10px;
    color: black;
    background: white;
    padding: 2px;
    border-radius: 2px;
    z-index: 5;
    letter-spacing: 1px;
}



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

.container {
    background-size: 198%;
    margin-top: 525px;
}
nav .top {
    position: relative;
}
nav .top .center form {
    left: 0;
}
nav .top .center {
    justify-content: flex-end;
}
nav ul.links {
    flex-wrap: wrap;
    justify-content: center;
}
main {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 400px;
    width: 95%;
}
.row.profile {
    display: flex;
    flex-direction: column;
}
.general-about {
    display: initial;
}
.details p:nth-child(2), .details p:nth-child(3) {
    position: unset;
}
p.online {
    top: 0;
    left: 0;
}
.profile .mood {
    position: initial;
    width: auto;
}
.mood p:first-child {
    bottom: 0;
    left: 0;
}
.mood p:first-child b {
    display: initial;
}
.profile-info {
    margin: 15px 0;
}
.profile .url-info {
    display: flex;
    flex-direction: column!important;
}
.blog-preview {
    max-height: inherit;
}
.profile .blurbs, .friends-grid, div#comments .inner {
    height: auto;
}
td a:first-child p {
    left: 10px;
}
.comment-replies {
    margin-top: 25px;
}
.profile .url-info p:last-child {
    top: -5px;
}
.row.blog-entry {
    flex-direction: column;
}
.blog-entry .col.w-20.left {
    width: 70%;
}
.blog-entry .col.right {
    width: 90%;
    margin-left: 5%;
}

.polaroid {
    height: 125px;
    width: 100px;
    padding: 10px;
}
.image {
    width: 80px;
    height: 80px;
}
.caption {
    height: 33px;
    font-size: 18px;
    line-height: 14px;
    margin: 1px 0;
}
.side-photos {
    flex-direction: row;
    top: 150px;
}
.side-photos.leftside {
    left: 30px;
    top: 275px;
}
.side-photos.rightside {
    right: 60px;
    top: 400px;
}
.banner {
    height: auto;
    flex-wrap: wrap;
}

}

</style>


<div id="credit">
    layout by <a href="https://www.spacehey.com/cristiana">cristiana</a>
</div>
<div class="banner flex-row">
    <div class="polaroid skewleft">
        <div class="image" id="image1"></div>
        <div class="caption"></div>
    </div>
    <div class="polaroid skewright">
        <div class="image" id="image2"></div>
        <div class="caption"></div>
    </div>
    <div class="polaroid skewleft">
        <div class="image" id="image3"></div>
        <div class="caption"></div>
    </div>
    <div class="polaroid skewright">
        <div class="image" id="image4"></div>
        <div class="caption"></div>
    </div>
    <div class="polaroid skewleft">
        <div class="image" id="image5"></div>
        <div class="caption"></div>
    </div>
    <div class="polaroid skewright">
        <div class="image" id="image6"></div>
        <div class="caption"></div>
    </div>
</div>
<div class="side-photos leftside">
    <div class="polaroid skewright">
        <div class="image" id="image7"></div>
        <div class="caption"></div>
    </div>
    <div class="polaroid skewleft">
        <div class="image" id="image8"></div>
        <div class="caption"></div>
    </div>
    <div class="polaroid skewright">
        <div class="image" id="image9"></div>
        <div class="caption"></div>
    </div>
</div>
<div class="side-photos rightside">
    <div class="polaroid skewleft">
        <div class="image" id="image11"></div>
        <div class="caption"></div>
    </div>
    <div class="polaroid skewright">
        <div class="image" id="image12"></div>
        <div class="caption"></div>
    </div>
    <div class="polaroid skewleft">
        <div class="image" id="image13"></div>
        <div class="caption"></div>
    </div>
</div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.


Comments

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