Newer
Older
pj25dx-d / figma4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ミッション一覧</title>

<style>
body {
  margin: 0;
  font-family: Roboto, sans-serif;
  display: flex;
  justify-content: center;
  background: #e0f0ff;
}

.container {
  width: 393px;
  min-height: 852px;
  background: linear-gradient(37deg, #9FE7FF 0%, #6072F8 100%);
  padding: 20px 12px 86px;
  box-sizing: border-box;
  position: relative;
}

h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
}

.mission-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mission-card {
  display: flex;
  background: white;
  border: 3px solid black;
  border-radius: 12px;
  padding: 10px;
  position: relative;
  align-items: center;
}

.mission-card img {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  object-fit: cover;
}

.mission-text {
  margin-left: 15px;
  font-size: 24px;
  line-height: 1.2;
}

.status-badge {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  color: white;
}

.achieved {
  background: #18A303;
  border: 2.5px solid white;
}

.not-achieved {
  background: #A30303;
  border: 2.5px solid white;
}

.bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 66px;
  background: white;
  border-top: 2.5px solid black;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom-icon {
  width: 48px;
  height: 48px;
  background: gray;
  border-radius: 8px;
}
.bottom-icon.center {
  width: 32px;
  height: 40px;
  background: black;
}
</style>
</head>

<body>
<div class="container">
  <h1>ミッション一覧</h1>

  <div class="mission-list">

    <!-- ミッション1 -->
    <div class="mission-card">
      <img src="https://placehold.co/110x110" alt="">
      <div class="mission-text">酒田の大獅子を<br>撮影せよ!</div>
      <div class="status-badge not-achieved">ミッション<br>未達成</div>
    </div>

    <!-- ミッション2:ラーメン -->
    <div class="mission-card">
      <img src="data:image/jpeg;base64,tI+rpyjNXPmL4j6xp/hL9pO/j1K9vbnSr+7tPtAxvWFmgysRLcBCecelehS1gmfN...//2Q==" alt="">
      <div class="mission-text">酒田にしかない<br>ラーメンを探そう!</div>
      <div class="status-badge achieved">ミッション<br>達成</div>
    </div>

    <!-- ミッション3:花火 -->
    <div class="mission-card">
      <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...Q==" alt="">
      <div class="mission-text">酒田の花火の<br>写真を撮ろう!</div>
      <div class="status-badge achieved">ミッション<br>達成</div>
    </div>

  </div>

  <div class="bottom-bar">
    <div class="bottom-icon"></div>
    <div class="bottom-icon center"></div>
    <div class="bottom-icon"></div>
  </div>
</div>
</body>
</html>