← Back to Layouts
messed up polaroids

Name: FriendRewind
Author: FriendRewind
Author: aheartwellmaddie
Category: ?
Created: June 30, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#161616;
padding:80px;
font-family:'Caveat',cursive;
}

/* ENTIRE DISPLAY */

.memory-wall{
position:relative;
width:1050px;
height:500px;
margin:auto;
}

/* STRING */

.string{
position:absolute;
top:50px;
left:0;
width:100%;
height:4px;
background:#c8b28e;
border-radius:5px;
}

/* FAIRY LIGHTS */

.light{
position:absolute;
top:-8px;
width:10px;
height:10px;
border-radius:50%;
background:#9900ff;
box-shadow:
0 0 12px #c875ff,
0 0 25px #dca8ff;
animation:twinkle 2.5s infinite alternate;
}

.light:nth-child(1){left:3%;}
.light:nth-child(2){left:13%;animation-delay:.4s;}
.light:nth-child(3){left:23%;animation-delay:.8s;}
.light:nth-child(4){left:33%;}
.light:nth-child(5){left:43%;animation-delay:.5s;}
.light:nth-child(6){left:53%;}
.light:nth-child(7){left:63%;animation-delay:.7s;}
.light:nth-child(8){left:73%;}
.light:nth-child(9){left:83%;animation-delay:.4s;}
.light:nth-child(10){left:93%;}

/* ITEMS */

.item{
position:absolute;
top:52px;
transform-origin:center top;
animation:sway 5s ease-in-out infinite alternate;
}

/* STRING */

.item::before{
content:"";
position:absolute;
left:50%;
top:-25px;
width:2px;
height:26px;
background:#888;
transform:translateX(-50%);
}

/* CLOTHESPIN */

.pin{
position:absolute;
width:18px;
height:28px;
background:#d6b381;
left:50%;
top:-18px;
transform:translateX(-50%);
border-radius:3px;
z-index:50;
box-shadow:0 2px 5px rgba(0,0,0,.35);
}

/* POLAROID */

.polaroid{
width:145px;
height:185px;
perspective:900px;
cursor:pointer;
}

.card{
position:relative;
width:100%;
height:100%;
transition:.8s;
transform-style:preserve-3d;
}

.polaroid:hover .card{
transform:rotateY(180deg) translateY(-15px) scale(1.08);
}

.front,
.back{
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
border-radius:4px;
overflow:hidden;
background:white;
box-shadow:0 12px 30px rgba(0,0,0,.4);
}

.front img{
width:100%;
height:140px;
object-fit:cover;
display:block;
}

.front p{
padding:12px;
text-align:center;
color:#555;
font-size:26px;
}

.back{
transform:rotateY(180deg);
padding:18px;
background:#fffdf7;
font-size:23px;
line-height:1.3;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#555;
}

.polaroid:hover .front,
.polaroid:hover .back{
box-shadow:
0 25px 40px rgba(0,0,0,.5),
0 0 30px #cf87ff;
}

/* TICKET */

.ticket{
width:95px;
height:45px;
background:#e8d1ff;
border:2px dashed #9154ff;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
box-shadow:0 8px 18px rgba(0,0,0,.3);
}

/* CD */

.cd{
width:55px;
height:55px;
border-radius:50%;
background:
radial-gradient(circle,#fff 12%,#bbb 13%,#f5f5f5 45%,#999 70%,#ddd 100%);
box-shadow:0 6px 15px rgba(0,0,0,.3);
transition:.5s;
}

.cd:hover{
transform:rotate(360deg) scale(1.2);
}

/* POSITIONS */

.one{left:20px;transform:rotate(-8deg);}
.two{left:210px;top:90px;}
.three{left:350px;transform:rotate(6deg);}
.four{left:565px;top:95px;}
.five{left:690px;transform:rotate(-6deg);}
.six{left:890px;}

/* ANIMATIONS */

@keyframes sway{
0%{transform:rotate(-2deg);}
100%{transform:rotate(2deg);}
}

@keyframes twinkle{
from{
opacity:.45;
transform:scale(.9);
}
to{
opacity:1;
transform:scale(1.3);
}
}
</style>

<div class="memory-wall">

<div class="string">

<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>

</div>

<div class="item one">
<div class="pin"></div>

<div class="polaroid">
<div class="card">

<div class="front">
<img src="IMAGE1.jpg">
<p>Summer '06</p>
</div>

<div class="back">
You left your hoodie at my house.<br><br>♥
</div>

</div>
</div>
</div>

<div class="item two">
<div class="pin"></div>
<div class="ticket">WARPED</div>
</div>

<div class="item three">
<div class="pin"></div>

<div class="polaroid">
<div class="card">

<div class="front">
<img src="IMAGE2.jpg">
<p>Best Friends</p>
</div>

<div class="back">
Stayed up until 3am listening to albums.
</div>

</div>
</div>
</div>

<div class="item four">
<div class="pin"></div>
<div class="cd"></div>
</div>

<div class="item five">
<div class="pin"></div>

<div class="polaroid">
<div class="card">

<div class="front">
<img src="IMAGE3.jpg">
<p>Road Trip</p>
</div>

<div class="back">
The best weekends are never planned.
</div>

</div>
</div>
</div>

<div class="item six">
<div class="pin"></div>

<div class="polaroid">
<div class="card">

<div class="front">
<img src="IMAGE4.jpg">
<p>Forever</p>
</div>

<div class="back">
Click me to open a scrapbook page.
</div>

</div>
</div>
</div>

</div></style>