pj25dx-d/figma5.html at 4d7ca8a8092f86a1f86cfa5240078800affe1982

Fork: 0

hirokun24 / pj25dx-d

Find file

Newer

Older

pj25dx-d / figma5.html

hirokun-jp on 20 Jan 1 KB ファイルアップロード

Raw Blame History

!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>撮影場所を選択</title>
</head>

<body style="margin:0; display:flex; justify-content:center;">

<div style="width: 393px; height: 852px; position: relative; background: linear-gradient(37deg, #9FE7FF 0%, #6072F8 100%); overflow: hidden">

  <!-- ヘッダー -->
  <div style="width: 393px; height: 78px; left: 0; top: 0; position: absolute; background: black"></div>

  <!-- 戻るボタン（仮） -->
  <div style="width: 26px; height: 46px; left: 39px; top: 16px; position: absolute; background: white"></div>

  <!-- タイトル -->
  <div style="width: 322px; height: 80px; left: 32px; top: 145px; position: absolute; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 32px; font-family: Roboto; font-weight: 500;">
    撮影場所を選択
  </div>

  <!-- Googleマップ -->
  <div style="width: 349px; height: 352px; left: 22px; top: 292px; position: absolute; border: 3px solid black; overflow: hidden;">
    <iframe
      width="100%"
      height="100%"
      style="border:0;"
      loading="lazy"
      allowfullscreen
      referrerpolicy="no-referrer-when-downgrade"
      src="https://www.google.com/maps?q=38.9181,139.8335&z=15&output=embed">
    </iframe>
  </div>

  <!-- 確定ボタン -->
  <button
    style="width: 369px; height: 62px; left: 12px; top: 686px; position: absolute; background: white; border: 3px black solid; font-size: 20px;">
    確定
  </button>

</div>

</body>
</html>