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

˚₊‧꒰ა ☆ ໒꒱ ‧₊˚ simon	1719551129 usingggg Report Comment
Dev	1718965476 Trippy, usingg Report Comment
♱ Natalie ♱	1710165401 is this only for mobile bc everytime i try and attempt at doing this layout it always messes up Report Comment
mossy :]	1709711417 whoa the comments section is trippy on desktop Report Comment
caokko K.	1707367012 THANKS USING Report Comment
Marcia	1706190323 THIS IS AMAZING!! Report Comment
Scenery	1704479384 how can i make the words bigger or more seeable Report Comment
feli	1702268588 How can I remove these pictures? Report Comment
♡adriamuse♡	1690340127 do you happen to know if theres a way i can add the polaroids and nothing else to another layout? Report Comment
Nikki	1636813819 I made a bulletin crediting you, but I don't think you'll actually see it, so just wanted to say thanks for the awesome layout :) Report Comment Would anyone happen to know how to make the link block reappear, mine is gone when I use the layout by Matt Orso; 1636833008; Report As a photographer I am so excited to use this layout! THANK YOU!!! xoxo by Nikole Guzman; 1637099526; Report I tried this, it looks great, but it changed nothing. Advice on how to make it work? Can't wait to actually use it:) by ._.; 1637491824; Report Thanks so much! I appreciate the shout out. by cristiana; 1639241659; Report using!! by ⛧ svnie ⛧; 1685202544; Report i cant find the code for the actual layout,where is it? by Scenery; 1704215868; Report