Layout published by cristiana

published 1613859070
updated 1616174626

Add to Favorites

View Layouts

View Profile

Report Layout

Customizable Polaroids & Journal

Tags: complex, polaroid, artsy, creative, photos, pictures, journal, handwriting, fun

Description:

layout by cristiana

Weverton Cliffs, WV

Spring rain

Misty hikes

First Snow

Appalachian Trail

Downtown NYC

Hover over a Polaroid to see the whole thing.

DO NOT BE AFRAID to message or comment with any questions you may have, this is a finnicky layout! I will help you!

Click here to view it live on my blog and give kudos if you feel like it.

Leave a comment somewhere if you like it and you think I should know.

If you use it, give me credit in the form of a bulletin, blog, etc. please 😘

Here is an h1.

Here is an h2.

Here is an h3.

Here is an h4.

Important:

The polaroids will be blank when you first input this code. You need to host your images somewhere, then copy and paste the direct links into the top of the code as "image1, image2, image3" etc. in the code.
Like the photos, the captions on the polaroids will be empty when you first input the code. Instructions for changing the caption are below.
The photos and captions are coordinated. When you're putting in the caption, look for the "image#" to know which image you're captioning.
Copy and paste the code from your "About Me" into your blogs if you want them to have this layout, too.

How to put your own pictures in:

Pick 12 images to use and upload them to any image-hosting site.
At the top of the code, input the direct links to your images in place of the hashtag. Do not delete the quotation marks, or else your images will not appear.

Save.

How to put your own captions in:

Scroll down to the bottom of the code, where you see code that looks like this:

Between "div class="caption"" and "/div", write your caption. Like this:

Save.

Preview:

click on the image for a larger preview

Code:

<!-- (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 20 of 43 comments ( View all | Add Comment )

Mortino	1773484304 :OOO this is by far the most creative layout i've ever seen! nice job!! Report Comment
Stuart	1772617397 hi!! i really want to use it but only to have 2 polariods on the left side of my screen. i dont want any of the other polaroids or the background, etc. but im struggling with cutting the right parts of the code out. any help? Report Comment
sir	1770839374 using thx! Report Comment
Melibnny	1769053309 using!! Report Comment
clemOnline11	1767311306 this is so cool Report Comment
𝒮𝓉𝒶𝓇 ⛥	1763752376 Using!! Report Comment
max	1763144963 using!! Report Comment
kieran_x	1761630622 woah, this is actually really cool! Report Comment
Nyx	1760109055 Wow, that's amazing! I love those games, especially Before The Storm. Report Comment
whokilledvaleriee	1759351364 Using for my Friends Space! tysm!! :D Report Comment
Hanko	1758327378 Usingg Report Comment using by //𝓙apanese ℒogarithm 💿; 1758482948; Report
Imnot_Avampire	1757058873 What if I want only one polaroid next to my pfp? do I have to eliminate all the others? Report Comment
Pumpkin	1756318411 This looks so cool! Report Comment
SNAILCAT	1755709634 Is there anyone who csn seprate just the profile from the photo codes? Im kinda struggling w it rn Report Comment
Isa˖๋ ࣭ ⭑	1753665458 usiiiiiing Report Comment
Nola ⚯ ͛	1751981264 could u pls make a layout with just the journal bit and no background? i cant work out which parts r only that./nf Report Comment
𝙫𝙖𝙡𝙚𝙧𝙞𝙖	1750782974 heyy! i really love this layout!! youre so talented omggg but is there any way to just put the polaroids and not the whole profile?? Report Comment
markersthealien	1750174171 using!!! very amazing layout!! Report Comment
Minahil Bukhari	1748943433 how do I take the layout code??? I might be dumb Report Comment nvm lol, using btw! by Minahil Bukhari; 1748943729; Report
sekideki	1743323760 LOVEEE will try to use Report Comment