Popcorn Hack - Color Codes

Which image format is best for logos and transparency?
- PNG is the best format for logos and transparency because it supports high-quality images with lossless compression and allows parts of the image to be fully transparent. This makes it perfect for placing logos on any background without a visible box or outline.
Which format loses quality to make the file size smaller?
- JPEG reduces file size by using lossy compression, which permanently removes some image data. This makes the image smaller in size but also slightly lowers its quality, especially after multiple saves.
Which format is used for simple animations, like memes?
- GIF is commonly used for simple animations like memes because it can display a sequence of images in a loop. It supports only 256 colors, making it best for short, low-resolution animated content.

Popcorn Hack - Base64

What does this Base64 string decode to? U1Q=
- U1Q= → ST
- U = 20 → 010100
- 1 = 53 → 110101
- Q = 16 → 010000 Together = 01010011 01010100 = ASCII for “ST”

Homework Hack: Make a Mood Board with Hex Colors

Here is my code below:

<head>
  <title>My Mood Colors</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    .color-block {
      width: 200px;
      height: 200px;
      margin: 20px auto;
      border-radius: 10px;
      color: white;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2em;
    }
  </style>
</head>
<body>

  <h1>My Mood Colors</h1>

  <div class="color-block" style="background-color: #6EC5E9;">#6EC5E9</div>
  <div class="color-block" style="background-color: #FFC75F;">#FFC75F</div>
  <div class="color-block" style="background-color: #FF6F61;">#FF6F61</div>
  <div class="color-block" style="background-color: #7D5BA6;">#7D5BA6</div>
  <div class="color-block" style="background-color: #00C49A;">#00C49A</div>

</body>

My Mood Colors

#6EC5E9

#FFC75F

#FF6F61

#7D5BA6

#00C49A

Homework Hack: Turn Your Profile Pic into Base64!

Here is my code below:

<html>
<head>
    <title>Inline Base64 Image</title>
</head>
<body>
    <h1>My Embedded Image</h1>
    <img src="data:image/jpeg;base64,{b64here}" alt="Embedded Image" width="200">
</body>
</html>

Inline Base64 Image