Skip to content

Commit e7c12e5

Browse files
YasunariIguchiYasunariIguchi
committed
6/7,7/5,8/2-30のイベントタイトル作成
1 parent db13113 commit e7c12e5

10 files changed

Lines changed: 623 additions & 4 deletions

File tree

‎20260412-0510_hackathon/pc_20260412.png‎

-45.8 KB
Binary file not shown.

20260412-0510_hackathon/YDW_bananaslip_plus_240809/YDWbananaslipplus.otf renamed to assets/YDW_bananaslip_plus_240809/YDWbananaslipplus.otf

File renamed without changes.

20260412-0510_hackathon/YDW_bananaslip_plus_240809/bananaslip_plus_readme.txt renamed to assets/YDW_bananaslip_plus_240809/bananaslip_plus_readme.txt

File renamed without changes.

20260412-0510_hackathon/hero-bg-bottom_pc.webp renamed to assets/hero-bg-bottom_pc.webp

File renamed without changes.

20260412-0510_hackathon/hero-bg-top_pc.webp renamed to assets/hero-bg-top_pc.webp

File renamed without changes.

20260412-0510_hackathon/icon.webp renamed to assets/icon.webp

File renamed without changes.

20260412-0510_hackathon/title.html renamed to hackathon/20260412-0510.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<style>
99
@font-face {
1010
font-family: 'BananaSlip';
11-
src: url('./YDW_bananaslip_plus_240809/YDWbananaslipplus.otf') format('opentype');
11+
src: url('../assets/YDW_bananaslip_plus_240809/YDWbananaslipplus.otf') format('opentype');
1212
font-weight: 400;
1313
font-style: normal;
1414
font-display: block;
@@ -79,7 +79,7 @@
7979
left: 0;
8080
right: 0;
8181
height: 50%;
82-
background-image: url('hero-bg-top_pc.webp');
82+
background-image: url('../assets/hero-bg-top_pc.webp');
8383
background-size: cover;
8484
background-position: center top;
8585
z-index: 2;
@@ -91,7 +91,7 @@
9191
left: 0;
9292
right: 0;
9393
height: 50%;
94-
background-image: url('hero-bg-bottom_pc.webp');
94+
background-image: url('../assets/hero-bg-bottom_pc.webp');
9595
background-size: cover;
9696
background-position: center bottom;
9797
z-index: 2;
@@ -181,7 +181,7 @@ <h1 class="title">
181181
<span class="hash">#</span>
182182
<span class="c1">ハ</span><span class="c2">ッ</span><span class="c3">カ</span><span class="c4">ソ</span><span class="c5" style="position: relative;">
183183
ン
184-
<img src="icon.webp" alt="logo" class="logo-icon">
184+
<img src="../assets/icon.webp" alt="logo" class="logo-icon">
185185
</span>
186186
</h1>
187187
<p class="subtitle">“ プログラミング・ITの知識をつける ”</p>

‎hackathon/20260802-0830.html‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="preconnect" href="https://fonts.googleapis.com">
6+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7+
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700;900&family=Noto+Sans+JP:wght@400;600;700;800&display=swap" rel="stylesheet">
8+
<style>
9+
@font-face {
10+
font-family: 'BananaSlip';
11+
src: url('../assets/YDW_bananaslip_plus_240809/YDWbananaslipplus.otf') format('opentype');
12+
font-weight: 400;
13+
font-style: normal;
14+
font-display: block;
15+
}
16+
17+
:root {
18+
--bg-white: #fdfdff;
19+
--text-blue: #1c315e; /* 少し濃くして視認性をアップ */
20+
/* 画像から抽出した高精度カラー */
21+
--color-hash: #b59541; /* # のくすんだゴールド */
22+
--color-ha: #2a8373; /* ハ：深みのあるエメラルド */
23+
--color-tsu: #b8103c; /* ッ：落ち着いた紅色 */
24+
--color-ka: #d47031; /* カ：赤みの強いテラコッタ */
25+
--color-so: #3b5a9a; /* ソ：落ち着いたロイヤルブルー */
26+
--color-n: #c9b144; /* ン：明るいマスタードゴールド */
27+
--gold: #c9b144; /* location用 */
28+
--dot-color: #e5e5e5;
29+
}
30+
31+
body {
32+
margin: 0;
33+
display: flex;
34+
justify-content: center;
35+
align-items: center;
36+
min-height: 100vh;
37+
background-color: #f0f0f0;
38+
font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
39+
}
40+
41+
.banner {
42+
width: 800px;
43+
height: 320px;
44+
background-color: var(--bg-white);
45+
position: relative;
46+
overflow: hidden;
47+
display: flex;
48+
flex-direction: column;
49+
justify-content: center;
50+
align-items: center;
51+
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
52+
}
53+
54+
/* 背景のドット装飾（形を制限して配置） */
55+
.dots {
56+
position: absolute;
57+
inset: 0; /* 親要素いっぱいに広げる */
58+
background-image: radial-gradient(var(--dot-color) 2px, transparent 2px);
59+
background-size: 20px 20px;
60+
z-index: 1;
61+
62+
/* マスクを使って左上と右下だけに表示させる */
63+
-webkit-mask-image:
64+
radial-gradient(circle at 10% 10%, black 0%, transparent 40%),
65+
radial-gradient(circle at 95% 50%, black 0%, transparent 35%);
66+
mask-image:
67+
radial-gradient(circle at 5% 5%, black 0%, transparent 30%),
68+
radial-gradient(circle at 20% 0%, black 0%, transparent 25%),
69+
radial-gradient(circle at 100% 40%, black 0%, transparent 30%),
70+
radial-gradient(circle at 90% 60%, black 0%, transparent 25%);
71+
72+
opacity: 0.7; /* 少し薄くして馴染ませる */
73+
}
74+
75+
/* 背景画像 */
76+
.bg-top {
77+
position: absolute;
78+
top: 0;
79+
left: 0;
80+
right: 0;
81+
height: 50%;
82+
background-image: url('../assets/hero-bg-top_pc.webp');
83+
background-size: cover;
84+
background-position: center top;
85+
z-index: 2;
86+
}
87+
88+
.bg-bottom {
89+
position: absolute;
90+
bottom: 0;
91+
left: 0;
92+
right: 0;
93+
height: 50%;
94+
background-image: url('../assets/hero-bg-bottom_pc.webp');
95+
background-size: cover;
96+
background-position: center bottom;
97+
z-index: 2;
98+
}
99+
100+
/* コンテンツ */
101+
.content {
102+
position: relative;
103+
z-index: 10;
104+
text-align: center;
105+
color: var(--text-blue);
106+
}
107+
108+
.title {
109+
font-size: 78px; /* 少し大きく */
110+
font-weight: 700;
111+
margin: 0;
112+
display: flex;
113+
align-items: center;
114+
justify-content: center;
115+
font-family: 'BananaSlip', sans-serif !important;
116+
letter-spacing: -0.1em; /* 文字間を詰める */
117+
}
118+
119+
.title span { margin: 0 1px; }
120+
/* 各文字のグラデーション再現 */
121+
.hash { color: var(--color-hash); font-size: 0.85em; margin-right: 8px !important; }
122+
123+
/* 文字ごとに微細なグラデーションをかけると再現性が跳ね上がります */
124+
.c1 { color: var(--color-ha); }
125+
.c2 { color: var(--color-tsu); }
126+
/* カのグラデーション */
127+
.c3 {
128+
background: linear-gradient(to bottom, #e0854d, #d47031);
129+
-webkit-background-clip: text;
130+
-webkit-text-fill-color: transparent;
131+
background-clip: text;
132+
}
133+
.c4 { color: var(--color-so); }
134+
.c5 { color: var(--color-n); }
135+
136+
.subtitle {
137+
font-size: 24px;
138+
margin: 12px 0;
139+
font-weight: 700;
140+
color: #333; /* 完全に真っ黒より少し抜く */
141+
}
142+
143+
.date-time {
144+
font-size: 24px;
145+
font-weight: 800;
146+
margin: 8px 0;
147+
letter-spacing: 0.02em;
148+
}
149+
150+
.date-time + .date-time {
151+
margin-top: 2px;
152+
}
153+
154+
.location {
155+
font-size: 14px;
156+
margin-bottom: 8px;
157+
font-weight: 600;
158+
}
159+
160+
.sponsors {
161+
font-size: 11px;
162+
font-weight: 600;
163+
opacity: 0.8;
164+
}
165+
166+
.logo-icon {
167+
position: absolute;
168+
width: 40px;
169+
height: 40px;
170+
top: -10px;
171+
right: -55px;
172+
}
173+
</style>
174+
</head>
175+
<body>
176+
177+
<div class="banner">
178+
<div class="dots"></div>
179+
180+
<div class="bg-top"></div>
181+
<div class="bg-bottom"></div>
182+
183+
<div class="content">
184+
<h1 class="title">
185+
<span class="hash">#</span>
186+
<span class="c1">ハ</span><span class="c2">ッ</span><span class="c3">カ</span><span class="c4">ソ</span><span class="c5" style="position: relative;">
187+
ン
188+
<img src="../assets/icon.webp" alt="logo" class="logo-icon">
189+
</span>
190+
</h1>
191+
<p class="subtitle">“ プログラミング・ITの知識をつける ”</p>
192+
193+
<div class="date-time">
194+
❶ 2026.08.02 <span style="font-size: 17px;">(日)</span> 13:00 - 18:00
195+
</div>
196+
<div class="date-time">
197+
❷ 2026.08.30 <span style="font-size: 17px;">(日)</span> 14:00 - 17:00
198+
</div>
199+
200+
<div class="location">
201+
<span style="color: var(--gold);">📍</span> 東京都中央区日本橋茅場町1-11-3 岡本ビル 9階 (VORT SPACE 茅場町)
202+
</div>
203+
204+
<div class="sponsors">
205+
協賛：株式会社SOARIG、株式会社SHOU
206+
</div>
207+
</div>
208+
</div>
209+
210+
</body>
211+
</html>

0 commit comments

Comments
 (0)