Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
cork board w stuff

Author: aheartwellmaddie
Category: <3
Created: June 7, 2026
Comments (0)

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

<style>
<style>
  /* note font url */
@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');

.quote-container {
  margin-top: 50px;
  position: relative;
}
 
.note {
  color: #333;
  position: absolute;
  top: -1510px;
  right: -200px;
  z-index: 9999;
      transform: scale(0.8);

  width: 100px;
  height: 100px;
 display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */

  text-align: center;

  font-family: "Homemade Apple", cursive;
  font-weight: 400;
  font-style: normal;

  box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
  }
  
.note,
.note * {
  font-family: "Homemade Apple", cursive;
}

.note .author {
  display: block;
  margin: 40px 0 0 0;
  text-align: right;
}

.yellow {
  background: #bfb8cc;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
}

.pin {
  background-color: #aaa;
  display: block;
  height: 32px;
  width: 2px;
  position: absolute;
  left: 50%;
  top: -16px;
  z-index: 1;
}

.pin:after {
  background-color: #A31;
  background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1), inset 3px 3px 3px hsla(0,0%,100%,.2), inset -3px -3px 3px hsla(0,0%,0%,.2), 23px 20px 3px hsla(0,0%,0%,.15);
  content: '';
  height: 12px;
  left: -5px;
  position: absolute;
  top: -10px;
  width: 12px;
}

.pin:before {
  background-color: hsla(0,0%,0%,0.1);
  box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
  content: ''; 
  height: 24px;
  width: 2px;
  left: 0;
  position: absolute;
  top: 8px;
 
  transform: rotate(57.5deg);
  -moz-transform: rotate(57.5deg);
  -webkit-transform: rotate(57.5deg);
  -o-transform: rotate(57.5deg);
  -ms-transform: rotate(57.5deg);
 
  transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
}

    /* cork board */
body:after {
    content: "";
    position: absolute;
    top: 50px;
    right: 25px;

    width: 500px;  /* image width */
    height: 500px; /* image height */

    background-image: url('https://i.pinimg.com/1200x/c8/1a/47/c81a470fe712901a069f3b955025f675.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    z-index: 1000;
    pointer-events: none;
    animation: gentle-float-left 7s ease-in-out infinite;
}
  /* plaroid */
  body {
  margin: 0px;
  font-family: "Homemade Apple", cursive;
}
  
div#background {
  height: 700px;
  width: 100%;
  background-image: url(http://garchitecture.ca/php/images/headers/wood.jpg);
  padding-top: 20px;
}

div#gallery {
  width: 150px;
  margin: 0;
  margin-left: auto;
  margin-right: -510px;  /* pushes it left/right */
  margin-top: -1520px;    /* pushes it downward/upward control */
}

#background img {
  height: 75px;
}

#background figure {
  position: relative;
  z-index: 9999;
  background-color: white;
  text-align: center;
  font-size: 15px;
  padding: 10px;
  margin: 10px;
  box-shadow: 1px 2px 3px black;
}

figure.pic1 {
  -webkit-transform: rotate(-10deg);
}

#background figure:hover {
  box-shadow: 5px 10px 100px black;
  -webkit-transform: scale(1.1,1.1);
}
.my-pic {
  width: 25vw;
  height: auto;      /* this is the key fix */

  position: absolute;
  top: 100px;
  left: 100px;

  object-fit: contain; /* extra safety */
}
  
  </style>

<div class="quote-container">
  <i class="pin"></i>
  <blockquote class="note yellow">
    im still waiting for my macbook.
    <cite class="author"></cite>
  </blockquote>
  <div id="background">
  <div id="gallery">
    <figure class="pic1">
      <img src="https://i.pinimg.com/736x/2f/53/db/2f53db5cb81173fcb2c4e9dde932d978.jpg" />
      <figcaption>current hyperfixation</figcaption>
    </figure>
  </div>
    <img src="https://i.pinimg.com/736x/91/f4/21/91f421ad644733d1e7a9069416f6e555.jpg" class="my-pic">
</div></style>