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

Sekiron	1727256449 And now, using Report Comment
koi fish (>U<)	1725115619 using Report Comment
⦻Fizzy_Blood⦻	1724900394 using Report Comment
sk4t1n9s0da	1724449485 might use, thanks!! Report Comment
XxAGG1ESTARxX	1723486496 Probably gonna use! :3 Report Comment
⁠♡⁠.MORA.♡	1722017877 USANDOOOOOOOOOOOOO Report Comment BUEEEEEEEENO, un diseño muy bonito que te deja muuuchas posibilidades... mi unica queja es que las fotos del costado derecho se juntan con las del costado izquierdo y todo se ve muuuy amontonado y feo. Lo unico que se puede rescatar de eso son los 6 espacios de arriba, esos si pueden usarse correctamente pero los de los costados no se puede. Aun asi es un lindo decorador. Gracias y lindo dia. by ⁠♡⁠.MORA.♡; 1722029446; Report
Flygirl(backup)	1721978461 using!! Report Comment
ベガス(VEGAS)	1720888612 using ^^ Report Comment
r4zor_ros4ry	1720771288 using Report Comment
r4zor_ros4ry	1720771288 using Report Comment
jean	1720736674 using!! Report Comment
Liam	1720684984 usinf Report Comment
ko	1720106866 using !! Report Comment
oliver	1719893120 using Report Comment I WAS WAITING FOR AN OMORI FAN TO USE THIS DUDE IT LOOKS SO COOL!!! :3 by Liam; 1720685044; Report
*ੈ . ✦₊𝘛𝘦𝘢𝘒𝘪𝘵	1719027592 using <3 Report Comment
stupid idiot stupid	1718472499 using maybe Report Comment
mallow ♡	1715792635 using!!! Report Comment
ArcherJane	1715530455 БУДУ ИСПОЛЬЗОВАТЬ Report Comment
Melaniux >w<	1715104233 Me sirvió de mucho, gracias Report Comment
mari 𐙚	1715051081 using !! <33 Report Comment hey bestie!!! by thrifted ♱; 1715055318; Report OMG HEY! I JUST NOW SEEN UR COMMENT by mari 𐙚; 1715059931; Report STOP THERE IS NO WAY I SAID THAT AN HOUR AGO THAT FELT LIKE 10 MINS AGO WHAT by thrifted ♱; 1715060084; Report SO IM NOT THE ONLY ONE THAT FEELS THAT WAY??? TIME IS FLYING BY WAY TOO FAST I SWEAR by mari 𐙚; 1715060572; Report ITS SO SCARY by thrifted ♱; 1715060636; Report