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

𝓗𝓐𝓝𝓐𝓝	1743236819 using! Report Comment
击 rocky :3	1742428992 USINGGG Report Comment
Hero Park	1741845571 USINGG Report Comment
gndhy	1741467731 USANDOOO Report Comment Hola, ¿puedes decirme cómo lograste agregar las fotos? Por alguna razón el mio no aparece :/ by Ju0li.et; 1741484015; Report puede ser por el link de las fotos, a mi me paso eso, si usaste la pagina https://es.imgbb.com/ no copies el link completo que te da, asegúrate que solo usar la parte que comience con "https" y termine con ".jpg" no se si me explique D: by gndhy; 1741565003; Report Oh gracias, funcionó!! <3 (perdón si algo es extraño, estoy usando un traductor porque no sé hablar español XD) by Ju0li.et; 1742400410; Report
Remiii ⋆｡°✩	1741454490 usinggg Report Comment
⛧🎀💿 Eira 💿🎀⛧	1740956712 using but the images doesn't appear. how do i make them show? Report Comment
Morphinesx	1740953687 Como coloca as imagens no lado da página? Report Comment
meli 𖤐	1740846438 yo, 4 of the polaroid images just straight wont work 🙏 Report Comment
𝓗𝓐𝓝𝓐𝓝	1739589802 using (: Report Comment
Mr.Joy 🦇🍓 (✧˖°✧˖°꩜)	1739560304 using Report Comment
bugsbunny<3	1739403281 usinggg!! Report Comment
⊗⋆𝖑𝖆𝖚𝖗𝖆⋆𖦹∘♬’⭑.ᐟ	1739390042 Omggg looks so coooll Report Comment
pixellexie	1739210289 I'm going to try to use this :))) Report Comment
rcntly_rsrrctd	1739080544 using !! Report Comment
Alice	1739048038 usingg Report Comment
dhanuya	1738712248 using thx <33 Report Comment
ky	1738493209 does anyone know how to make the top polaroids go to the sides? Ive managed to make the right ones go to the left and make the top ones go down but the top ones appear in my about me instead of the left side of my profile need help pls!! Report Comment
NOVaL	1738357428 This is so cute, using x!! Report Comment
Ren	1738185235 using! Report Comment
ky	1738148318 using!! (it lets you put 14 images but only 12 appear) Report Comment