-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Expand file tree
/
Copy pathneo-brutalism.html
More file actions
463 lines (426 loc) · 14.9 KB
/
Copy pathneo-brutalism.html
File metadata and controls
463 lines (426 loc) · 14.9 KB
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BRUTAL / 粗野工作室</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root{
--yellow:#FFE156; /* 柠檬黄 */
--pink:#FF6B9D; /* 荧光粉 */
--blue:#4ECDC4; /* 电光蓝 */
--mint:#95E77E; /* 薄荷绿 */
--cream:#FFF8F0; /* 奶白 */
--ink:#0A0A0A; /* 主黑 */
--line:3px solid var(--ink);
--shadow:6px 6px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--cream);
color:var(--ink);
font-family:'Space Mono','Courier New',monospace;
font-size:15px;
line-height:1.6;
overflow-x:hidden;
/* 极淡的方格底纹，强化"贴纸本"质感 */
background-image:
linear-gradient(rgba(10,10,10,0.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(10,10,10,0.04) 1px,transparent 1px);
background-size:32px 32px;
}
h1,h2,h3,.title{
font-family:'Archivo Black','Arial Black',sans-serif;
font-weight:900;
letter-spacing:-1px;
line-height:0.95;
text-transform:uppercase;
}
/* 标签：0 圆角、硬边 */
.tag{
display:inline-block;
background:var(--ink);
color:var(--cream);
font-family:'Space Mono',monospace;
font-weight:700;
font-size:12px;
padding:4px 10px;
border:var(--line);
letter-spacing:1px;
}
/* 通用卡片：16px 圆角 + 硬阴影 */
.card{
border:var(--line);
border-radius:16px;
box-shadow:var(--shadow);
padding:26px;
transition:transform .12s ease, box-shadow .12s ease;
position:relative;
}
.card:hover{
transform:translate(4px,4px);
box-shadow:2px 2px 0 var(--ink);
}
.btn{
display:inline-block;
font-family:'Archivo Black',sans-serif;
font-size:14px;
text-transform:uppercase;
text-decoration:none;
color:var(--ink);
background:var(--yellow);
border:var(--line);
border-radius:16px;
padding:12px 22px;
box-shadow:var(--shadow);
cursor:pointer;
transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{
transform:translate(4px,4px);
box-shadow:2px 2px 0 var(--ink);
}
/* ============ NAV ============ */
nav{
position:sticky;top:0;z-index:50;
background:var(--yellow);
border-bottom:var(--line);
display:flex;align-items:center;justify-content:space-between;
padding:14px 26px;
flex-wrap:wrap;gap:12px;
}
.logo{
font-family:'Archivo Black',sans-serif;
font-size:22px;
transform:rotate(-2deg);
background:var(--ink);color:var(--yellow);
padding:6px 12px;border-radius:16px;
border:var(--line);
}
.nav-links{display:flex;gap:10px;flex-wrap:wrap;}
.nav-links a{
font-family:'Space Mono',monospace;font-weight:700;
text-decoration:none;color:var(--ink);
border:var(--line);border-radius:16px;
padding:6px 14px;background:var(--cream);
transition:transform .12s ease, box-shadow .12s ease;
}
.nav-links a:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink);}
/* ============ HERO ============ */
.hero{
padding:60px 26px 40px;
position:relative;
}
.hero-inner{
max-width:1100px;margin:0 auto;
display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;
}
.hero-block{
background:var(--pink);
border:var(--line);
border-radius:16px;
box-shadow:var(--shadow);
padding:40px 34px;
position:relative;
}
.hero h1{
font-size:clamp(38px,7vw,82px);
transform:rotate(-2deg);
margin-bottom:18px;
}
.hero h1 .stroke{
-webkit-text-stroke:2px var(--ink);
color:var(--cream);
}
.hero p{
font-weight:700;
max-width:440px;
margin-bottom:22px;
background:var(--cream);
border:var(--line);
padding:10px 12px;
border-radius:16px;
}
.hero-aside{
background:var(--blue);
border:var(--line);
border-radius:16px;
box-shadow:var(--shadow);
padding:30px;
transform:rotate(2deg);
position:relative;
}
.hero-aside h3{font-size:24px;margin-bottom:14px;}
.hero-aside ul{list-style:none;}
.hero-aside li{
border-bottom:3px dashed var(--ink);
padding:8px 0;font-weight:700;
}
/* 手绘箭头 SVG 装饰（粉区旁） */
.deco-arrow{
position:absolute;
right:-46px;top:40px;
width:120px;height:120px;
transform:rotate(8deg);
}
/* ============ 非对称网格区 ============ */
.grid-wrap{
max-width:1100px;margin:30px auto;padding:0 26px;
}
.section-head{
display:flex;align-items:center;gap:14px;margin:30px 0 22px;
}
.section-head h2{font-size:clamp(28px,5vw,52px);transform:rotate(2deg);}
.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows:minmax(150px,auto);
gap:22px;
}
.g-blue{grid-column:span 2;background:var(--blue);}
.g-mint{grid-column:span 1;background:var(--mint);}
.g-yellow{grid-column:span 1;background:var(--yellow);}
.g-pink{grid-column:span 2;background:var(--pink);}
.g-mint2{grid-column:span 2;background:var(--mint);}
.g-blue2{grid-column:span 2;background:var(--blue);}
.card h3{font-size:26px;margin-bottom:10px;}
.card .tag{margin-bottom:14px;}
.card p{font-weight:700;}
/* 贴纸：压在两块色块交界处，重叠效果 */
.sticker{
position:absolute;
z-index:5;
background:var(--ink);color:var(--yellow);
font-family:'Archivo Black',sans-serif;
font-size:14px;padding:8px 12px;
border:var(--line);border-radius:0; /* 小标签 0 圆角 */
transform:rotate(-6deg);
box-shadow:4px 4px 0 var(--pink);
}
.sticker-1{left:-18px;top:-18px;}
.sticker-2{right:-14px;bottom:-16px;transform:rotate(5deg);box-shadow:4px 4px 0 var(--blue);}
/* 手绘星号装饰 */
.deco-star{
position:absolute;width:60px;height:60px;
right:18px;top:14px;
}
/* ============ 噪点纹理区 ============ */
.noise-section{
margin:40px 26px;
max-width:1100px;
margin-left:auto;margin-right:auto;
background:var(--mint);
border:var(--line);
border-radius:16px;
box-shadow:var(--shadow);
padding:46px 34px;
position:relative;
overflow:hidden;
}
/* 细密噪点：内联 SVG feTurbulence */
.noise-section::before{
content:"";position:absolute;inset:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
mix-blend-mode:multiply;
pointer-events:none;
opacity:.5;
}
.noise-section h2{font-size:clamp(26px,5vw,46px);position:relative;transform:rotate(-1deg);}
.noise-section p{font-weight:700;max-width:560px;position:relative;margin-top:14px;}
.noise-inner{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
/* 手绘波浪线装饰（跟随薄荷绿区->用黑描边即可，或同主色） */
.deco-wave{
position:absolute;right:24px;top:20px;width:140px;height:50px;
z-index:1;
}
/* ============ 数字统计区 ============ */
.stats{
max-width:1100px;margin:30px auto;padding:0 26px;
display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.stat{
border:var(--line);border-radius:16px;box-shadow:var(--shadow);
padding:26px;text-align:center;background:var(--cream);
transition:transform .12s ease,box-shadow .12s ease;
}
.stat:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink);}
.stat .num{font-family:'Archivo Black',sans-serif;font-size:54px;line-height:1;}
.stat.s1 .num{color:var(--pink);}
.stat.s2 .num{color:var(--blue);}
.stat.s3 .num{color:var(--mint);}
.stat .lbl{font-weight:700;margin-top:10px;}
/* ============ CTA ============ */
.cta{
max-width:1100px;margin:40px auto;padding:0 26px;
}
.cta-box{
background:var(--yellow);
border:var(--line);border-radius:16px;box-shadow:var(--shadow);
padding:46px 34px;text-align:center;position:relative;
}
.cta-box h2{font-size:clamp(28px,6vw,60px);transform:rotate(1deg);margin-bottom:18px;}
.cta-box .btn{background:var(--pink);}
/* ============ FOOTER ============ */
footer{
background:var(--ink);color:var(--cream);
border-top:var(--line);
padding:34px 26px;margin-top:40px;
display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
align-items:center;
}
footer .logo-foot{font-family:'Archivo Black',sans-serif;font-size:20px;color:var(--yellow);transform:rotate(-2deg);}
footer a{color:var(--blue);text-decoration:none;font-weight:700;}
footer a:hover{color:var(--pink);}
/* ============ 响应式 ============ */
@media(max-width:860px){
.hero-inner{grid-template-columns:1fr;}
.grid{grid-template-columns:repeat(2,1fr);}
.g-blue,.g-pink,.g-mint2,.g-blue2{grid-column:span 2;}
.stats{grid-template-columns:1fr;}
}
@media(max-width:560px){
.grid{grid-template-columns:1fr;}
.g-blue,.g-mint,.g-yellow,.g-pink,.g-mint2,.g-blue2{grid-column:span 1;}
}
</style>
</head>
<body>
<!-- ============ NAV ============ -->
<nav>
<div class="logo">BRUTAL ☣</div>
<div class="nav-links">
<a href="#work">WORK</a>
<a href="#noise">VIBE</a>
<a href="#stats">NUMBERS</a>
<a href="#contact">HIRE</a>
</div>
</nav>
<!-- ============ HERO ============ -->
<header class="hero" id="top">
<div class="hero-inner">
<div class="hero-block">
<span class="tag">EST. 2026 // 态度工作室</span>
<h1>WE MAKE<br><span class="stroke">LOUD</span><br>THINGS.</h1>
<p>不精致，但要粗粝的生命力。我们用彩色胶带、马克笔和硬阴影，把信息拼成一本会叫的杂志。</p>
<a href="#work" class="btn">看作品 ↓</a>
<!-- 手绘箭头 SVG -->
<svg class="deco-arrow" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10 20 C 40 10, 70 40, 60 70 C 55 90, 30 95, 20 80" stroke="#0A0A0A" stroke-width="4" stroke-linecap="round"/>
<path d="M20 80 L 12 64 M20 80 L 38 74" stroke="#0A0A0A" stroke-width="4" stroke-linecap="round"/>
</svg>
</div>
<aside class="hero-aside">
<h3>WHAT WE DO ✦</h3>
<ul>
<li>▸ 品牌视觉系统</li>
<li>▸ 网页与交互</li>
<li>▸ 印刷物 / ZINE</li>
<li>▸ 动效与 3D</li>
</ul>
</aside>
</div>
</header>
<!-- ============ 非对称网格 ============ -->
<section class="grid-wrap" id="work">
<div class="section-head">
<span class="tag">SECTION 01</span>
<h2>选·些·活·儿</h2>
</div>
<div class="grid">
<!-- 大蓝块（占两列） -->
<div class="card g-blue">
<span class="sticker sticker-1">HOT !</span>
<svg class="deco-star" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30 4 L34 26 L56 30 L34 34 L30 56 L26 34 L4 30 L26 26 Z" fill="#0A0A0A"/>
</svg>
<span class="tag">BRANDING</span>
<h3>糖果色视觉系统</h3>
<p>为一家新锐饮料品牌搭建整套高饱和识别系统：硬边色块、胶带贴法、不拘一格的版式规范。</p>
</div>
<!-- 薄荷绿（占一格） -->
<div class="card g-mint">
<span class="tag">WEB</span>
<h3>官网</h3>
<p>粗野风落地页，加载即炸。</p>
</div>
<!-- 柠檬黄（占一格） -->
<div class="card g-yellow">
<span class="tag">PRINT</span>
<h3>ZINE</h3>
<p>手工拼贴独立刊物。</p>
</div>
<!-- 荧光粉（占两列） -->
<div class="card g-pink">
<span class="sticker sticker-2">NEW</span>
<span class="tag">MOTION</span>
<h3>会动的硬阴影</h3>
<p>把 Neo-Brutalism 的"积木硬影"搬进动效——元素被按下时阴影收缩，松手弹回，像在敲真实的塑料按键。交互即态度。</p>
</div>
<!-- 薄荷绿（占两列） -->
<div class="card g-mint2">
<span class="tag">3D</span>
<h3>立体贴纸包</h3>
<p>用文生 3D 捏了一整套可旋转的产品角色，边缘带黑描边，光影硬切，放到任何页面都像被胶带粘上去的。</p>
</div>
<!-- 电光蓝（占两列） -->
<div class="card g-blue2">
<span class="tag">SYSTEM</span>
<h3>设计组件库</h3>
<p>一套可复用的粗野组件：3px 黑边、6px 纯黑硬影、900 字重标题、等宽正文——团队拿来就能拼出统一又张扬的界面。</p>
</div>
</div>
</section>
<!-- ============ 噪点纹理区 ============ -->
<section class="noise-section" id="noise">
<!-- 手绘波浪线 SVG（跟随薄荷绿区，用黑描边） -->
<svg class="deco-wave" viewBox="0 0 140 50" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 25 C 20 5, 35 45, 50 25 S 80 5, 95 25 S 125 45, 136 25" stroke="#0A0A0A" stroke-width="4" stroke-linecap="round"/>
</svg>
<div class="noise-inner">
<div>
<span class="tag" style="background:var(--ink);color:var(--mint)">SECTION 02 // TEXTURE</span>
<h2>粗粝，是有手感的</h2>
<p>这一块背景铺了细密噪点——不是滤镜，是真实的颗粒。我们坚持：越数字，越要像被手指蹭过的纸。态度不在完美里，在毛边上。</p>
</div>
<a href="#contact" class="btn" style="background:var(--pink)">聊聊质感 →</a>
</div>
</section>
<!-- ============ 数字统计 ============ -->
<section class="stats" id="stats">
<div class="stat s1">
<div class="num">128+</div>
<div class="lbl">交付项目</div>
</div>
<div class="stat s2">
<div class="num">3px</div>
<div class="lbl">我们的黑边信仰</div>
</div>
<div class="stat s3">
<div class="num">∞</div>
<div class="lbl">对精致的拒绝</div>
</div>
</section>
<!-- ============ CTA ============ -->
<section class="cta" id="contact">
<div class="cta-box">
<span class="tag" style="background:var(--ink);color:var(--yellow)">SECTION 03</span>
<h2>来造点吵闹的东西</h2>
<p style="font-weight:700;max-width:480px;margin:0 auto 22px;">不管你是品牌、活动还是只想有个不一样的官网——把需求甩过来。</p>
<a href="mailto:hi@brutal.studio" class="btn">HIRE US ✦</a>
</div>
</section>
<!-- ============ FOOTER ============ -->
<footer>
<div class="logo-foot">BRUTAL ☣ STUDIO</div>
<div>
<a href="#top">回到顶部 ↑</a> ·
<a href="mailto:hi@brutal.studio">hi@brutal.studio</a>
</div>
<div style="font-weight:700;">© 2026 · 用胶带和马克笔拼成</div>
</footer>
</body>
</html>