Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
my sick layout

Author: sattimid
Category: >:[
Created: May 1, 2026
Comments (0)

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

<style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Midwest Emo Friend Rewind</title>
<style>
  body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f5f0e6; /* Light beige for a nostalgic feel */
    color: #333;
  }

  header {
    background-color: #222; /* Dark header for contrast */
    padding: 20px;
    text-align: center;
    color: #f2f2f2;
    border-bottom: 5px solid #444;
  }

  header h1 {
    margin: 0;
    font-family: 'Brush Script MT', cursive;
    font-size: 2.5em;
    letter-spacing: 2px;
  }

  .content {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
  }

  .friend {
    display: flex;
    align-items: center;
    background-color: #fff8f0;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
  }

  .friend:hover {
    border-color: #ff6f61;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.2);
    transform: translateY(-3px);
  }

  .friend img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
    border: 3px solid #ccc;
  }

  .friend-info {
    flex: 1;
  }

  .friend h2 {
    margin-top: 0;
    font-family: 'Georgia', serif;
    font-size: 1.8em;
    color: #444;
  }

  .friend p {
    line-height: 1.5;
  }

  footer {
    background-color: #222;
    color: #f2f2f2;
    text-align: center;
    padding: 15px;
    margin-top: 40px;
    font-size: 0.9em;
  }

  /* Emo-inspired accents */
  .accent {
    color: #ff6f61;
    font-weight: bold;
  }
</style>
</head>
<body>

<header>
  <h1>Midwest Emo Friend Rewind</h1>
</header>

<div class="content">
  <div class="friend">
    <img src="https://via.placeholder.com/120" alt="Alex's photo" />
    <div class="friend-info">
      <h2>Alex</h2>
      <p>Remember that time we stayed up all night listening to tracks from American Football. Those memories are forever <span class="accent">special</span>.</p>
    </div>
  </div>
  <div class="friend">
    <img src="https://via.placeholder.com/120" alt="Jamie's photo" />
    <div class="friend-info">
      <h2>Jamie</h2>
      <p>Our road trip playlist still hits differently. Midwest sunsets and endless roads — pure nostalgia.</p>
    </div>
  </div>
  <div class="friend">
    <img src="https://via.placeholder.com/120" alt="Sam's photo" />
    <div class="friend-info">
      <h2>Sam</h2>
      <p>From late-night calls to shared playlists, you're still my <span class="accent">best</span>.</p>
    </div>
  </div>
</div>

<footer>
  © 2024 Midwest Emo Memories. Keep it nostalgic.
</footer>

</body>
</html></style>