ProjectOne/portal.html at main · Dreeam00/ProjectOne · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ポータル</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gradient-to-l from-blue-50 to-blue-300 text-gray-900 font-sans overflow-x-hidden min-h-screen flex flex-col justify-center items-center">
  <div class="w-full max-w-2xl mx-auto p-8 bg-white/80 rounded-3xl border border-blue-200 shadow-2xl backdrop-blur-2xl mt-16">
    <h1 class="text-4xl md:text-6xl font-extrabold text-blue-900 drop-shadow-xl tracking-tight bg-gradient-to-r from-blue-700 via-blue-400 to-blue-700 bg-clip-text text-transparent mb-8 text-center">ポータル</h1>
    <div class="flex flex-col gap-8">
      <a href="index.html" class="group relative bg-white/30 hover:bg-white/60 transition-all duration-300 backdrop-blur-2xl rounded-2xl shadow-2xl border-2 border-blue-300/70 p-6 flex items-center gap-5 cursor-pointer overflow-hidden focus:ring-4 focus:ring-blue-200">
        <span class="flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-blue-300 to-blue-600 border border-blue-100 shadow-lg mr-2 overflow-hidden">
          <svg class="w-10 h-10" fill="none" stroke="#38bdf8" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#e0f2fe"/><path d="M8 12l2 2 4-4" stroke="#0ea5e9" stroke-width="2.5"/></svg>
        </span>
        <div>
          <p class="text-blue-900 font-extrabold text-xl group-hover:text-blue-700 transition">トップページ</p>
          <p class="text-blue-800/90 text-sm">Retro design and the Internet</p>
        </div>
      </a>
      <a href="research.html" class="group relative bg-white/30 hover:bg-white/60 transition-all duration-300 backdrop-blur-2xl rounded-2xl shadow-2xl border-2 border-blue-300/70 p-6 flex items-center gap-5 cursor-pointer overflow-hidden focus:ring-4 focus:ring-blue-200">
        <span class="flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-blue-300 to-blue-600 border border-blue-100 shadow-lg mr-2 overflow-hidden">
          <svg class="w-10 h-10" fill="none" stroke="#60a5fa" stroke-width="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#dbeafe"/><path d="M8 12h8" stroke="#2563eb" stroke-width="2.5"/></svg>
        </span>
        <div>
          <p class="text-blue-900 font-extrabold text-xl group-hover:text-blue-700 transition">レトロデザインの研究</p>
          <p class="text-blue-800/90 text-sm">デザインの歴史や特徴を分析</p>
        </div>
      </a>
      <a href="creation.html" class="group relative bg-white/30 hover:bg-white/60 transition-all duration-300 backdrop-blur-2xl rounded-2xl shadow-2xl border-2 border-blue-300/70 p-6 flex items-center gap-5 cursor-pointer overflow-hidden focus:ring-4 focus:ring-blue-200">
        <span class="flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-blue-300 to-blue-600 border border-blue-100 shadow-lg mr-2 overflow-hidden">
          <svg class="w-10 h-10" fill="none" stroke="#818cf8" stroke-width="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#ede9fe"/><path d="M12 8v8m-4-4h8" stroke="#6366f1" stroke-width="2.5"/></svg>
        </span>
        <div>
          <p class="text-blue-900 font-extrabold text-xl group-hover:text-blue-700 transition">レトロデザインの製作</p>
          <p class="text-blue-800/90 text-sm">実際の制作事例や応用</p>
        </div>
      </a>
      <a href="Production-work.html" class="group relative bg-white/30 hover:bg-white/60 transition-all duration-300 backdrop-blur-2xl rounded-2xl shadow-2xl border-2 border-blue-300/70 p-6 flex items-center gap-5 cursor-pointer overflow-hidden focus:ring-4 focus:ring-blue-200">
        <span class="flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-blue-300 to-blue-600 border border-blue-100 shadow-lg mr-2 overflow-hidden">
          <svg class="w-10 h-10" fill="none" stroke="#60a5fa" stroke-width="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#dbeafe"/><path d="M8 12h8" stroke="#2563eb" stroke-width="2.5"/></svg>
        </span>
        <div>
          <p class="text-blue-900 font-extrabold text-xl group-hover:text-blue-700 transition">制作物</p>
          <p class="text-blue-800/90 text-sm">レトロデザインの制作</p>
        </div>
      </a>
      <a href="summary.html" class="group relative bg-white/30 hover:bg-white/60 transition-all duration-300 backdrop-blur-2xl rounded-2xl shadow-2xl border-2 border-blue-300/70 p-6 flex items-center gap-5 cursor-pointer overflow-hidden focus:ring-4 focus:ring-blue-200">
        <span class="flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-blue-300 to-blue-600 border border-blue-100 shadow-lg mr-2 overflow-hidden">
          <svg class="w-10 h-10" fill="none" stroke="#818cf8" stroke-width="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#ede9fe"/><path d="M12 8v8m-4-4h8" stroke="#6366f1" stroke-width="2.5"/></svg>
        </span>
        <div>
          <p class="text-blue-900 font-extrabold text-xl group-hover:text-blue-700 transition">まとめ</p>
          <p class="text-blue-800/90 text-sm">全ページのまとめ</p>
        </div>
      </a>
    </div>
  </div>
  <footer class="mt-12 text-center text-gray-600 bg-white/90 backdrop-blur-2xl p-6 shadow-2xl border border-blue-200">
      <p class="text-sm">© 2025 My Retro Design Research. All rights reserved.</p>
    </footer>
</body>
</html>