CodePen Embed - Mood Board 2.0

<body>
  <div class="wrapper">
    <!-- Post-it Note #1 -->
    <div class="post-it-note yellow" id="note-1">
      <div class="pin clip B"></div>
    </div>

    <!-- Post-it Note #2B -->
    <div class="post-it-note red" id="note-2B">
      <div class="pin gold C"></div>
    </div>

    <!-- Post-it Note #2C -->
    <div class="post-it-note red" id="note-2C"></div>

    <!-- Post-it Note #3C -->
    <div class="post-it-note red" id="note-3C"></div>

    <!-- Flower Accent Pink -->
    <div class="post-it-note red" id="flower_accent-pink"></div>

    <!-- Post-it Note #2 -->
    <div class="post-it-note red" id="note-2">
      <div class="pin silver" style="top: 1.5%;"></div>
    </div>

    <!-- Post-it Note #2A -->
    <div class="post-it-note red" id="note-2A">
      <div class="pin clip A"></div>
    </div>

    <!-- Flowers #1 -->
    <div class="post-it-note" id="flowers-1"></div>

    <!-- Post-it Note #3 -->
    <div class="post-it-note blue" id="note-3">
      <div class="pin red"></div>
    </div>

    <!-- Post-it Note #4 -->
    <div class="post-it-note blue" id="note-4">
      <div class="pin gold" style="left: 18%; top: 24%; height: 22px;"></div>
      <div class="pin gold" style="top: 2%; left: 47%; height: 22px;"></div>
    </div>

    <!-- Polaroid Picture #1 -->
    <figure class="polaroid" id="picture-1">
      <div class="pin clip" style="left: 40%;"></div>
    </figure>

    <!-- Polaroid Picture #1B -->
    <figure class="polaroid" id="picture-1B">
      <div class="pin red"></div>
    </figure>

    <!-- Polaroid Picture #4B with URL #1 -->
    <figure class="polaroid" id="picture-4B" style="content: url(https://assets.codepen.io/4927073/meandfred.png); left: 15%; z-index: 2; width: 11%; top: 25%; transform: rotate(3deg); opacity: 1;">
      <div class="pin red"></div>
    </figure>

    <!-- Polaroid Picture #4B with URL #2 -->
    <figure class="polaroid" id="picture-4B" style="content: url(https://assets.codepen.io/4927073/seattle_frame.jpg); left: 68%; z-index: 2; width: 17%; top: 39%; transform: rotate(2deg); opacity: 1;">
      <div class="pin red"></div>
    </figure>

    <!-- Polaroid Picture #4B -->
    <figure class="polaroid" id="picture-4B">
      <div class="pin red"></div>
    </figure>

    <!-- Polaroid Picture #1C -->
    <figure class="polaroid" id="picture-1C">
      <div class="pin clip two"></div>
    </figure>

    <!-- Polaroid Picture #1D -->
    <figure class="polaroid" id="picture-1D">
      <div class="pin red"></div>
    </figure>

    <!-- Polaroid Picture #1E -->
    <figure class="polaroid" id="picture-1E"></figure>

    <!-- Polaroid Picture #1F -->
    <figure class="polaroid" id="picture-1F">
      <div class="pin silver" style="top: -3px;"></div>
    </figure>

    <!-- Polaroid Picture #2 -->
    <figure class="polaroid" id="picture-2">
      <div class="pin blue"></div>
    </figure>

    <!-- Polaroid Picture #2B -->
    <figure class="polaroid" id="picture-2B"></figure>

    <!-- Polaroid Picture #2C -->
    <figure class="polaroid" id="picture-2C">
      <div class="pin red"></div>
    </figure>

    <!-- Polaroid Picture #4C -->
    <figure class="polaroid" id="picture-4C">
      <div class="pin red"></div>
    </figure>

    <!-- Polaroid Picture #2E -->
    <figure class="polaroid" id="picture-2E">
      <div class="pin red"></div>
    </figure>

    <!-- Polaroid Picture #3 -->
    <figure class="polaroid" id="picture-3">
      <div class="pin gold"></div>
    </figure>

    <!-- Polaroid Picture #3B -->
    <figure class="polaroid" id="picture-3B">
      <div class="pin gold A"></div>
      <div class="pin gold B"></div>
    </figure>

    <!-- Polaroid Picture #3B with URL #1 -->
    <figure class="polaroid" id="picture-3B" style="content: url(https://assets.codepen.io/4927073/friendsny2.png); left: 49%; top: -2%; z-index: 2; width: 10%; filter: saturate(1.5) contrast(1.125) drop-shadow(0.25px 0.25px 0.25px black); opacity: 1; transform: rotate(2deg);"></figure>

    <!-- Polaroid Picture #3B with URL #2 -->
    <figure class="polaroid" id="picture-3B" style="content: url(https://assets.codepen.io/4927073/anja.png); left: 39%; width: 10%; top: 61%; z-index: 5; opacity: 1;">
      <div class="pin gold A"></div>
      <div class="pin gold B"></div>
    </figure>

    <!-- Polaroid Picture #3B2 -->
    <figure class="polaroid" id="picture-3B2">
      <div class="pin gold A"></div>
    </figure>

    <!-- Polaroid Picture #3B3 -->
    <figure class="polaroid" id="picture-3B3">
      <div class="pin gold A"></div>
    </figure>

    <!-- Polaroid Picture #3C -->
    <figure class="polaroid" id="picture-3C" style="right: 20%; top: 26%; content: url(https://assets.codepen.io/4927073/paperarc.png); width: 16%; height: auto; z-index: 2; filter: saturate(1.25) contrast(1.025); transform: rotate(-3deg);"></figure>
  </div>
