html-anything/next/src/lib/templates/skills/social-carousel/example.html at main · chenmofei/html-anything · 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
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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Three posts. One beat. — social carousel</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=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <style>
    :root {
      --stage: #0a0a0a;
      --stage-2: #141414;
      --paper: #f4ede0;
      --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
      --mono: 'IBM Plex Mono', ui-monospace, monospace;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,255,255,0.04), transparent 70%),
        var(--stage);
      color: #f4ede0;
      font: 14px/1.5 -apple-system, system-ui, sans-serif;
    }

    .stage {
      max-width: 1280px; margin: 0 auto; padding: 60px 32px 80px;
    }
    .stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
    .stage-head h1 { margin: 0; font: italic 700 36px/1 var(--serif); letter-spacing: -0.005em; }
    .stage-head h1 em { font-style: normal; }
    .stage-head h1 .dot { color: #a4a09a; }
    .stage-head .lede { margin: 8px 0 0; font: 11px/1.6 var(--mono); color: rgba(244,237,224,0.5); letter-spacing: 0.06em; max-width: 60ch; text-transform: uppercase; }
    .stage-head .badge { font: 10.5px/1 var(--mono); padding: 7px 10px; border: 1px solid rgba(244,237,224,0.3); color: rgba(244,237,224,0.7); letter-spacing: 0.18em; flex-shrink: 0; }

    .row { display: flex; gap: 22px; justify-content: center; align-items: stretch; flex-wrap: wrap; }

    .card {
      width: clamp(280px, 30vw, 380px);
      aspect-ratio: 1 / 1;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 30px 60px rgba(0,0,0,0.45);
      position: relative;
      overflow: hidden;
      color: #ffffff;
    }
    .card .scrim {
      position: absolute; inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
      pointer-events: none;
    }
    .card .top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; }
    .card .brand { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; background: rgba(255,255,255,0.10); backdrop-filter: blur(6px); border-radius: 999px; }
    .card .brand .name { font: italic 700 13px/1 var(--serif); }
    .card .brand .dot { width: 5px; height: 5px; background: var(--paper); border-radius: 50%; opacity: 0.9; }
    .card .index { font: 11px/1.4 var(--mono); color: rgba(255,255,255,0.85); letter-spacing: 0.16em; text-align: right; padding: 6px 10px; background: rgba(0,0,0,0.30); backdrop-filter: blur(4px); border-radius: 4px; }

    .card .lockup { position: absolute; left: 22px; right: 22px; bottom: 78px; }
    .card .lockup h2 { margin: 0; font: 700 60px/1 var(--serif); letter-spacing: -0.005em; color: #ffffff; }
    .card .lockup h2 em { font-style: italic; }
    .card .lockup h2 .accent { font-style: italic; }

    .card .footer { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; justify-content: space-between; align-items: center; }
    .card .footer .caption { font: 10.5px/1.4 var(--mono); color: rgba(255,255,255,0.85); letter-spacing: 0.14em; text-transform: uppercase; max-width: 70%; }
    .card .loop { font: 10.5px/1 var(--mono); padding: 6px 8px; border: 1px solid rgba(255,255,255,0.55); border-radius: 4px; color: rgba(255,255,255,0.85); letter-spacing: 0.18em; }

    /* Card 1 — dawn meadow, blue sky */
    .card.c1 {
      background:
        linear-gradient(180deg, #5b8cb6 0%, #92aebd 32%, #b0a679 50%, #6f8a4d 70%, #2a4a2a 100%),
        #4a6a8a;
    }
    .card.c1 .figure {
      position: absolute; left: 50%; top: 56%;
      width: 80px; height: 200px;
      transform: translate(-50%, 0);
      background:
        radial-gradient(ellipse 30px 14px at 50% 30%, #2a1f15 0%, #2a1f15 60%, transparent 70%),
        linear-gradient(180deg, #2a1f15 0%, #4a3018 22%, #6a3a1a 60%, transparent 100%);
      filter: drop-shadow(0 6px 8px rgba(0,0,0,0.35));
      clip-path: polygon(35% 0%, 65% 0%, 78% 26%, 70% 60%, 70% 100%, 30% 100%, 30% 60%, 22% 26%);
      opacity: 0.92;
    }

    /* Card 2 — forest dusk, warm orange center */
    .card.c2 {
      background:
        radial-gradient(ellipse 80% 50% at 50% 100%, #f49255 0%, #c95a30 35%, transparent 60%),
        radial-gradient(ellipse 80% 80% at 50% 90%, rgba(255,180,120,0.5), transparent 60%),
        linear-gradient(180deg, #1c2a25 0%, #2a3a30 30%, #4a3a26 70%, #2a1a14 100%);
    }
    .card.c2 .trees {
      position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    }
    .card.c2 .trees::before, .card.c2 .trees::after {
      content: ''; position: absolute; bottom: 0; width: 50%; height: 70%;
      background:
        radial-gradient(circle at 20% 90%, #0f1a14 6px, transparent 7px),
        radial-gradient(circle at 50% 88%, #0f1a14 8px, transparent 9px),
        radial-gradient(circle at 80% 92%, #0f1a14 6px, transparent 7px);
    }
    .card.c2 .trees::before { left: 0; background:
      linear-gradient(180deg, transparent 0%, transparent 30%, rgba(15,26,20,0.85) 30%, #0f1a14 100%);
      mask: radial-gradient(ellipse 60% 90% at 50% 100%, black 70%, transparent 100%);
    }
    .card.c2 .trees::after { right: 0; background:
      linear-gradient(180deg, transparent 0%, transparent 36%, rgba(15,26,20,0.85) 36%, #0f1a14 100%);
      mask: radial-gradient(ellipse 60% 90% at 50% 100%, black 70%, transparent 100%);
    }
    .card.c2 .figure {
      position: absolute; left: 52%; top: 56%; width: 56px; height: 130px;
      transform: translate(-50%, 0);
      background: linear-gradient(180deg, #2a1810 0%, #4a2818 100%);
      clip-path: polygon(40% 0%, 60% 0%, 70% 22%, 70% 56%, 65% 100%, 35% 100%, 30% 56%, 30% 22%);
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
    }

    /* Card 3 — pink ridge / mountain */
    .card.c3 {
      background:
        linear-gradient(180deg, #1b1e3a 0%, #4a3956 28%, #c9627e 60%, #d57f86 75%, #b8d2d8 100%);
    }
    .card.c3 .ridge {
      position: absolute; inset: 0;
      background:
        linear-gradient(180deg, transparent 60%, rgba(60,30,40,0.4) 80%, rgba(40,20,30,0.7) 100%);
    }
    .card.c3 .ridge::before {
      content: ''; position: absolute; left: 0; right: 0; bottom: 24%;
      height: 30%;
      background:
        linear-gradient(180deg, #b3526a 0%, #7a3148 100%);
      clip-path: polygon(0% 60%, 12% 30%, 22% 50%, 36% 18%, 50% 40%, 60% 22%, 72% 48%, 86% 26%, 100% 50%, 100% 100%, 0% 100%);
    }
    .card.c3 .ridge::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0;
      height: 32%;
      background: linear-gradient(180deg, #2a1f2a 0%, #1a1018 100%);
      clip-path: polygon(0% 50%, 8% 20%, 18% 38%, 30% 8%, 44% 32%, 56% 12%, 68% 36%, 82% 18%, 100% 40%, 100% 100%, 0% 100%);
    }
    .card.c3 .figure {
      position: absolute; right: 18%; bottom: 14%; width: 30px; height: 56px;
      background: #1a0d12;
      clip-path: polygon(35% 0%, 65% 0%, 75% 30%, 60% 100%, 40% 100%, 25% 30%);
      filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
    }

    @media (max-width: 1180px) {
      .row { flex-direction: column; align-items: center; }
      .card { width: min(96vw, 480px); }
      .card .lockup h2 { font-size: 56px; }
    }
  </style>
</head>
<body>
  <div class="stage" data-od-id="stage">
    <div class="stage-head">
      <div>
        <h1>Three posts<span class="dot">.</span> One <em>beat</em><span class="dot">.</span></h1>
        <p class="lede">1080×1080 · cinematic video loops · minimal type. Drop into Instagram, LinkedIn, or X — each post stands on its own or runs as a three-part series.</p>
      </div>
      <span class="badge">SERIES · 01 → 03</span>
    </div>

    <div class="row" data-od-id="cards">

      <article class="card c1" data-od-id="card-1">
        <div class="figure"></div>
        <div class="scrim"></div>
        <div class="top">
          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
          <div class="index">01 · ONWARDS</div>
        </div>
        <div class="lockup"><h2>onwards<em>.</em></h2></div>
        <div class="footer">
          <div class="caption">Man, walking forward — close.</div>
          <div class="loop">1× LOOP</div>
        </div>
      </article>

      <article class="card c2" data-od-id="card-2">
        <div class="trees"></div>
        <div class="figure"></div>
        <div class="scrim"></div>
        <div class="top">
          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
          <div class="index">02 · TO THE NEXT ONE</div>
        </div>
        <div class="lockup"><h2><span class="accent">to the</span><br/><em>next one.</em></h2></div>
        <div class="footer">
          <div class="caption">Woman, stepping into frame.</div>
          <div class="loop">1× LOOP</div>
        </div>
      </article>

      <article class="card c3" data-od-id="card-3">
        <div class="ridge"></div>
        <div class="figure"></div>
        <div class="scrim"></div>
        <div class="top">
          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
          <div class="index">03 · LOOKING AHEAD</div>
        </div>
        <div class="lockup"><h2>looking<br/><em>ahead.</em></h2></div>
        <div class="footer">
          <div class="caption">Woman, overlooking the city.</div>
          <div class="loop">1× LOOP</div>
        </div>
      </article>

    </div>
  </div>
</body>
</html>