493 Academy

TREE

Make an app that just shows my picture big in the middle of the screen.

BUDDY

Here you go, Tree! Your picture is front and center, big and beautiful! 🎉

CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Tree's Picture</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f0f8ff;
    }

    img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <img src="/api/assets/1" alt="Tree's Picture" />
</body>
</html>
<img src="/api/assets/1"><img src="/api/assets/1">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Tree's Picture</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f0f8ff;
    }

    img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <img src="/api/assets/1" alt="Tree's Picture" />
</body>
</html>
<img src="/api/assets/1"><img src="/api/assets/1">

PREVIEW

PICTURES0/50

No pictures yet. Add one, then ask your buddy to put it in your app!