+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="/static/codepen-challengers.png"/><link rel="preload" as="image" href="/static/codepen-cube.png"/><link rel="preload" as="image" href="/static/codepen-pro.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><body style="font-family:"Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;background-color:#505050;margin:0"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">#CodePenChallenge: Cubes<div>Β βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»ΏΒ βββββο»Ώ</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="width:100%;background-color:#191919;margin:0 auto;padding-bottom:30px;z-index:999"><tbody><tr><td><img alt="codepen" src="/static/codepen-challengers.png" style="display:block;outline:none;border:none;text-decoration:none;margin:auto;max-width:100%" width="600"/></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:100%;margin:0 auto;width:648px;position:relative"><tbody><tr style="width:100%"><td><p 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:0;margin-right:0;margin-bottom:16px;margin-left:0"><a style="color:#fff;text-decoration-line:none;cursor:pointer" target="_blank">View this Challenge on CodePen</a></p><h1 style="background:#f0d361;padding:30px;color:#191919;font-weight:400;margin-bottom:0"><strong>This week:</strong> #CodePenChallenge:<!-- --> <p style="font-size:32px;line-height:24px;margin:4px 0 0 0;margin-top:4px;margin-right:0;margin-bottom:0;margin-left:0">Cubes</p></h1><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:0;background:#fff;padding:0 24px"><tbody><tr><td><p style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">The Shape challenge continues!</p><p style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">Last week, we kicked things off with round shapes. We "rounded" up the Pens from week one in our<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">#CodePenChallenge: Round</a> collection.</p><p style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">This week, we move on to cubes π§</p><p style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">Creating cubes in the browser is all about mastery of illusion. Take control of perspective and shadows and you can make the magic of 3D on a flat screen π§</p><p style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">This week is a fun chance to work on your CSS shape-building skills, or dig into a 3D JavaScript library like Three.js.</p><p style="font-size:16px;line-height:24px;margin-top:16px;margin-bottom:16px">This week's starter template features an ice cube emoji to help inspire a "cool" idea for your Pen. As always, the template is just as jumping off point. Feel free to incorporate the π§ in your creation, add more elements, or freeze it out completely and start over from scratch!</p><p style="font-size:16px;line-height:24px;border:6px solid #ebd473;padding:20px;margin:0 0 40px 0;margin-top:0;margin-right:0;margin-bottom:40px;margin-left:0">πͺ <strong>Your Challenge:</strong> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">create a Pen that includes cube shapes.</a></p><img alt="codepen" src="/static/codepen-cube.png" style="display:block;outline:none;border:none;text-decoration:none;max-width:100%" width="600"/><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:40px;margin-bottom:24px;text-align:center;background:#0b112a;color:#fff;padding:35px 20px 30px 20px;border:6px solid #2138c6"><tbody><tr><td><img alt="codepen" src="/static/codepen-pro.png" style="display:block;outline:none;border:none;text-decoration:none;margin:0 auto 30px auto" width="250"/><p style="font-size:14px;line-height:24px;margin-top:16px;margin-bottom:16px">CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level.</p><a 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;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px" target="_blank"><span><!--[if mso]><i style="mso-font-width:300%;mso-text-raise:18" hidden>  </i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px"><strong>Learn More</strong></span><span><!--[if mso]><i style="mso-font-width:300%" hidden>  ​</i><![endif]--></span></a></td></tr></tbody></table></td></tr></tbody></table><p style="font-size:18px;line-height:1.5;background:#f5d247;padding:30px;margin-top:16px;margin-bottom:16px"><strong>To participate:</strong> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Create a Pen β</a> and tag it<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank"><strong>codepenchallenge</strong></a> <!-- -->and<a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank"> <strong>cpc-cubes</strong></a>. We'll be watching and gathering the Pens into a Collection, and sharing on <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Twitter</a> and<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Instagram</a> (Use the #CodePenChallenge tag on Twitter and Instagram as well).</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:0;background:#fff;padding:0 24px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="width:50%;padding-right:10px"><p style="font-size:18px;line-height:1.1;font-weight:900;margin-top:16px;margin-bottom:16px">IDEAS!</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#fff4c8;border:1px solid #f4d247"><tbody><tr><td>π<p style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">This week we move from 2 dimensions to three! Maybe you could exercise your <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">perspective</a> in CSS to create a 3D cube. Or, you can try out creating 3D shapes in JavaScript, using <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">WebGL</a> or building a <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Three.js scene</a>.</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#fff4c8;border:1px solid #f4d247"><tbody><tr><td>π<p style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">There's more to cubes than just six square sides. There are variations on the cube that could be fun to play with this week: <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">cuboid shapes</a> are hexahedrons with faces that aren't always squares. And if you want to really push the boundaries of shape, consider the 4 dimensional <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">tesseract!</a></p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#fff4c8;border:1px solid #f4d247"><tbody><tr><td>π<p style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">Here's a mind-bending idea that can combine the round shapes from week one with this week's cube theme:<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Spherical Cubes</a> π³ Solving longstanding mathematical mysteries is probably outside the scope of a CodePen challenge, but you could use front-end tools to explore fitting spheres into cubes, or vice-versa.</p></td></tr></tbody></table></td><td data-id="__react-email-column" style="width:50%;padding-left:10px"><p style="font-size:18px;line-height:1.1;font-weight:900;margin-top:-40px;margin-bottom:16px">RESOURCES!</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#d9f6ff;border:1px solid #92bfd0"><tbody><tr><td>π<p style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">Learn all about<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">How CSS Perspective Works</a> and how to build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks. Or, check out stunning examples of WebGL cubes from Matthias Hurrle:<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Just Ice</a> and<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Posing</a>.</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#d9f6ff;border:1px solid #92bfd0"><tbody><tr><td>π<p style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">Want to go beyond the square cube? Draw inspiration from EntropyReversed's<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Pulsating Tesseract</a>, Josetxu's<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Rainbow Cuboid Loader</a>, or Ana Tudor's<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Pure CSS cuboid jellyfish</a>.</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:20px;margin:0 0 20px 0;border-radius:10px;font-size:36px;text-align:center;background:#d9f6ff;border:1px solid #92bfd0"><tbody><tr><td>π<p style="font-size:13px;line-height:24px;text-align:left;margin-top:16px;margin-bottom:16px">Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Cube Sphere</a>, Munir Safi's<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">3D Sphere to Cube Animation With Virtual Trackball</a> <!-- -->and Ana Tudor's<!-- --> <a style="color:#15c;text-decoration-line:none;cursor:pointer" target="_blank">Infinitely unpack prism</a> for more mindbending cube concepts that test the boundaries of how shapes interact with each other.</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:40px 0 120px 0;text-align:center"><tbody><tr><td><a 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;padding-top:15px;padding-right:30px;padding-bottom:15px;padding-left:30px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:22.5" hidden>   </i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:11.25px">Go to Challenge Page</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>   ​</i><![endif]--></span></a></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:#fff;color:#505050;padding:0 24px;margin-bottom:48px"><tbody><tr><td><p style="font-size:13px;line-height:24px;margin-top:16px;margin-bottom:16px">You can adjust your<!-- --> <a style="color:#505050;text-decoration-line:none;text-decoration:underline;cursor:pointer" target="_blank">email preferences</a> any time, or<!-- --> <a style="color:#505050;text-decoration-line:none;text-decoration:underline;cursor:pointer" target="_blank">instantly opt out</a> of emails of this kind. Need help with anything? Hit up<!-- --> <a style="color:#505050;text-decoration-line:none;text-decoration:underline;cursor:pointer" target="_blank">support</a>.</p></td></tr></tbody></table></td></tr></tbody></table><!--/$--></body></html>
0 commit comments