<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta charset='UTF-8'/>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<style type='text/css'>
/* Base Styles */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--light-text: #777;
--bg-color: #f9f9f9;
--header-bg: #fff;
--footer-bg: #2c3e50;
--max-width: 1200px;
}
body {
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
margin: 0;
padding: 0;
color: var(--text-color);
background: var(--bg-color);
line-height: 1.6;
}
a {
color: var(--primary-color);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--secondary-color);
}
/* Layout */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 15px;
}
</style>
<b:skin><![CDATA[
/* Additional CSS can go here */
]]></b:skin>
</head>
<body>
<header>
<div class='container header-content'>
<div class='blog-info'>
<h1 class='blog-title'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1>
<p class='blog-description'><data:blog.description/></p>
</div>
</div>
</header>
<main class='container'>
<div class='main-wrapper'>
<div class='content-wrapper'>
<b:section id='main' showaddelement='yes'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<b:loop values='data:posts' var='post'>
<article class='post'>
<div class='post-header'>
<h2 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h2>
</div>
<div class='post-content'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<data:post.snippet/>
</b:if>
</div>
</article>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</main>
<footer>
<div class='container footer-content'>
<p>© <data:blog.title/> <script>document.write(new Date().getFullYear())</script></p>
</div>
</footer>
</body>
</html>