</body>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  padding: 20px;
  margin: 0;
  background-color: #e7a182;
  background-image: url(https://assets.codepen.io/4927073/10_.png);
  background-repeat: repeat;
  color: #000;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  position: relative;
  height: 75%;
  margin: auto;
  background-color: transparent;
  background-image: url(https://assets.codepen.io/4927073/Specular.png);
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(1px 1px 1px black);
  min-width: 115vh;
  max-width: 125vh;
  width: 90%;
}

.post-it-note,
.polaroid {
  position: absolute;
  box-shadow: none;
  padding: 0;
  background-color: transparent;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* Basic styles for the post it note*/
.post-it-note {
  width: 230px;
  height: 230px;
  font-family: Neucha, serif;
}

.polaroid {
  margin: 0;
  display: inline-block;
}

.polaroid figcaption {
  font-family: Neucha, sans-serif;
}

#note-1 {
  top: 0%;
  left: 20%;
  content: url(https://assets.codepen.io/4927073/card.png);
  display: flex;
  width: 20%;
  z-index: 1;
  transform: rotate(1deg);
  height: auto;
}

#note-2B {
  top: 28%;
  left: 31%;
  content: url(https://assets.codepen.io/4927073/Square+Ripped+Paper.png);
  width: 10.25%;
  height: auto;
  transform: rotate(-4deg);
  z-index: 2;
}

#note-2A {
  top: 1%;
  right: 0%;
  content: url(https://assets.codepen.io/4927073/envelope+13.png);
  content: url(https://raw.githubusercontent.com/hluebbering/web-design/main/assets/images/vinyl_metro_fire.png);
  width: 15%;
  height: auto;
  z-index: -1;
  transform: rotate(8deg);
}

#note-2 {
  top: 22%;
  right: 4%;
  content: url(https://assets.codepen.io/4927073/film9.png);
  content: url(https://assets.codepen.io/4927073/grad2.png);
  width: 14%;
  height: auto;
  transform: rotate(-2deg);
}

#note-3 {
  bottom: 10%;
  left: 44%;
  content: url(https://assets.codepen.io/4927073/A7.png);
  content: url(https://assets.codepen.io/4927073/Thumbtack2_1.png);
  width: 8.25%;
  height: auto;
  z-index: 2;
  transform: rotate(1deg);
}

div#note-3 .pin {
  left: 18%;
  height: 22%;
  width: 90%;
  width: auto;
  object-fit: cover;
  top: -8%;
}

#note-4 {
  bottom: -5%;
  left: 65%;
  content: url(https://assets.codepen.io/4927073/layer-1.png);
  width: 15%;
  height: auto;
  z-index: 4;
  transform: rotate(2deg);
  filter: saturate(1.45) contrast(1.05);
}

#picture-1 {
  right: 41%;
  top: 44.5%;
  content: url(https://assets.codepen.io/4927073/HL.png);
  width: 21%;
  height: auto;
  z-index: 1;
  transform: rotate(-1deg);
}

#picture-1 .pin.clip {
  width: 30%;
  height: auto;
  top: -28%;
}

#picture-2 {
  bottom: 2%;
  right: 6%;
  -webkit-transform: rotate(-3deg);
  content: url(https://assets.codepen.io/4927073/Andy.Chanel.2x3.jpg);
  width: 9.25%;
  height: auto;
  z-index: 0;
}

figure#picture-1B {
  left: 65%;
  bottom: 23%;
  content: url(https://assets.codepen.io/4927073/blackframe.png);
  width: 13%;
  height: auto;
  transform: rotate(3deg);
  z-index: 3;
  filter: saturate(1.5) contrast(1.05);
}

figure#picture-1C {
  left: -2%;
  top: -10%;
  content: url(https://assets.codepen.io/4927073/paper+heart+v1.png);
  width: 21%;
  height: auto;
  z-index: 2;
  transform: rotate(8deg);
}

figure#picture-1D {
  left: 49%;
  bottom: 2%;
  content: url(https://assets.codepen.io/4927073/label+15.png);
  width: 13.5%;
  height: auto;
  transform: rotate(-2deg);
  z-index: 1;
  filter: saturate(1.4) contrast(1.05);
}

figure#picture-3 {
  left: 56%;
  top: 29%;
  content: url(https://assets.codepen.io/4927073/Film+Frame+1.png);
  width: 6.65%;
  height: auto;
  transform: rotate(-2deg);
  z-index: 3;
}

figure#picture-2B {
  left: 2%;
  bottom: 29%;
  content: url(https://assets.codepen.io/4927073/paper3.png);
  width: 8%;
  height: auto;
  transform: rotate(-2deg);
  z-index: 1;
  filter: saturate(1.25) contrast(1.05);
}

#note-2C {
  top: 47%;
  left: 29%;
  content: url(https://assets.codepen.io/4927073/playlistframes_1.png);
  width: 6.5%;
  height: auto;
  transform: rotate(-1deg);
  z-index: 2;
  filter: contrast(1.05) saturate(1.125);
}

#note-3C {
  top: 70%;
  left: 17%;
  content: url(https://assets.codepen.io/4927073/yg.png);
  width: 13%;
  height: auto;
  transform: rotate(15deg);
  z-index: 2;
  filter: contrast(1.05) saturate(1.125);
}

/* PICTURE FIGURES */

figure#picture-1E {
  right: 23%;
  top: -2%;
  content: url(https://assets.codepen.io/4927073/framefolder.png);
  contentt: url(https://assets.codepen.io/4927073/aus.png);
  width: 15%;
  height: auto;
  z-index: 0;
  transform: rotate(5deg);
  filter: saturate(1.85) contrast(1.1);
}

figure#picture-1F {
  right: 14.5%;
  top: 53%;
  height: auto;
  width: 7%;
  content: url(https://assets.codepen.io/4927073/card+18.png);
  z-index: 3;
  transform: rotate(-7deg);
}

figure#picture-1F {
  right: 14.5%;
  top: 53%;
  height: auto;
  width: 7%;
  content: url(https://assets.codepen.io/4927073/timberwolves.png);
  z-index: 3;
  transform: rotate(-7deg);
  filter: saturate(1.5) contrast(1.05);
}

figure#picture-2C {
  content: url(https://assets.codepen.io/4927073/greece.png);
  width: 22%;
  height: auto;
  left: -2%;
  top: 18%;
  transform: rotate(-2deg);
  z-index: 0;
  filter: saturate(1.5) contrast(1.025);
}

figure#picture-2E {
  content: url(https://assets.codepen.io/4927073/Film+Frame+8.png);
  width: 12%;
  height: auto;
  right: 1%;
  top: 48%;
  transform: rotate(5deg);
  z-index: -1;
}

figure#picture-3B {
  content: url(https://assets.codepen.io/4927073/nyc2.png);
  width: 14%;
  height: auto;
  left: 15%;
  top: 22%;
  filter: saturate(1.35) contrast(1.05);
  transform: rotate(8deg);
  z-index: 0;
}

figure#picture-3B2 {
  content: url(https://assets.codepen.io/4927073/Group3.png);
  width: 14%;
  height: auto;
  left: 11%;
  top: 51%;
  filter: saturate(1.2) contrast(1.05);
  z-index: 0;
  transform: rotate(-2deg);
}

figure#picture-3B3 {
  content: url(https://assets.codepen.io/4927073/metro_paper.png);
  content: url(https://assets.codepen.io/4927073/Group+1.png);
  z-index: 1;
  width: 11%;
  top: 33%;
  left: 5%;
  height: auto;
}

figure#picture-4B {
      content: url(https://assets.codepen.io/4927073/frame14.png);
    width: 12%;
    height: auto;
    left: 40%;
    top: 19%;
    transform: rotate(-1deg);
    filter: saturate(1.25) contrast(1.1);
    z-index: 3;
}

figure#picture-4B .pin.red {
  height: 17%;
  width: auto;
}



figure#picture-4C {
  content: url(https://assets.codepen.io/4927073/film1.png);
  width: 16.5%;
  height: auto;
  left: -1%;
  top: 72%;
  transform: rotate(2deg);
  filter: saturate(1.35) contrast(1.05);
  z-index: -1;
}

/* PINS AND CLIPS */

.pin {
  width: auto;
  height: 25px;
  position: absolute;
  top: -12px;
  left: 30%;
  padding: 4px;
  box-shadow: none;
  content: url(https://assets.codepen.io/4927073/Tape_.png);
  background-color: transparent;
  filter: drop-shadow(2px 2px 2px #0000004d)
    drop-shadow(-0.5px -0.5px 0.5px #0000005d);
}

.pin.yellow {
  top: 2%;
  left: 45%;
  transform: rotate(-15deg);
}

.pin.yellow2 {
  left: 22%;
  top: -7%;
  height: 28px;
  width: auto;
}

.pin.clip {
  left: 30%;
  top: -18%;
  content: url(https://assets.codepen.io/4927073/pin+v3.png);
  height: 50px;
  opacity: 0.95;
}

.pin.clip.B {
  left: 40%;
  top: -18%;
  height: 57px;
  transform: rotate(2deg);
}

.pin.clip.two {
  content: url(https://assets.codepen.io/4927073/pin_04.png);
  top: 10%;
  left: 80%;
  transform: rotate(15deg);
}

.pin.gold {
  content: url(https://assets.codepen.io/4927073/pin+v20.png);
  height: 25px;
}

.pin.gold.A {
  left: 20%;
  top: 26%;
}

.pin.gold.B {
  left: 50%;
  top: 1%;
}

.pin.silver {
  content: url(https://assets.codepen.io/4927073/pin+v19.png);
  height: 25px;
}

.pin.blue {
  top: 0px;
  left: 12%;
  height: 22px;
}

.pin.gold.C {
  top: 2%;
}

/* FLOWERS + OBJECTS */

#flowers-1 {
  content: url(https://assets.codepen.io/4927073/Chamomile+Blossom+Group+2.png);
  z-index: 7;
  top: -8%;
  height: auto;
  width: 22%;
  left: 4%;
}

#flower_accent-pink {
  bottom: 64%;
  right: 16%;
  -webkit-transform: rotate(2deg);
  content: url(https://assets.codepen.io/4927073/pinkflowers1.png);
  width: 11.5%;
  height: auto;
  z-index: 4;
}



.polaroid:hover, figure:hover, .post-it-note:hover {
    transform: rotate(5deg) scale(1.05) !important;
}

#flowers-1:hover {
  transform: scale(1.05) !important;
  filter: saturate(1.25);
}

This Pen is owned by Hannah on CodePen.

See more by @hluebbering on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.