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

gothlovesbobamilktea	1751636352 using Report Comment
alessandra	1750890281 usinggg :3 Report Comment
alex2007_e	1750868577 Using!!! Report Comment
gummyLungz ★★	1749566977 USING! Report Comment hi sorry, what hosting site did u use for ur images, because i've tried multiple and none seem to work >.< by kimdraculina; 1750558436; Report hi! i dont really use a hosting site for any of the images in my pfp i usually copy and paste the image address from images i find on pinterest! by gummyLungz ★★; 1751209472; Report
H4RV3Y↺	1748560983 Usingg!! Report Comment
STANLEY	1748402711 Using Report Comment
Quinn	1748396463 using!! Report Comment
c_annenemy	1747709906 using!! thanks!! Report Comment
Jill🍓	1747588367 Ok so i RELLY love this but can someone please tell me how to change the position of the polaroids? when i put them on they just get all in the center of my profile Report Comment
Sarmon(god father of "Liam 𖦹")	1747461507 using!!! TYSMMMM Report Comment
maii	1747223926 using! Report Comment
rey	1747089816 hi! how would i get just the side polaroids? i tried removing th ecode for the banner ones but that got rid of them all somehow. Report Comment how did you end up getting only the side polaroids🙏 by 𝖋𝖊𝖝𝖎𝖓𝖞𝖑.ₑₓₑ; 1748976122; Report
☆𝕀'𝕄-𝕃☆	1746874151 Using thanks <3 Report Comment
Princess Samantha (Branigan simp)	1746736705 using! Report Comment
Katie Cat	1746512164 using :3 Report Comment
Kksblog	1746220021 Will be using! Report Comment
Kksblog	1746220016 Will be using! Report Comment
paris2berlin	1746012866 will use it lateh! Report Comment
aahana<3	1745739041 USING!!! Report Comment
Anna⋆｡𖦹°⭒˚｡⋆	1745615441 Using! i love this ⸜(｡˃ ᵕ ˂ )⸝♡ Report Comment I've tried but I still can't use the thing >_< Could you kinda explain? I use a image hoster and uploaded the images from there, but it won't show? Im not sure if I shouldve added the https part >_< by aahana<3; 1745740428; Report spacehey doesnt work with images from imgur you have to use another site by (Jscorn); 1748512758; Report