Some styling and removing extra stuff
This commit is contained in:
@@ -83,6 +83,24 @@ const posts = (await getCollection('blog')).sort(
|
||||
font-size: 1.563em;
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: top;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.post-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.post-image img {
|
||||
max-height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -94,11 +112,17 @@ const posts = (await getCollection('blog')).sort(
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<a href={`/blog/${post.id}/`}>
|
||||
<img width={720} height={360} src={post.data.heroImage} alt="" />
|
||||
<h4 class="title">{post.data.title}</h4>
|
||||
<p class="date">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</p>
|
||||
<div class="post">
|
||||
<div class="post-image">
|
||||
<img width={200} height={200} src={post.data.heroImage} alt="" />
|
||||
</div>
|
||||
<div class="post-text">
|
||||
<p class="date">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</p>
|
||||
<h4 class="title">{post.data.title}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
|
||||
@@ -13,37 +13,199 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<h1>🧑🚀 Hello, Astronaut!</h1>
|
||||
<p>
|
||||
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
|
||||
template serves as a lightweight, minimally-styled starting point for anyone looking to build
|
||||
a personal website, blog, or portfolio with Astro.
|
||||
</p>
|
||||
<p>
|
||||
This template comes with a few integrations already configured in your
|
||||
<code>astro.config.mjs</code> file. You can customize your setup with
|
||||
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
|
||||
React, or Vue to your project.
|
||||
</p>
|
||||
<p>Here are a few ideas on how to get started with the template:</p>
|
||||
<ul>
|
||||
<li>Edit this page in <code>src/pages/index.astro</code></li>
|
||||
<li>Edit the site header items in <code>src/components/Header.astro</code></li>
|
||||
<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
|
||||
<li>Check out the included blog posts in <code>src/content/blog/</code></li>
|
||||
<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
Have fun! If you get stuck, remember to
|
||||
<a href="https://docs.astro.build/">read the docs</a>
|
||||
or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
|
||||
</p>
|
||||
<p>
|
||||
Looking for a blog template with a bit more personality? Check out
|
||||
<a href="https://github.com/Charca/astro-blog-template">astro-blog-template</a>
|
||||
by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
|
||||
</p>
|
||||
<div class="hero">
|
||||
<div class="hero-content">
|
||||
<img src="HeaderLogo.png" alt="Terakoda Software Systems Logo" class="logo">
|
||||
<p>Solving Your Unique Software Challenges with Precision and Quality</p>
|
||||
<a href="#contact" class="cta-button">Get a Consultation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="services">
|
||||
<h2>Our Expertise</h2>
|
||||
<div class="services-content">
|
||||
<div class="service-item">
|
||||
<h3>Custom Software Solutions</h3>
|
||||
<p>We specialize in providing bespoke software solutions for those critical, isolated challenges that can impact your operations and growth.</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h3>Engineering Challenges</h3>
|
||||
<p>Our experienced developers can tackle complex engineering hurdles that fall outside your team's immediate expertise.</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h3>Organizational Challenges</h3>
|
||||
<p>We offer solutions to organizational challenges that can be addressed through tailored software applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quality">
|
||||
<h2>Our Commitment to Quality</h2>
|
||||
<div class="quality-content">
|
||||
<p>At Terakoda Software Systems, we are dedicated to delivering solutions that meet the highest standards of quality and reliability.</p>
|
||||
<ul class="quality-list">
|
||||
<li>Expert Analysis to understand your specific needs.</li>
|
||||
<li>Custom-Crafted Solutions designed for optimal performance.</li>
|
||||
<li>Uncompromising Quality through rigorous development standards.</li>
|
||||
<li>Clear Communication throughout the entire process.</li>
|
||||
<li>Long-Term Value ensuring lasting solutions.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact" id="contact">
|
||||
<h2>Ready to Solve Your Software Puzzle?</h2>
|
||||
<p>Contact us today for a consultation and let Terakoda Software Systems help you overcome your unique software challenges with precision and excellence.</p>
|
||||
<a href="mailto:your-email@example.com" class="contact-button">Contact Us</a>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
<style>
|
||||
.logo {
|
||||
max-width: 400px; /* Adjust as needed */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: #1f2932; /* Dark Background */
|
||||
color: #fdfafc; /* Light Text */
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background-color: #2EB670; /* Accent Color */
|
||||
color: #1f2932; /* Dark Text */
|
||||
padding: 15px 30px;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: #269e61;
|
||||
}
|
||||
|
||||
.services {
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
background-color: #f9f7f7; /* Slightly darker light background for contrast */
|
||||
}
|
||||
|
||||
.services h2 {
|
||||
font-size: 2em;
|
||||
color: #1f2932; /* Dark Text */
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.services-content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
background-color: white;
|
||||
padding: 25px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.service-item h3 {
|
||||
color: #2EB670; /* Accent Color */
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.quality {
|
||||
background-color: #fdfafc; /* Light Background */
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quality h2 {
|
||||
font-size: 2em;
|
||||
color: #1f2932; /* Dark Text */
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.quality-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.quality-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.quality-list li {
|
||||
margin-bottom: 15px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quality-list li::before {
|
||||
content: "\2713"; /* Checkmark */
|
||||
color: #2EB670; /* Accent Color */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.contact {
|
||||
background-color: #1f2932; /* Dark Background */
|
||||
color: #fdfafc; /* Light Text */
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact h2 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.contact p {
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.contact-button {
|
||||
display: inline-block;
|
||||
background-color: #2EB670; /* Accent Color */
|
||||
color: #1f2932; /* Dark Text */
|
||||
padding: 15px 30px;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-button:hover {
|
||||
background-color: #269e61;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user