Spaces:
Running
Running
I want you to build a web page that is a beautiful typography focused open letter. Think through if steve jobs wrote a letter to the world and that was the site. Just the letter what would it look like think though the UI and design. no header be creative and conform to the letter requirement. - Initial Deployment
a3f9d58
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>An Open Letter to the World</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Libre Baskerville', serif; | |
| background-color: #fafafa; | |
| color: #333; | |
| line-height: 1.8; | |
| } | |
| .letter-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .signature { | |
| font-family: 'Montserrat', sans-serif; | |
| font-weight: 300; | |
| letter-spacing: 2px; | |
| margin-top: 3rem; | |
| } | |
| .date { | |
| font-family: 'Montserrat', sans-serif; | |
| font-weight: 300; | |
| font-size: 0.9rem; | |
| letter-spacing: 1px; | |
| color: #666; | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .highlight { | |
| background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,215,0,0.3) 50%); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center bg-gray-50"> | |
| <div class="letter-container fade-in"> | |
| <div class="text-center mb-12"> | |
| <div class="date mb-2">October 5, 2023</div> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight">An Open Letter to the World</h1> | |
| <div class="w-24 h-1 bg-amber-500 mx-auto"></div> | |
| </div> | |
| <div class="space-y-6 text-lg"> | |
| <p class="first-letter:text-4xl first-letter:font-bold first-letter:text-amber-600 first-letter:mr-1 first-letter:float-left"> | |
| My fellow dreamers and doers, | |
| </p> | |
| <p> | |
| I've always believed that the people who are crazy enough to think they can change the world are the ones who do. | |
| <span class="highlight">This isn't just a platitude—it's the fundamental truth that has driven every meaningful innovation in human history.</span> | |
| </p> | |
| <p> | |
| When we started Apple in that garage, we weren't just building computers. We were crafting tools for human potential. | |
| The same spirit that guided us then—the relentless pursuit of beauty married to utility—is needed now more than ever. | |
| </p> | |
| <p> | |
| Today, our world stands at a crossroads. Technology has connected us in ways we couldn't have imagined, yet we've never felt more isolated. | |
| We have more information at our fingertips than any generation before us, yet wisdom seems in short supply. | |
| </p> | |
| <p class="italic"> | |
| This is not the future we dreamed of creating. But it's not too late to course-correct. | |
| </p> | |
| <p> | |
| I urge you to remember that technology alone is never the answer. It's only when technology serves our humanity—when it amplifies our creativity, | |
| deepens our connections, and expands our consciousness—that it becomes truly revolutionary. | |
| </p> | |
| <p> | |
| So I ask you: What will you create that matters? How will you leave your dent in the universe? | |
| The world doesn't need more noise—it needs your unique contribution, your unreasonable standards, your willingness to fail spectacularly in pursuit of something great. | |
| </p> | |
| <p> | |
| Stay hungry. Stay foolish. But most importantly, stay human. | |
| </p> | |
| <div class="signature text-right"> | |
| <div class="text-3xl mb-1">Steve Jobs</div> | |
| <div class="text-sm">Co-founder, Apple Inc.</div> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <button id="shareBtn" class="px-6 py-2 border border-gray-300 rounded-full text-sm hover:bg-gray-100 transition-all duration-300 flex items-center mx-auto"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> | |
| </svg> | |
| Share this letter | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple share functionality | |
| document.getElementById('shareBtn').addEventListener('click', function() { | |
| if (navigator.share) { | |
| navigator.share({ | |
| title: 'An Open Letter to the World', | |
| text: 'Read this inspiring open letter in the spirit of Steve Jobs', | |
| url: window.location.href | |
| }).catch(err => { | |
| console.log('Error sharing:', err); | |
| }); | |
| } else { | |
| // Fallback for browsers that don't support Web Share API | |
| alert('Share this letter by copying the URL from your browser.'); | |
| } | |
| }); | |
| // Add subtle interaction to paragraphs | |
| const paragraphs = document.querySelectorAll('.letter-container p'); | |
| paragraphs.forEach(p => { | |
| p.addEventListener('mouseover', function() { | |
| this.style.transform = 'translateX(4px)'; | |
| this.style.transition = 'transform 0.3s ease'; | |
| }); | |
| p.addEventListener('mouseout', function() { | |
| this.style.transform = 'translateX(0)'; | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=huntsyea/open-letter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |