Spaces:
Running
Running
File size: 5,145 Bytes
0bf2e7e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | <!DOCTYPE html>
<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> |