Skip to content

Commit 0e7e1bd

Browse files
Dreeam00Dreeam00
authored
Update summary.html
1 parent 46000eb commit 0e7e1bd

1 file changed

Lines changed: 64 additions & 0 deletions

File tree

‎summary.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>まとめ - Flutiger Aero風</title>
7+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
8+
</head>
9+
<body class="bg-gradient-to-l from-blue-50 to-blue-300 text-gray-900 font-sans overflow-x-hidden min-h-screen">
10+
<!-- ナビゲーションバー -->
11+
<nav class="mt-4 flex flex-col items-center gap-2 w-screen p-5 bg-blue-900 md:flex-row md:justify-center md:gap-6">
12+
<a href="index.html" class="text-2xl text-white">トップ</a>
13+
<a href="research.html" class="text-2xl text-white">研究</a>
14+
<a href="creation.html" class="text-2xl text-white">製作</a>
15+
<a href="portal.html" class="text-2xl text-white">ポータル</a>
16+
<a href="summary.html" class="text-2xl text-white font-bold underline">まとめ</a>
17+
</nav>
18+
<div class="w-full min-h-[400px] bg-gradient-to-b from-blue-200 via-blue-400 to-blue-900 pt-8 pb-16 px-2 md:px-0">
19+
<div class="max-w-5xl mx-auto">
20+
<header class="mb-12">
21+
<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-2">まとめ</h1>
22+
<p class="text-lg md:text-2xl text-blue-800/90 font-medium drop-shadow-sm">Flutiger Aero風デザインのまとめエリアです。<br>UIの進化や特徴、デザインのポイントなどを簡潔にまとめています。</p>
23+
</header>
24+
<section class="relative my-12 p-8 md:p-16 bg-gradient-to-br from-white/90 via-blue-100/80 to-blue-200/70 backdrop-blur-2xl rounded-3xl border border-blue-300 shadow-2xl overflow-hidden group transition-all duration-500">
25+
<div class="absolute left-0 top-0 w-2 h-full bg-gradient-to-b from-blue-400 via-blue-300 to-blue-100 rounded-l-3xl blur-sm opacity-70"></div>
26+
<div class="absolute right-8 top-8 w-24 h-24 bg-gradient-to-tr from-blue-300/60 to-white/0 rounded-full blur-2xl opacity-60 animate-pulse"></div>
27+
<div class="flex items-center gap-4 mb-6">
28+
<span class="w-10 h-10 flex items-center justify-center drop-shadow-lg">
29+
<svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
30+
<circle cx="12" cy="12" r="10" fill="#e0f2fe"/>
31+
<path d="M8 12l2 2 4-4" stroke="#0ea5e9" stroke-width="2.5"/>
32+
</svg>
33+
</span>
34+
<h2 class="text-3xl md:text-5xl font-extrabold text-blue-900 drop-shadow-lg tracking-tight bg-gradient-to-r from-blue-700 via-blue-400 to-blue-700 bg-clip-text text-transparent">まとめテーマ</h2>
35+
</div>
36+
<p class="text-xl md:text-2xl text-blue-800 font-medium leading-relaxed drop-shadow-sm mb-6">
37+
UIデザインの進化、Aero/Aqua/Retroの特徴、現代的な再評価などをまとめています。
38+
</p>
39+
<ul class="list-disc pl-8 text-blue-900/90 text-lg space-y-2">
40+
<li>Flutiger Aero風の特徴と魅力</li>
41+
<p>Flutiger Aero風のデザインは、シンプルでありながら洗練された美しさを持ち、ユーザーに親しみやすい印象を与えるということがわかりました</p>
42+
<li>UIの歴史的変遷</li>
43+
<p>UIデザインは常に進化しており、AeroやAquaのようなスタイルは人によっては古いと考えられるけども、時代の変化と共に新しく再評価されています。</p>
44+
<li>現代Webへの応用</li>
45+
<p>現代のWebデザインにおいても、Flutiger Aero風の要素を取り入れることで、ユーザーに親しみやすく、かつ洗練された印象を与えることができます。</p>
46+
<li>今後の展望</li>
47+
<p>Flutiger Aero風のデザインは、今後も進化し続けるでしょう。新しい技術やトレンドが登場する中で、他のデザインと融合しながら、新たな価値を生み出すことが期待されます。</p>
48+
</ul>
49+
<div class="mt-8 flex justify-center">
50+
<a href="portal.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">
51+
<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">
52+
<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>
53+
</span>
54+
<div>
55+
<p class="text-blue-900 font-extrabold text-xl group-hover:text-blue-700 transition">ポータルへ</p>
56+
<p class="text-blue-800/90 text-sm">全ページ一覧・まとめ</p>
57+
</div>
58+
</a>
59+
</div>
60+
</section>
61+
</div>
62+
</div>
63+
</body>
64+
</html>

0 commit comments

Comments
 (0)