Add to Favorites
View Layouts
View Profile
Report Layout
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 )