teaser.html

<!DOCTYPE html>

<html lang="ja" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->

  <!-- Settings for social web services (as minimum as possible) -->
  <title>DojoCon Japan - 年１回の CoderDojo カンファレンス</title>
  <meta name="description" content="DojoCon Japan とは、日本の CoderDojo コミュニティメンバーが全国から集まる年に１度のカンファレンスです。">
  <meta property="og:type" content="website" />
  <meta property="og:image" content="https://dojocon2024.coderdojo.jp/img/teaser/cover.jpg" />
  <meta name="twitter:image" content="https://dojocon2024.coderdojo.jp/img/teaser/cover.jpg" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@DojoConJapan" />
  <meta name="twitter:title" content="DojoCon Japan 2024 @ 岡山" />
  <meta property="og:title" content="DojoCon Japan 2024 @ 岡山" />
  <meta property="og:url" content="https://dojocon2024.coderdojo.jp/img/teaser/cover.jpg" />
  <meta property="og:description" content="DojoCon Japan とは、日本の CoderDojo コミュニティメンバーが全国から集まる年に１度のカンファレンスです。" />
  <meta name="twitter:description" content="DojoCon Japan とは、日本の CoderDojo コミュニティメンバーが全国から集まる年に１度のカンファレンスです。" />
  <meta name="description" content="DojoCon Japan とは、日本の CoderDojo コミュニティメンバーが全国から集まる年に１度のカンファレンスです。" />


  <!-- Settings for web browsers (as minimum as possible) -->
  <link rel='canonical' href='https://dojocon2024.coderdojo.jp/' />
  <link rel='shortlink' href='https://dojocon2024.coderdojo.jp/' />
  <link rel="manifest" href="/site.webmanifest">
  <link rel="icon" href="/favicon.ico"> <!-- 32×3   -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->

  <style type="text/css">
    @import"https://fonts.googleapis.com/css2?family=Space+Mono&display=swap";

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: "Roboto", "Noto Sans JP", sans-serif;
      margin: 0;
      text-align: center;
      color: #046;
      padding-top: 60px;
    }

    .container {
      text-align: center;
      font-size: 4vw;
      font-family: 'Space Mono';
    }

    .cursor::after {
      content: "_";
      animation: blink 1s infinite
    }

    @keyframes blink {
      0% {
        opacity: 0
      }

      50% {
        opacity: 0
      }

      51% {
        opacity: 1
      }

      100% {
        opacity: 1
      }
    }
  </style>
</head>

<body>
  <div class='container'>
    <div style='margin-top: 1.0em;'>
      <img src="/img/teaser/logo.webp" loading="lazy" width='50%' alt="CoderDojo Logo" title="CoderDojo Logo" />
    </div>
    <div style="margin-top: 1.0em;">DojoCon Japan 2024 at Okayama</div>
    <div style="margin-top: 0.0em; color:red;">"Dream Up！"</div>
    <div style="margin-top: 0.5em;">2024年09月15日（日曜）開催決定!</div>
    <div style="margin-top: 0.5em;">【開催場所 岡山市 杜の街グレース貸し会議室】</div>
    <div style="margin-top: 0.5em;" class="cursor">SAVE THE DATE</div>
    <div style='margin-top: 2.0em;'>
      <img src="/img/teaser/cover-photo.webp" loading="lazy" width='100%' alt="DojoCon Japan Cover Photo"
        title="DojoCon Japan Cover Photo" />
    </div>
    <div style='margin-top: 2.0em; margin-bottom: 0.5em; font-size: 55%;'>
      <a href='https://dojocon.coderdojo.jp/' style='text-decoration: none;'>
        &raquo; 過去の開催事例を見る
      </a>
    </div>
  </div>
</body>

</html>