Setting the file. One moment. 34.15
Swiss
(opens in a new tab)
references/styles/swiss.html
HTML·188 lines·6 KB
16
<!
doctype
html
>
17<html lang="zh-CN">
18 <head>
19 <meta charset="utf-8" />
20 <title>style · swiss</title>
21 <style>
22 html,
23 body {
24 margin: 0;
25 padding: 0;
26 background: #0a0c12;
27 font-family: ui-sans-serif, system-ui, sans-serif;
28 }
29 .stage {
30 position: relative;
31 width: 1920px;
32 height: 1080px;
33 transform-origin: top left;
34 transform: scale(0.5);
35 overflow: hidden;
36 }
37 .card-host {
38 position: absolute;
39 left: 0;
40 top: 0;
41 width: 1920px;
42 height: 1080px;
43 }
44 </style>
45 </head>
46 <body>
47 <div class="stage">
48 <div class="card-host">
49 <div class="card" data-card-id="ref-swiss">
50 <style>
51 .card[data-card-id="ref-swiss"] .root {
52 --bg: #ffffff;
53 --ink: #111111;
54 --muted: #555555;
55 --accent: #e8190f;
56 --font-sans:
57 "Helvetica Neue", Helvetica, "Inter", ui-sans-serif, system-ui, sans-serif;
58 --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
59
60 width: 100%;
61 height: 100%;
62 position: relative;
63 overflow: hidden;
64 background: var(--bg);
65 color: var(--ink);
66 font-family: var(--font-sans);
67 padding: 48px 64px;
68 box-sizing: border-box;
69 display: grid;
70 grid-template-rows: auto 1fr auto;
71 gap: 24px;
72 }
73 .card[data-card-id="ref-swiss"] .top-rule {
74 height: 4px;
75 background: var(--ink);
76 }
77 .card[data-card-id="ref-swiss"] .top-meta {
78 display: flex;
79 justify-content: space-between;
80 align-items: baseline;
81 padding-top: 12px;
82 font: 700 14px/1 var(--font-mono);
83 letter-spacing: 0.26em;
84 color: var(--ink);
85 text-transform: uppercase;
86 }
87 .card[data-card-id="ref-swiss"] .top-meta .num {
88 color: var(--accent);
89 }
90 .card[data-card-id="ref-swiss"] .body {
91 display: grid;
92 grid-template-columns: 1fr 320px;
93 gap: 56px;
94 align-items: end;
95 }
96 .card[data-card-id="ref-swiss"] .title {
97 margin: 0;
98 font: 700 116px/0.95 var(--font-sans);
99 color: var(--ink);
100 letter-spacing: -0.025em;
101 }
102 .card[data-card-id="ref-swiss"] .title .red {
103 color: var(--accent);
104 }
105 .card[data-card-id="ref-swiss"] .detail {
106 margin: 0;
107 font: 400 24px/1.45 var(--font-sans);
108 color: var(--muted);
109 }
110 .card[data-card-id="ref-swiss"] .slab {
111 background: var(--accent);
112 color: #fff;
113 padding: 24px 28px;
114 font: 700 56px/1 var(--font-sans);
115 letter-spacing: -0.02em;
116 align-self: end;
117 }
118 .card[data-card-id="ref-swiss"] .slab small {
119 display: block;
120 font: 600 14px/1 var(--font-mono);
121 letter-spacing: 0.18em;
122 margin-top: 6px;
123 color: rgba(255, 255, 255, 0.85);
124 }
125 .card[data-card-id="ref-swiss"] .bottom-rule {
126 height: 1px;
127 background: var(--ink);
128 }
129 .card[data-card-id="ref-swiss"] .bottom-meta {
130 display: flex;
131 justify-content: space-between;
132 align-items: baseline;
133 padding-top: 12px;
134 font: 600 13px/1 var(--font-mono);
135 letter-spacing: 0.22em;
136 color: var(--muted);
137 }
138 </style>
139
140 <div class="root">
141 <div>
142 <div
143 class="top-rule"
144 data-anim="grow-x"
145 data-anim-at="0.05"
146 data-anim-duration="0.45"
147 data-anim-target-w="1792"
148 ></div>
149 <div
150 class="top-meta"
151 data-anim="fade-in"
152 data-anim-at="0.3"
153 data-anim-duration="0.35"
154 >
155 <span>V—TAKE / TAKEAWAY</span>
156 <span class="num">№ 09</span>
157 </div>
158 </div>
159
160 <div class="body">
161 <h2 class="title" data-anim="fade-in" data-anim-at="0.45" data-anim-duration="0.55">
162 <span class="red">设计</span>不是装饰，<br />而是结构。
163 </h2>
164 <div
165 class="slab"
166 data-anim="slide-in"
167 data-anim-at="0.55"
168 data-anim-duration="0.45"
169 data-anim-from="right"
170 data-anim-distance="120"
171 >
172 92<small>STRUCTURE INDEX</small>
173 </div>
174 </div>
175
176 <div>
177 <div class="bottom-rule"></div>
178 <div class="bottom-meta">
179 <span>RATIO 1 : 1.618</span>
180 <span>00:42 → 01:14</span>
181 </div>
182 </div>
183 </div>
184 </div>
185 </div>
186 </div>
187 </body>
188</html>