推しログ – 推し活情報共有サービス

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>推しログ - 推し活情報共有サービス</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gradient-to-r from-purple-200 to-indigo-200">

  <!-- ヘッダー -->
  <header class="bg-purple-600 text-white p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
      <h1 class="text-3xl font-bold"><i class="fa-solid fa-heart mr-2"></i>推しログ</h1>
      <nav class="space-x-4">
        <a href="#" class="hover:text-gray-200">ホーム</a>
        <a href="#" class="hover:text-gray-200">スケジュール</a>
        <a href="#" class="hover:text-gray-200">ニュース</a>
        <a href="#" class="hover:text-gray-200">ログイン</a>
      </nav>
    </div>
  </header>

  <!-- メインコンテンツ -->
  <main class="container mx-auto my-8 px-4">

    <!-- 推しスケジュール -->
    <section class="bg-white p-8 rounded-xl shadow-xl mb-8">
      <h2 class="text-2xl font-bold border-b pb-2 mb-4"><i class="fa-regular fa-calendar mr-2"></i>今月の推しスケジュール</h2>
      <ul class="space-y-3">
        <li class="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow">
          <span class="font-semibold">ライブ配信「推しの部屋」</span>
          <span class="text-gray-500">8/10(木) 20:00〜</span>
        </li>
        <li class="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow">
          <span class="font-semibold">ニューシングル発売日！</span>
          <span class="text-gray-500">8/15(火)</span>
        </li>
        <li class="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow">
          <span class="font-semibold">ファンクラブ限定イベント</span>
          <span class="text-gray-500">8/25(金) 18:30〜</span>
        </li>
      </ul>
      <button class="mt-4 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded">もっと見る</button>
    </section>

    <!-- 最新推しニュース -->
    <section class="bg-white p-8 rounded-xl shadow-xl mb-8">
      <h2 class="text-2xl font-bold border-b pb-2 mb-4"><i class="fa-solid fa-newspaper mr-2"></i>最新推しニュース</h2>
      <article class="mb-6 border-b pb-4">
        <h3 class="font-semibold text-purple-700 mb-1">推しの新曲MVが公開！</h3>
        <p class="text-gray-600">待望の新曲MVが公式YouTubeチャンネルにて公開されました！視聴数も急上昇中！</p>
        <a href="#" class="text-blue-500 hover:underline">詳しく見る <i class="fa-solid fa-arrow-right ml-1"></i></a>
      </article>

      <article>
        <h3 class="font-semibold text-purple-700 mb-1">推し、テレビ番組に出演決定！</h3>
        <p class="text-gray-600">8/12(土)の「音楽バズ」にゲスト出演予定です。特別トークもお楽しみに！</p>
        <a href="#" class="text-blue-500 hover:underline">詳しく見る <i class="fa-solid fa-arrow-right ml-1"></i></a>
      </article>
      <button class="mt-4 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded">もっと見る</button>
    </section>

    <!-- 推しメンバー紹介 -->
    <section class="bg-white p-8 rounded-xl shadow-xl">
      <h2 class="text-2xl font-bold border-b pb-2 mb-4"><i class="fa-solid fa-user-group mr-2"></i>推しメンバー紹介</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="text-center">
          <img src="https://via.placeholder.com/150" class="rounded-full mx-auto mb-2" alt="推し1">
          <h3 class="font-semibold">推しメン1</h3>
        </div>
        <div class="text-center">
          <img src="https://via.placeholder.com/150" class="rounded-full mx-auto mb-2" alt="推し2">
          <h3 class="font-semibold">推しメン2</h3>
        </div>
        <div class="text-center">
          <img src="https://via.placeholder.com/150" class="rounded-full mx-auto mb-2" alt="推し3">
          <h3 class="font-semibold">推しメン3</h3>
        </div>
        <div class="text-center">
          <img src="https://via.placeholder.com/150" class="rounded-full mx-auto mb-2" alt="推し4">
          <h3 class="font-semibold">推しメン4</h3>
        </div>
      </div>
    </section>

  </main>

  <!-- フッター -->
  <footer class="bg-gray-900 text-white text-center py-4 mt-8">
    <p class="text-sm">© 2024 推しログ. All rights reserved.</p>
  </footer>

</body>
</html>

投稿者: chosuke

趣味はゲームやアニメや漫画などです chosuke のすべての投稿を表示