|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | +<meta charset="utf-8"> |
| 5 | +<meta name="viewport" content="width=1280"> |
| 6 | +<title>create-software-factory — Social Card</title> |
| 7 | +<link rel="preconnect" href="https://fonts.googleapis.com"> |
| 8 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 9 | +<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&family=IBM+Plex+Sans:wght@300;400;500&display=swap" rel="stylesheet"> |
| 10 | +<style> |
| 11 | + * { margin: 0; padding: 0; box-sizing: border-box; } |
| 12 | + body { |
| 13 | + width: 1280px; |
| 14 | + height: 640px; |
| 15 | + overflow: hidden; |
| 16 | + font-family: 'IBM Plex Sans', -apple-system, sans-serif; |
| 17 | + background: hsl(0 0% 95.3%); |
| 18 | + position: relative; |
| 19 | + } |
| 20 | + |
| 21 | + /* Ambient glow — top-right */ |
| 22 | + .ambient { |
| 23 | + position: absolute; |
| 24 | + top: -80px; |
| 25 | + right: -80px; |
| 26 | + width: 600px; |
| 27 | + height: 600px; |
| 28 | + background: radial-gradient( |
| 29 | + circle at center, |
| 30 | + rgba(120, 100, 255, 0.12) 0%, |
| 31 | + rgba(180, 140, 255, 0.06) 40%, |
| 32 | + transparent 70% |
| 33 | + ); |
| 34 | + filter: blur(40px); |
| 35 | + pointer-events: none; |
| 36 | + } |
| 37 | + |
| 38 | + .content { |
| 39 | + position: relative; |
| 40 | + z-index: 1; |
| 41 | + width: 100%; |
| 42 | + height: 100%; |
| 43 | + display: flex; |
| 44 | + flex-direction: column; |
| 45 | + justify-content: center; |
| 46 | + padding: 0 100px; |
| 47 | + } |
| 48 | + |
| 49 | + .label { |
| 50 | + font-family: 'IBM Plex Mono', monospace; |
| 51 | + font-size: 13px; |
| 52 | + font-weight: 400; |
| 53 | + text-transform: uppercase; |
| 54 | + letter-spacing: 0.2em; |
| 55 | + color: rgba(0, 0, 0, 0.3); |
| 56 | + margin-bottom: 24px; |
| 57 | + } |
| 58 | + |
| 59 | + h1 { |
| 60 | + font-size: 72px; |
| 61 | + font-weight: 300; |
| 62 | + letter-spacing: -2px; |
| 63 | + line-height: 1.05; |
| 64 | + color: rgba(0, 0, 0, 0.88); |
| 65 | + margin-bottom: 20px; |
| 66 | + } |
| 67 | + |
| 68 | + .tagline { |
| 69 | + font-size: 24px; |
| 70 | + font-weight: 400; |
| 71 | + color: rgba(0, 0, 0, 0.4); |
| 72 | + line-height: 1.5; |
| 73 | + margin-bottom: 40px; |
| 74 | + } |
| 75 | + |
| 76 | + .pill { |
| 77 | + display: inline-block; |
| 78 | + padding: 12px 28px; |
| 79 | + background: rgba(0, 0, 0, 0.04); |
| 80 | + border: 1px solid rgba(0, 0, 0, 0.06); |
| 81 | + border-radius: 8px; |
| 82 | + font-family: 'IBM Plex Mono', monospace; |
| 83 | + font-size: 17px; |
| 84 | + font-weight: 400; |
| 85 | + color: rgba(0, 0, 0, 0.5); |
| 86 | + letter-spacing: 0.02em; |
| 87 | + } |
| 88 | + |
| 89 | + .footer { |
| 90 | + position: absolute; |
| 91 | + bottom: 0; |
| 92 | + left: 0; |
| 93 | + right: 0; |
| 94 | + padding: 0 100px 36px; |
| 95 | + display: flex; |
| 96 | + align-items: center; |
| 97 | + justify-content: space-between; |
| 98 | + border-top: 1px solid rgba(0, 0, 0, 0.06); |
| 99 | + padding-top: 20px; |
| 100 | + margin: 0 100px; |
| 101 | + padding-left: 0; |
| 102 | + padding-right: 0; |
| 103 | + } |
| 104 | + |
| 105 | + .footer-logo { |
| 106 | + opacity: 0.3; |
| 107 | + height: 20px; |
| 108 | + } |
| 109 | + |
| 110 | + .footer-url { |
| 111 | + font-family: 'IBM Plex Mono', monospace; |
| 112 | + font-size: 13px; |
| 113 | + color: rgba(0, 0, 0, 0.3); |
| 114 | + letter-spacing: 0.02em; |
| 115 | + } |
| 116 | +</style> |
| 117 | +</head> |
| 118 | +<body> |
| 119 | + <div class="ambient"></div> |
| 120 | + <div class="content"> |
| 121 | + <p class="label">Continue</p> |
| 122 | + <h1>create-software-factory</h1> |
| 123 | + <p class="tagline">Scaffold AI checks and agents for any repo</p> |
| 124 | + <div> |
| 125 | + <code class="pill">npx create-software-factory</code> |
| 126 | + </div> |
| 127 | + </div> |
| 128 | + <div class="footer"> |
| 129 | + <svg class="footer-logo" viewBox="27.2 27.2 52.4 48.7" xmlns="http://www.w3.org/2000/svg"> |
| 130 | + <path fill="currentColor" d="M68.6,34.7l-2.7,4.7l6.8,11.9c0.1,0.1,0.1,0.2,0.1,0.3s0,0.2-0.1,0.3l-6.8,11.9l2.7,4.7l9.7-16.9L68.6,34.7 |
| 131 | + L68.6,34.7z M64.9,38.8l2.7-4.7h-5.4l-2.7,4.7H64.9L64.9,38.8z M59.4,40l6.3,11h5.4l-6.3-11H59.4z M64.9,63.1l6.3-11h-5.4l-6.3,11 |
| 132 | + H64.9z M59.4,64.4l2.7,4.7h5.4l-2.7-4.7H59.4L59.4,64.4z M41.1,70.2c-0.1,0-0.2,0-0.3-0.1s-0.2-0.1-0.2-0.2L33.7,58h-5.4L38,74.9 |
| 133 | + h19.5l-2.7-4.7H41.1L41.1,70.2z M55.8,69.6l2.7,4.7l2.7-4.7l-2.7-4.7L55.8,69.6L55.8,69.6z M57.5,64.3H44.8L42.1,69h12.6L57.5,64.3z |
| 134 | + M43.8,63.7l-6.3-11l-2.7,4.7l6.3,11C41.1,68.4,43.8,63.7,43.8,63.7z M28.3,56.8h5.4l2.7-4.7H31C31,52.1,28.3,56.8,28.3,56.8z |
| 135 | + M40.5,33.3c0-0.1,0.1-0.2,0.2-0.2c0.1,0,0.2-0.1,0.3-0.1h13.7l2.7-4.7H38l-9.7,16.9h5.4L40.5,33.3L40.5,33.3z M36.4,51.1l-2.7-4.7 |
| 136 | + h-5.4l2.7,4.7C31,51.1,36.4,51.1,36.4,51.1z M41,34.8l-6.3,11l2.7,4.7l6.3-11L41,34.8z M54.8,34.2H42.1l2.7,4.7h12.7L54.8,34.2z |
| 137 | + M58.5,38.3l2.7-4.7l-2.7-4.7l-2.7,4.7L58.5,38.3z"/> |
| 138 | + </svg> |
| 139 | + <span class="footer-url">continue.dev</span> |
| 140 | + </div> |
| 141 | +</body> |
| 142 | +</html> |
0 commit comments