Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sample Blog Post</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <style> | |
| .prose { | |
| color: #1c1917; | |
| line-height: 1.75; | |
| } | |
| .prose h2 { | |
| color: #1c1917; | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| margin-top: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .prose h3 { | |
| color: #1c1917; | |
| font-weight: 600; | |
| font-size: 1.25rem; | |
| margin-top: 1.5rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .prose p { | |
| margin-bottom: 1.25rem; | |
| } | |
| .prose ul { | |
| list-style-type: disc; | |
| padding-left: 1.5rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| .prose ol { | |
| list-style-type: decimal; | |
| padding-left: 1.5rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| .prose a { | |
| color: #f97316; | |
| text-decoration: underline; | |
| } | |
| .prose a:hover { | |
| color: #ea580c; | |
| } | |
| .prose img { | |
| border-radius: 0.5rem; | |
| margin: 1.5rem auto; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .prose blockquote { | |
| border-left: 4px solid #f97316; | |
| padding-left: 1rem; | |
| font-style: italic; | |
| color: #57534e; | |
| margin: 1.5rem 0; | |
| } | |
| .content-card { | |
| background: white; | |
| border-radius: 0.75rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-stone-50 min-h-screen flex flex-col"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-12 flex-grow"> | |
| <article class="max-w-4xl mx-auto"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-primary-500 mb-6">Sample Blog Post Title</h1> | |
| <div class="h-1 w-24 bg-primary-500 mx-auto mb-6"></div> | |
| <div class="flex justify-center items-center gap-4 text-secondary-500"> | |
| <span class="flex items-center gap-2"> | |
| <i data-feather="calendar"></i> October 25, 2023 | |
| </span> | |
| <span class="flex items-center gap-2"> | |
| <i data-feather="clock"></i> 5 min read | |
| </span> | |
| </div> | |
| </header> | |
| <div class="content-card"> | |
| <div class="prose"> | |
| <p class="lead">This is the first paragraph that serves as an introduction to your blog post. It should capture the reader's attention and give them a reason to keep reading.</p> | |
| <h2>First Main Section</h2> | |
| <p>This is where your main content begins. You can add paragraphs, lists, images, and more to make your content engaging.</p> | |
| <img src="http://static.photos/technology/1024x576/42" alt="Technology illustration" class="w-full"> | |
| <h3>A Subsection</h3> | |
| <p>Break down your content into smaller sections for better readability. Here's a bullet list of key points:</p> | |
| <ul> | |
| <li>Professional design automatically applied</li> | |
| <li>Responsive layout works on all devices</li> | |
| <li>Visual elements enhance readability</li> | |
| <li>Easy to share and publish</li> | |
| </ul> | |
| <blockquote> | |
| "This is an important quote or highlight from your content that deserves special attention." | |
| </blockquote> | |
| <h2>Second Main Section</h2> | |
| <p>Continue with more content sections as needed. The design will remain consistent throughout your document.</p> | |
| <div class="grid md:grid-cols-2 gap-6 my-8"> | |
| <div class="bg-stone-100 p-6 rounded-lg"> | |
| <h3 class="font-bold text-lg mb-3">Key Benefit 1</h3> | |
| <p class="text-secondary-500">Description of this particular benefit that readers will appreciate.</p> | |
| </div> | |
| <div class="bg-stone-100 p-6 rounded-lg"> | |
| <h3 class="font-bold text-lg mb-3">Key Benefit 2</h3> | |
| <p class="text-secondary-500">Another important point that makes your content valuable.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |