react-email 4.0.6 → 4.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cli/index.js +15 -8
- package/dist/cli/index.mjs +15 -8
- package/dist/index.js +1234 -0
- package/dist/preview/.next/BUILD_ID +1 -1
- package/dist/preview/.next/app-build-manifest.json +4 -4
- package/dist/preview/.next/build-manifest.json +2 -2
- package/dist/preview/.next/next-minimal-server.js.nft.json +1 -1
- package/dist/preview/.next/next-server.js.nft.json +1 -1
- package/dist/preview/.next/prerender-manifest.json +3 -3
- package/dist/preview/.next/server/app/_not-found/page.js +1 -1
- package/dist/preview/.next/server/app/_not-found/page_client-reference-manifest.js +1 -1
- package/dist/preview/.next/server/app/page.js +1 -1
- package/dist/preview/.next/server/app/page.js.nft.json +1 -1
- package/dist/preview/.next/server/app/page_client-reference-manifest.js +1 -1
- package/dist/preview/.next/server/app/preview/[...slug]/page.js +12 -12
- package/dist/preview/.next/server/app/preview/[...slug]/page.js.nft.json +1 -1
- package/dist/preview/.next/server/app/preview/[...slug]/page_client-reference-manifest.js +1 -1
- package/dist/preview/.next/server/chunks/265.js +1 -0
- package/dist/preview/.next/server/pages/500.html +1 -1
- package/dist/preview/.next/server/server-reference-manifest.js +1 -1
- package/dist/preview/.next/server/server-reference-manifest.json +1 -1
- package/dist/preview/.next/static/chunks/{587-d27727c99e75067e.js → 587-2b8de61789f0fd1b.js} +1 -1
- package/dist/preview/.next/static/chunks/app/layout-a3d4e7b4de277118.js +1 -0
- package/dist/preview/.next/static/chunks/app/preview/[...slug]/page-cab7e5e69e3b91e2.js +1 -0
- package/dist/preview/.next/trace +27 -27
- package/package.json +1 -1
- package/src/commands/testing/out/magic-links/aws-verify-email.html +164 -0
- package/src/commands/testing/out/magic-links/linear-login-code.html +89 -0
- package/src/commands/testing/out/magic-links/notion-magic-link.html +75 -0
- package/src/commands/testing/out/magic-links/plaid-verify-identity.html +78 -0
- package/src/commands/testing/out/magic-links/raycast-magic-link.html +90 -0
- package/src/commands/testing/out/magic-links/slack-confirm.html +239 -0
- package/src/commands/testing/out/newsletters/codepen-challengers.html +547 -0
- package/src/commands/testing/out/newsletters/google-play-policy-update.html +338 -0
- package/src/commands/testing/out/newsletters/stack-overflow-tips.html +230 -0
- package/src/commands/testing/out/notifications/github-access-token.html +103 -0
- package/src/commands/testing/out/notifications/papermark-year-in-review.html +316 -0
- package/src/commands/testing/out/notifications/vercel-invite-user.html +170 -0
- package/src/commands/testing/out/notifications/yelp-recent-login.html +194 -0
- package/src/commands/testing/out/receipts/apple-receipt.html +676 -0
- package/src/commands/testing/out/receipts/nike-receipt.html +723 -0
- package/src/commands/testing/out/reset-password/dropbox-reset-password.html +97 -0
- package/src/commands/testing/out/reset-password/twitch-reset-password.html +219 -0
- package/src/commands/testing/out/reviews/airbnb-review.html +205 -0
- package/src/commands/testing/out/reviews/amazon-review.html +355 -0
- package/src/commands/testing/out/static/airbnb-logo.png +0 -0
- package/src/commands/testing/out/static/airbnb-review-user.jpg +0 -0
- package/src/commands/testing/out/static/amazon-book.jpg +0 -0
- package/src/commands/testing/out/static/amazon-facebook.jpg +0 -0
- package/src/commands/testing/out/static/amazon-instagram.jpg +0 -0
- package/src/commands/testing/out/static/amazon-logo.png +0 -0
- package/src/commands/testing/out/static/amazon-prime-logo.png +0 -0
- package/src/commands/testing/out/static/amazon-rating.gif +0 -0
- package/src/commands/testing/out/static/amazon-twitter.jpg +0 -0
- package/src/commands/testing/out/static/apple-card-icon.png +0 -0
- package/src/commands/testing/out/static/apple-hbo-max-icon.jpeg +0 -0
- package/src/commands/testing/out/static/apple-logo.png +0 -0
- package/src/commands/testing/out/static/apple-wallet.png +0 -0
- package/src/commands/testing/out/static/aws-logo.png +0 -0
- package/src/commands/testing/out/static/codepen-challengers.png +0 -0
- package/src/commands/testing/out/static/codepen-cube.png +0 -0
- package/src/commands/testing/out/static/codepen-pro.png +0 -0
- package/src/commands/testing/out/static/dropbox-logo.png +0 -0
- package/src/commands/testing/out/static/github.png +0 -0
- package/src/commands/testing/out/static/google-play-academy.png +0 -0
- package/src/commands/testing/out/static/google-play-chat.png +0 -0
- package/src/commands/testing/out/static/google-play-footer.png +0 -0
- package/src/commands/testing/out/static/google-play-header.png +0 -0
- package/src/commands/testing/out/static/google-play-icon.png +0 -0
- package/src/commands/testing/out/static/google-play-logo.png +0 -0
- package/src/commands/testing/out/static/google-play-pl.png +0 -0
- package/src/commands/testing/out/static/google-play.png +0 -0
- package/src/commands/testing/out/static/koala-logo.png +0 -0
- package/src/commands/testing/out/static/linear-logo.png +0 -0
- package/src/commands/testing/out/static/netlify-logo.png +0 -0
- package/src/commands/testing/out/static/nike-logo.png +0 -0
- package/src/commands/testing/out/static/nike-phone.png +0 -0
- package/src/commands/testing/out/static/nike-product.png +0 -0
- package/src/commands/testing/out/static/nike-recomendation-1.png +0 -0
- package/src/commands/testing/out/static/nike-recomendation-2.png +0 -0
- package/src/commands/testing/out/static/nike-recomendation-3.png +0 -0
- package/src/commands/testing/out/static/nike-recomendation-4.png +0 -0
- package/src/commands/testing/out/static/notion-logo.png +0 -0
- package/src/commands/testing/out/static/plaid-logo.png +0 -0
- package/src/commands/testing/out/static/raycast-bg.png +0 -0
- package/src/commands/testing/out/static/raycast-logo.png +0 -0
- package/src/commands/testing/out/static/slack-facebook.png +0 -0
- package/src/commands/testing/out/static/slack-linkedin.png +0 -0
- package/src/commands/testing/out/static/slack-logo.png +0 -0
- package/src/commands/testing/out/static/slack-twitter.png +0 -0
- package/src/commands/testing/out/static/stack-overflow-header.png +0 -0
- package/src/commands/testing/out/static/stack-overflow-logo-sm.png +0 -0
- package/src/commands/testing/out/static/stack-overflow-logo.png +0 -0
- package/src/commands/testing/out/static/stripe-logo.png +0 -0
- package/src/commands/testing/out/static/twitch-icon-facebook.png +0 -0
- package/src/commands/testing/out/static/twitch-icon-twitter.png +0 -0
- package/src/commands/testing/out/static/twitch-logo.png +0 -0
- package/src/commands/testing/out/static/vercel-arrow.png +0 -0
- package/src/commands/testing/out/static/vercel-logo.png +0 -0
- package/src/commands/testing/out/static/vercel-team.png +0 -0
- package/src/commands/testing/out/static/vercel-user.png +0 -0
- package/src/commands/testing/out/static/yelp-footer.png +0 -0
- package/src/commands/testing/out/static/yelp-header.png +0 -0
- package/src/commands/testing/out/static/yelp-logo.png +0 -0
- package/src/commands/testing/out/welcome/koala-welcome.html +89 -0
- package/src/commands/testing/out/welcome/netlify-welcome.html +198 -0
- package/src/commands/testing/out/welcome/stripe-welcome.html +152 -0
- package/dist/preview/.next/server/chunks/442.js +0 -1
- package/dist/preview/.next/static/chunks/app/layout-f9b38ee711366227.js +0 -1
- package/dist/preview/.next/static/chunks/app/preview/[...slug]/page-04482cd4439de72f.js +0 -1
- /package/dist/preview/.next/static/{SsVKC3PTN7PJbKsZaiN3_ → t22IN7aANTezJAJOfFnv-}/_buildManifest.js +0 -0
- /package/dist/preview/.next/static/{SsVKC3PTN7PJbKsZaiN3_ → t22IN7aANTezJAJOfFnv-}/_ssgManifest.js +0 -0
|
@@ -0,0 +1,547 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
+
<html dir="ltr" lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="preload" as="image" href="/static/codepen-challengers.png" />
|
|
5
|
+
<link rel="preload" as="image" href="/static/codepen-cube.png" />
|
|
6
|
+
<link rel="preload" as="image" href="/static/codepen-pro.png" />
|
|
7
|
+
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
|
|
8
|
+
<meta name="x-apple-disable-message-reformatting" />
|
|
9
|
+
<!--$-->
|
|
10
|
+
</head>
|
|
11
|
+
<body
|
|
12
|
+
style='font-family:"Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;background-color:#505050;margin:0'>
|
|
13
|
+
<div
|
|
14
|
+
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">
|
|
15
|
+
#CodePenChallenge: Cubes
|
|
16
|
+
<div>
|
|
17
|
+
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
<table
|
|
21
|
+
align="center"
|
|
22
|
+
width="100%"
|
|
23
|
+
border="0"
|
|
24
|
+
cellpadding="0"
|
|
25
|
+
cellspacing="0"
|
|
26
|
+
role="presentation"
|
|
27
|
+
style="width:100%;background-color:#191919;margin:0 auto;padding-bottom:30px;z-index:999">
|
|
28
|
+
<tbody>
|
|
29
|
+
<tr>
|
|
30
|
+
<td>
|
|
31
|
+
<img
|
|
32
|
+
alt="codepen"
|
|
33
|
+
src="/static/codepen-challengers.png"
|
|
34
|
+
style="display:block;outline:none;border:none;text-decoration:none;margin:auto;max-width:100%"
|
|
35
|
+
width="600" />
|
|
36
|
+
</td>
|
|
37
|
+
</tr>
|
|
38
|
+
</tbody>
|
|
39
|
+
</table>
|
|
40
|
+
<table
|
|
41
|
+
align="center"
|
|
42
|
+
width="100%"
|
|
43
|
+
border="0"
|
|
44
|
+
cellpadding="0"
|
|
45
|
+
cellspacing="0"
|
|
46
|
+
role="presentation"
|
|
47
|
+
style="max-width:100%;margin:0 auto;width:648px;position:relative">
|
|
48
|
+
<tbody>
|
|
49
|
+
<tr style="width:100%">
|
|
50
|
+
<td>
|
|
51
|
+
<p
|
|
52
|
+
style="font-size:13px;line-height:24px;background-color:#505050;text-align:center;padding:10px 0;position:absolute;width:648px;max-width:100%;top:-28px;margin:0 0 16px 0;margin-top:16px;margin-right:0;margin-bottom:16px;margin-left:0">
|
|
53
|
+
<a
|
|
54
|
+
style="color:#fff;text-decoration-line:none;cursor:pointer"
|
|
55
|
+
target="_blank"
|
|
56
|
+
>View this Challenge on CodePen</a
|
|
57
|
+
>
|
|
58
|
+
</p>
|
|
59
|
+
<h1
|
|
60
|
+
style="background:#f0d361;padding:30px;color:#191919;font-weight:400;margin-bottom:0">
|
|
61
|
+
<strong>This week:</strong> #CodePenChallenge:<!-- -->
|
|
62
|
+
<p
|
|
63
|
+
style="font-size:32px;line-height:24px;margin:4px 0 0 0;margin-top:16px;margin-right:0;margin-bottom:16px;margin-left:0">
|
|
64
|
+
Cubes
|
|
65
|
+
</p>
|
|
66
|
+
</h1>
|
|
67
|
+
<table
|
|
68
|
+
align="center"
|
|
69
|
+
width="100%"
|
|
70
|
+
border="0"
|
|
71
|
+
cellpadding="0"
|
|
72
|
+
cellspacing="0"
|
|
73
|
+
role="presentation"
|
|
74
|
+
style="margin:0;background:#fff;padding:0 24px">
|
|
75
|
+
<tbody>
|
|
76
|
+
<tr>
|
|
77
|
+
<td>
|
|
78
|
+
<p
|
|
79
|
+
style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">
|
|
80
|
+
The Shape challenge continues!
|
|
81
|
+
</p>
|
|
82
|
+
<p
|
|
83
|
+
style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">
|
|
84
|
+
Last week, we kicked things off with round shapes. We
|
|
85
|
+
"rounded" up the Pens from week one in our<!-- -->
|
|
86
|
+
<a
|
|
87
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
88
|
+
target="_blank"
|
|
89
|
+
>#CodePenChallenge: Round</a
|
|
90
|
+
>
|
|
91
|
+
collection.
|
|
92
|
+
</p>
|
|
93
|
+
<p
|
|
94
|
+
style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">
|
|
95
|
+
This week, we move on to cubes 🧊
|
|
96
|
+
</p>
|
|
97
|
+
<p
|
|
98
|
+
style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">
|
|
99
|
+
Creating cubes in the browser is all about mastery of
|
|
100
|
+
illusion. Take control of perspective and shadows and you
|
|
101
|
+
can make the magic of 3D on a flat screen 🧙
|
|
102
|
+
</p>
|
|
103
|
+
<p
|
|
104
|
+
style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">
|
|
105
|
+
This week is a fun chance to work on your CSS
|
|
106
|
+
shape-building skills, or dig into a 3D JavaScript library
|
|
107
|
+
like Three.js.
|
|
108
|
+
</p>
|
|
109
|
+
<p
|
|
110
|
+
style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">
|
|
111
|
+
This week's starter template features an ice cube
|
|
112
|
+
emoji to help inspire a "cool" idea for your
|
|
113
|
+
Pen. As always, the template is just as jumping off point.
|
|
114
|
+
Feel free to incorporate the 🧊 in your creation, add more
|
|
115
|
+
elements, or freeze it out completely and start over from
|
|
116
|
+
scratch!
|
|
117
|
+
</p>
|
|
118
|
+
<p
|
|
119
|
+
style="font-size:16px;line-height:24px;border:6px solid #ebd473;padding:20px;margin:0 0 40px 0;margin-top:16px;margin-right:0;margin-bottom:16px;margin-left:0">
|
|
120
|
+
💪 <strong>Your Challenge:</strong>
|
|
121
|
+
<a
|
|
122
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
123
|
+
target="_blank"
|
|
124
|
+
>create a Pen that includes cube shapes.</a
|
|
125
|
+
>
|
|
126
|
+
</p>
|
|
127
|
+
<img
|
|
128
|
+
alt="codepen"
|
|
129
|
+
src="/static/codepen-cube.png"
|
|
130
|
+
style="display:block;outline:none;border:none;text-decoration:none;max-width:100%"
|
|
131
|
+
width="600" />
|
|
132
|
+
<table
|
|
133
|
+
align="center"
|
|
134
|
+
width="100%"
|
|
135
|
+
border="0"
|
|
136
|
+
cellpadding="0"
|
|
137
|
+
cellspacing="0"
|
|
138
|
+
role="presentation"
|
|
139
|
+
style="margin-top:40px;margin-bottom:24px;text-align:center;background:#0b112a;color:#fff;padding:35px 20px 30px 20px;border:6px solid #2138c6">
|
|
140
|
+
<tbody>
|
|
141
|
+
<tr>
|
|
142
|
+
<td>
|
|
143
|
+
<img
|
|
144
|
+
alt="codepen"
|
|
145
|
+
src="/static/codepen-pro.png"
|
|
146
|
+
style="display:block;outline:none;border:none;text-decoration:none;margin:0 auto 30px auto"
|
|
147
|
+
width="250" />
|
|
148
|
+
<p
|
|
149
|
+
style="font-size:14px;line-height:24px;margin-top:16px;margin-bottom:16px">
|
|
150
|
+
CodePen PRO combines a bunch of features that can
|
|
151
|
+
help any front-end designer or developer at any
|
|
152
|
+
experience level.
|
|
153
|
+
</p>
|
|
154
|
+
<a
|
|
155
|
+
style="line-height:18px;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background:#2138c6;color:#fff;border:0;font-size:15px;cursor:pointer;border-radius:4px;padding:12px 12px 12px 12px"
|
|
156
|
+
target="_blank"
|
|
157
|
+
><span
|
|
158
|
+
><!--[if mso]><i style="mso-font-width:300%;mso-text-raise:18" hidden>  </i><![endif]--></span
|
|
159
|
+
><span
|
|
160
|
+
style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px"
|
|
161
|
+
><strong>Learn More</strong></span
|
|
162
|
+
><span
|
|
163
|
+
><!--[if mso]><i style="mso-font-width:300%" hidden>  ​</i><![endif]--></span
|
|
164
|
+
></a
|
|
165
|
+
>
|
|
166
|
+
</td>
|
|
167
|
+
</tr>
|
|
168
|
+
</tbody>
|
|
169
|
+
</table>
|
|
170
|
+
</td>
|
|
171
|
+
</tr>
|
|
172
|
+
</tbody>
|
|
173
|
+
</table>
|
|
174
|
+
<p
|
|
175
|
+
style="font-size:18px;line-height:1.5;background:#f5d247;padding:30px;margin-top:16px;margin-bottom:16px">
|
|
176
|
+
<strong>To participate:</strong>
|
|
177
|
+
<a
|
|
178
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
179
|
+
target="_blank"
|
|
180
|
+
>Create a Pen →</a
|
|
181
|
+
>
|
|
182
|
+
and tag it<!-- -->
|
|
183
|
+
<a
|
|
184
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
185
|
+
target="_blank"
|
|
186
|
+
><strong>codepenchallenge</strong></a
|
|
187
|
+
>
|
|
188
|
+
<!-- -->and<a
|
|
189
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
190
|
+
target="_blank">
|
|
191
|
+
<strong>cpc-cubes</strong></a
|
|
192
|
+
>. We'll be watching and gathering the Pens into a
|
|
193
|
+
Collection, and sharing on
|
|
194
|
+
<a
|
|
195
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
196
|
+
target="_blank"
|
|
197
|
+
>Twitter</a
|
|
198
|
+
>
|
|
199
|
+
and<!-- -->
|
|
200
|
+
<a
|
|
201
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
202
|
+
target="_blank"
|
|
203
|
+
>Instagram</a
|
|
204
|
+
>
|
|
205
|
+
(Use the #CodePenChallenge tag on Twitter and Instagram as well).
|
|
206
|
+
</p>
|
|
207
|
+
<table
|
|
208
|
+
align="center"
|
|
209
|
+
width="100%"
|
|
210
|
+
border="0"
|
|
211
|
+
cellpadding="0"
|
|
212
|
+
cellspacing="0"
|
|
213
|
+
role="presentation"
|
|
214
|
+
style="margin:0;background:#fff;padding:0 24px">
|
|
215
|
+
<tbody>
|
|
216
|
+
<tr>
|
|
217
|
+
<td>
|
|
218
|
+
<table
|
|
219
|
+
align="center"
|
|
220
|
+
width="100%"
|
|
221
|
+
border="0"
|
|
222
|
+
cellpadding="0"
|
|
223
|
+
cellspacing="0"
|
|
224
|
+
role="presentation">
|
|
225
|
+
<tbody style="width:100%">
|
|
226
|
+
<tr style="width:100%">
|
|
227
|
+
<td
|
|
228
|
+
data-id="__react-email-column"
|
|
229
|
+
style="width:50%;padding-right:10px">
|
|
230
|
+
<p
|
|
231
|
+
style="font-size:18px;line-height:1.1;font-weight:900;margin-top:16px;margin-bottom:16px">
|
|
232
|
+
IDEAS!
|
|
233
|
+
</p>
|
|
234
|
+
<table
|
|
235
|
+
align="center"
|
|
236
|
+
width="100%"
|
|
237
|
+
border="0"
|
|
238
|
+
cellpadding="0"
|
|
239
|
+
cellspacing="0"
|
|
240
|
+
role="presentation"
|
|
241
|
+
style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#fff4c8;border:1px solid #f4d247">
|
|
242
|
+
<tbody>
|
|
243
|
+
<tr>
|
|
244
|
+
<td>
|
|
245
|
+
🌟
|
|
246
|
+
<p
|
|
247
|
+
style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">
|
|
248
|
+
This week we move from 2 dimensions to
|
|
249
|
+
three! Maybe you could exercise your
|
|
250
|
+
<a
|
|
251
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
252
|
+
target="_blank"
|
|
253
|
+
>perspective</a
|
|
254
|
+
>
|
|
255
|
+
in CSS to create a 3D cube. Or, you can
|
|
256
|
+
try out creating 3D shapes in JavaScript,
|
|
257
|
+
using
|
|
258
|
+
<a
|
|
259
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
260
|
+
target="_blank"
|
|
261
|
+
>WebGL</a
|
|
262
|
+
>
|
|
263
|
+
or building a
|
|
264
|
+
<a
|
|
265
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
266
|
+
target="_blank"
|
|
267
|
+
>Three.js scene</a
|
|
268
|
+
>.
|
|
269
|
+
</p>
|
|
270
|
+
</td>
|
|
271
|
+
</tr>
|
|
272
|
+
</tbody>
|
|
273
|
+
</table>
|
|
274
|
+
<table
|
|
275
|
+
align="center"
|
|
276
|
+
width="100%"
|
|
277
|
+
border="0"
|
|
278
|
+
cellpadding="0"
|
|
279
|
+
cellspacing="0"
|
|
280
|
+
role="presentation"
|
|
281
|
+
style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#fff4c8;border:1px solid #f4d247">
|
|
282
|
+
<tbody>
|
|
283
|
+
<tr>
|
|
284
|
+
<td>
|
|
285
|
+
🌟
|
|
286
|
+
<p
|
|
287
|
+
style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">
|
|
288
|
+
There's more to cubes than just six
|
|
289
|
+
square sides. There are variations on the
|
|
290
|
+
cube that could be fun to play with this
|
|
291
|
+
week:
|
|
292
|
+
<a
|
|
293
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
294
|
+
target="_blank"
|
|
295
|
+
>cuboid shapes</a
|
|
296
|
+
>
|
|
297
|
+
are hexahedrons with faces that
|
|
298
|
+
aren't always squares. And if you
|
|
299
|
+
want to really push the boundaries of
|
|
300
|
+
shape, consider the 4 dimensional
|
|
301
|
+
<a
|
|
302
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
303
|
+
target="_blank"
|
|
304
|
+
>tesseract!</a
|
|
305
|
+
>
|
|
306
|
+
</p>
|
|
307
|
+
</td>
|
|
308
|
+
</tr>
|
|
309
|
+
</tbody>
|
|
310
|
+
</table>
|
|
311
|
+
<table
|
|
312
|
+
align="center"
|
|
313
|
+
width="100%"
|
|
314
|
+
border="0"
|
|
315
|
+
cellpadding="0"
|
|
316
|
+
cellspacing="0"
|
|
317
|
+
role="presentation"
|
|
318
|
+
style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#fff4c8;border:1px solid #f4d247">
|
|
319
|
+
<tbody>
|
|
320
|
+
<tr>
|
|
321
|
+
<td>
|
|
322
|
+
🌟
|
|
323
|
+
<p
|
|
324
|
+
style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">
|
|
325
|
+
Here's a mind-bending idea that can
|
|
326
|
+
combine the round shapes from week one
|
|
327
|
+
with this week's cube theme:<!-- -->
|
|
328
|
+
<a
|
|
329
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
330
|
+
target="_blank"
|
|
331
|
+
>Spherical Cubes</a
|
|
332
|
+
>
|
|
333
|
+
😳 Solving longstanding mathematical
|
|
334
|
+
mysteries is probably outside the scope of
|
|
335
|
+
a CodePen challenge, but you could use
|
|
336
|
+
front-end tools to explore fitting spheres
|
|
337
|
+
into cubes, or vice-versa.
|
|
338
|
+
</p>
|
|
339
|
+
</td>
|
|
340
|
+
</tr>
|
|
341
|
+
</tbody>
|
|
342
|
+
</table>
|
|
343
|
+
</td>
|
|
344
|
+
<td
|
|
345
|
+
data-id="__react-email-column"
|
|
346
|
+
style="width:50%;padding-left:10px">
|
|
347
|
+
<p
|
|
348
|
+
style="font-size:18px;line-height:1.1;font-weight:900;margin-top:-40px;margin-bottom:16px">
|
|
349
|
+
RESOURCES!
|
|
350
|
+
</p>
|
|
351
|
+
<table
|
|
352
|
+
align="center"
|
|
353
|
+
width="100%"
|
|
354
|
+
border="0"
|
|
355
|
+
cellpadding="0"
|
|
356
|
+
cellspacing="0"
|
|
357
|
+
role="presentation"
|
|
358
|
+
style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#d9f6ff;border:1px solid #92bfd0">
|
|
359
|
+
<tbody>
|
|
360
|
+
<tr>
|
|
361
|
+
<td>
|
|
362
|
+
📖
|
|
363
|
+
<p
|
|
364
|
+
style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">
|
|
365
|
+
Learn all about<!-- -->
|
|
366
|
+
<a
|
|
367
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
368
|
+
target="_blank"
|
|
369
|
+
>How CSS Perspective Works</a
|
|
370
|
+
>
|
|
371
|
+
and how to build a 3D CSS cube from
|
|
372
|
+
scratch in Amit Sheen's in-depth
|
|
373
|
+
tutorial for CSS-Tricks. Or, check out
|
|
374
|
+
stunning examples of WebGL cubes from
|
|
375
|
+
Matthias Hurrle:<!-- -->
|
|
376
|
+
<a
|
|
377
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
378
|
+
target="_blank"
|
|
379
|
+
>Just Ice</a
|
|
380
|
+
>
|
|
381
|
+
and<!-- -->
|
|
382
|
+
<a
|
|
383
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
384
|
+
target="_blank"
|
|
385
|
+
>Posing</a
|
|
386
|
+
>.
|
|
387
|
+
</p>
|
|
388
|
+
</td>
|
|
389
|
+
</tr>
|
|
390
|
+
</tbody>
|
|
391
|
+
</table>
|
|
392
|
+
<table
|
|
393
|
+
align="center"
|
|
394
|
+
width="100%"
|
|
395
|
+
border="0"
|
|
396
|
+
cellpadding="0"
|
|
397
|
+
cellspacing="0"
|
|
398
|
+
role="presentation"
|
|
399
|
+
style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#d9f6ff;border:1px solid #92bfd0">
|
|
400
|
+
<tbody>
|
|
401
|
+
<tr>
|
|
402
|
+
<td>
|
|
403
|
+
📖
|
|
404
|
+
<p
|
|
405
|
+
style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">
|
|
406
|
+
Want to go beyond the square cube? Draw
|
|
407
|
+
inspiration from EntropyReversed's<!-- -->
|
|
408
|
+
<a
|
|
409
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
410
|
+
target="_blank"
|
|
411
|
+
>Pulsating Tesseract</a
|
|
412
|
+
>, Josetxu's<!-- -->
|
|
413
|
+
<a
|
|
414
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
415
|
+
target="_blank"
|
|
416
|
+
>Rainbow Cuboid Loader</a
|
|
417
|
+
>, or Ana Tudor's<!-- -->
|
|
418
|
+
<a
|
|
419
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
420
|
+
target="_blank"
|
|
421
|
+
>Pure CSS cuboid jellyfish</a
|
|
422
|
+
>.
|
|
423
|
+
</p>
|
|
424
|
+
</td>
|
|
425
|
+
</tr>
|
|
426
|
+
</tbody>
|
|
427
|
+
</table>
|
|
428
|
+
<table
|
|
429
|
+
align="center"
|
|
430
|
+
width="100%"
|
|
431
|
+
border="0"
|
|
432
|
+
cellpadding="0"
|
|
433
|
+
cellspacing="0"
|
|
434
|
+
role="presentation"
|
|
435
|
+
style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#d9f6ff;border:1px solid #92bfd0">
|
|
436
|
+
<tbody>
|
|
437
|
+
<tr>
|
|
438
|
+
<td>
|
|
439
|
+
📖
|
|
440
|
+
<p
|
|
441
|
+
style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">
|
|
442
|
+
Did that spherical cubes concept pique
|
|
443
|
+
your interest? Explore Ryan
|
|
444
|
+
Mulligan's
|
|
445
|
+
<a
|
|
446
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
447
|
+
target="_blank"
|
|
448
|
+
>Cube Sphere</a
|
|
449
|
+
>, Munir Safi's<!-- -->
|
|
450
|
+
<a
|
|
451
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
452
|
+
target="_blank"
|
|
453
|
+
>3D Sphere to Cube Animation With
|
|
454
|
+
Virtual Trackball</a
|
|
455
|
+
>
|
|
456
|
+
<!-- -->and Ana Tudor's<!-- -->
|
|
457
|
+
<a
|
|
458
|
+
style="color:#15c;text-decoration-line:none;cursor:pointer"
|
|
459
|
+
target="_blank"
|
|
460
|
+
>Infinitely unpack prism</a
|
|
461
|
+
>
|
|
462
|
+
for more mindbending cube concepts that
|
|
463
|
+
test the boundaries of how shapes interact
|
|
464
|
+
with each other.
|
|
465
|
+
</p>
|
|
466
|
+
</td>
|
|
467
|
+
</tr>
|
|
468
|
+
</tbody>
|
|
469
|
+
</table>
|
|
470
|
+
</td>
|
|
471
|
+
</tr>
|
|
472
|
+
</tbody>
|
|
473
|
+
</table>
|
|
474
|
+
</td>
|
|
475
|
+
</tr>
|
|
476
|
+
</tbody>
|
|
477
|
+
</table>
|
|
478
|
+
<table
|
|
479
|
+
align="center"
|
|
480
|
+
width="100%"
|
|
481
|
+
border="0"
|
|
482
|
+
cellpadding="0"
|
|
483
|
+
cellspacing="0"
|
|
484
|
+
role="presentation"
|
|
485
|
+
style="margin:40px 0 120px 0;text-align:center">
|
|
486
|
+
<tbody>
|
|
487
|
+
<tr>
|
|
488
|
+
<td>
|
|
489
|
+
<a
|
|
490
|
+
style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;font-size:26px;color:#15c;background:#222;border-radius:4px;font-weight:bold;cursor:pointer;padding:15px 30px 15px 30px"
|
|
491
|
+
target="_blank"
|
|
492
|
+
><span
|
|
493
|
+
><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:22.5" hidden>   </i><![endif]--></span
|
|
494
|
+
><span
|
|
495
|
+
style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:11.25px"
|
|
496
|
+
>Go to Challenge Page</span
|
|
497
|
+
><span
|
|
498
|
+
><!--[if mso]><i style="mso-font-width:500%" hidden>   ​</i><![endif]--></span
|
|
499
|
+
></a
|
|
500
|
+
>
|
|
501
|
+
</td>
|
|
502
|
+
</tr>
|
|
503
|
+
</tbody>
|
|
504
|
+
</table>
|
|
505
|
+
<table
|
|
506
|
+
align="center"
|
|
507
|
+
width="100%"
|
|
508
|
+
border="0"
|
|
509
|
+
cellpadding="0"
|
|
510
|
+
cellspacing="0"
|
|
511
|
+
role="presentation"
|
|
512
|
+
style="background:#fff;color:#505050;padding:0 24px;margin-bottom:48px">
|
|
513
|
+
<tbody>
|
|
514
|
+
<tr>
|
|
515
|
+
<td>
|
|
516
|
+
<p
|
|
517
|
+
style="font-size:13px;line-height:24px;margin-top:16px;margin-bottom:16px">
|
|
518
|
+
You can adjust your<!-- -->
|
|
519
|
+
<a
|
|
520
|
+
style="color:#505050;text-decoration-line:none;text-decoration:underline;cursor:pointer"
|
|
521
|
+
target="_blank"
|
|
522
|
+
>email preferences</a
|
|
523
|
+
>
|
|
524
|
+
any time, or<!-- -->
|
|
525
|
+
<a
|
|
526
|
+
style="color:#505050;text-decoration-line:none;text-decoration:underline;cursor:pointer"
|
|
527
|
+
target="_blank"
|
|
528
|
+
>instantly opt out</a
|
|
529
|
+
>
|
|
530
|
+
of emails of this kind. Need help with anything? Hit up<!-- -->
|
|
531
|
+
<a
|
|
532
|
+
style="color:#505050;text-decoration-line:none;text-decoration:underline;cursor:pointer"
|
|
533
|
+
target="_blank"
|
|
534
|
+
>support</a
|
|
535
|
+
>.
|
|
536
|
+
</p>
|
|
537
|
+
</td>
|
|
538
|
+
</tr>
|
|
539
|
+
</tbody>
|
|
540
|
+
</table>
|
|
541
|
+
</td>
|
|
542
|
+
</tr>
|
|
543
|
+
</tbody>
|
|
544
|
+
</table>
|
|
545
|
+
<!--/$-->
|
|
546
|
+
</body>
|
|
547
|
+
</html>
|