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

sekideki	1743323760 LOVEEE will try to use Report Comment
☆princessst@r☆	1742666214 THIS IS AWESOME im def putting all my summer photos here in the fall Report Comment
joulou	1742238992 usingg!! Report Comment
Isa˖๋ ࣭ ⭑	1740940499 THS IS SO COOL OMG USING Report Comment
soda	1740808655 using omg this is so cool Report Comment
💙	1739195225 USING!! Report Comment
emily 𖦹 ׂ 𓈒 ⋆ ۪	1738356852 this is the coolest thing ever using!!!! Report Comment
🧁 Hannah’s party 🍰	1736202768 using!? Report Comment
🧁 Hannah’s party 🍰	1736202766 using!? Report Comment
𝓪𝓷𝓪	1734939803 if I put on the layout is there a way I. could remove the polaroid picture thingy? Report Comment
𝓪𝓷𝓪	1734939791 if I put on the layout is there a way I. could remove the polaroid picture thingy? Report Comment
ania <3	1734101025 using!! Report Comment
McKenna	1732649449 using !! Report Comment
crow <3	1722289160 Is there anyway to have just the polaroids and keep current backgrounds? Like, have a custom background with the polaroids functioning as they do normally? Report Comment find this within the first few lines and replace the link within the quotes with your own image: body { overflow-x: hidden; background: url("https://i.postimg.cc/Z5YRs6Ks/3315469.jpg"); by linx; 1734292875; Report
˚₊‧꒰ა ☆ ໒꒱ ‧₊˚ simon	1719551129 usingggg Report Comment
D	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