Layout published by cristiana

published 1613863644
updated 1616174370

Add to Favorites

View Layouts

View Profile

Report Layout

Customizable Polaroids to Add to Any Layout

Tags: polaroids, pictures, custom, customize, customizable, photos, photo, polaroid

Description:

Weverton Cliffs, WV

Spring rain

Misty hikes

First Snow

Appalachian Trail

Downtown NYC

layout by cristiana

Add this code to any layout to get customizable Polaroids with captions on the top and sides of your page.

Hover over a Polaroid to view the whole thing.

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 post, etc. please 😘

Note: Layouts with large top banners might have unexpected results. Send me a message or a comment if you have any questions.

Important:

This code goes at the VERY BOTTOM of your About Me section.
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=1866) -->

<style>
:root {
    --image1: url("#");
    --image2: url("#");
    --image3: url("#");
    --image4: url("#");
    --image5: url("#");
    --image6: url("#");
    --image7: url("#");
    --image8: url("#");
    --image9: url("#");
    --image10: url("#");
    --image11: url("#");
    --image12: url("#");
    --image13: url("#");
    --image14: url("#");
}
.container {
    margin-top: 300px;
}
.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: -20px;
}
.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;
} 
.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;
    line-height: 24px;
    color: #0f2440;
}
#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 {
    margin-top: 525px;
}
.polaroid {
    height: 125px;
    width: 100px;
    padding: 10px;
}
.image {
    width: 80px;
    height: 80px;
}
.caption {
    height: 33px;
    font-size: 10px;
    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 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>
<div id="credit">
    layout by <a href="https://www.spacehey.com/cristiana">cristiana</a>
</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 21 comments ( View all | Add Comment )

☆DONOVAN/RY♡	1701454147 ur amazing!! USINg!!!1 Report Comment
Ash/crow !!	1699072210 usinggg Report Comment
Kat	1698500057 might use! Report Comment
Poofy.?!	1698288928 using!! Report Comment
김산지	1698127851 thank you Report Comment
Xx.nailbatz.xX	1695098151 using ! Report Comment
layne	1693887146 omg using Report Comment
Nana (profile testing)	1693442219 This is so cool! Report Comment
luna ✶	1689491274 this is so cool, thanks! i love it Report Comment
Madison Brown	1689321511 Hi Cristiana, thank you so much for making this awesome layout & sharing it! .. I've been trying to use it & it didn't show up on my layout.. I mean the photos didn't. .. I used jpg codes from post.img.. any suggestions on how to get it to work? .. Thank you! Report Comment ..do the photos maybe need to be a certain size or something? by Madison Brown; 1689321785; Report
𝓓𝓸𝓵𝓵	1682033383 Perfect Report Comment
kilueo	1656736936 These r so fun Report Comment Thanks! Glad you enjoy it by cristiana; 1657899096; Report
ItsToniMarie	1637632141 Hi! This is a mess, on mobile! It covers my profile pic and everything else beside and around it. Do you know why it would be doing this? Or how I can fix it? Please & Thank you. ️ Report Comment can u please tell me how you loaded your personal pics on the layout.. im overly stressed lol by beauty8937; 1637777882; Report Hi! Sorry to hear that. It's styled for mobile to have the photos lay above your profile. This layout is active on my profile if you want to see what it should look like. I suspect the layout you're using it with is causing interference. If you let me take a look at your code, I can try and make it work for you! by cristiana; 1639240699; Report
Jram	1637038120 Love it! Report Comment Thank you! by cristiana; 1639240738; Report
Mel ♡ TheViewsGreat	1636780755 This is so awesome, creative but not super busy Report Comment Thanks so much by cristiana; 1639240786; Report
SinicallyTwisted	1636134002 As an artist, this is perfect for me. Thank you kindly for creating this! Report Comment I'm so glad you like it! by cristiana; 1639240610; Report
Canine Owned	1624459542 I like this. This is cool. Can you recommend an image hosting site? Report Comment Thanks so much! And yeah! The one I use is free and doesn't require an account, but if you make an account it'll save a gallery of your images to use over and over. The website is https://postimages.org/ by cristiana; 1624539840; Report
KarenRadd	1615021056 Love it! Report Comment Thank you! by cristiana; 1615086148; Report Hey! I checked out your profile and noticed all the polaroids have adopted the blue borders from the rest of your layout If you want to remove those, add this code snippet right before the </style> tag `.polaroid, .polaroid * { border: 0; }` by cristiana; 1615086475; Report Oh thank you! by KarenRadd; 1615099409; Report
MIGGYJAI	1613945141 this is so amazing you did a great job! Report Comment Thank you!! by cristiana; 1613945237; Report
An	1613938425 WOW, THIS IS AMAZING!!! Report Comment Thank you so much!!! by cristiana; 1613939576; Report