118 lines
5.7 KiB
HTML
118 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>My Website</title>
|
|
<style>
|
|
body::before {
|
|
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Welcome to My Website</h1>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
<li><a href="#services">Services</a></li>
|
|
<li><a href="blog.html">Blog</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="snap-container">
|
|
<section id="about" class="snap-section">
|
|
<h2>About</h2>
|
|
<div class="content-container"> <div class="section-content left-align">
|
|
<div class="text-content">
|
|
<p>
|
|
Welcome to our website! This is a demo About section to show you how the content format works.</p>
|
|
</div>
|
|
<div class="image-content">
|
|
<img src="images/about.webp" alt="about image 1">
|
|
</div>
|
|
</div> <div class="section-content right-align">
|
|
<div class="text-content">
|
|
<p>This is the second content block. You can add as many content blocks as you want by separating them with `</p>
|
|
</div>
|
|
<div class="image-content">
|
|
<img src="images/about.webp" alt="about image 2">
|
|
</div>
|
|
</div> <div class="section-content left-align">
|
|
<div class="text-content">
|
|
<p>` dividers. Each block will automatically get an image assigned from your images folder.</p>
|
|
</div>
|
|
<div class="image-content">
|
|
<img src="images/about.webp" alt="about image 3">
|
|
</div>
|
|
</div> <div class="section-content right-align">
|
|
<div class="text-content">
|
|
<p>The third content block demonstrates how images are automatically assigned. Name your images following the pattern: `{sectionId}{number}.{ext}` (e.g., `about1.webp`, `about2.jpg`, `about3.png`).</p>
|
|
</div>
|
|
<div class="image-content">
|
|
<img src="images/about.webp" alt="about image 4">
|
|
</div>
|
|
</div> </div>
|
|
</section> <section id="contact" class="snap-section">
|
|
<h2>Contact</h2>
|
|
<div class="content-container"> <div class="section-content left-align">
|
|
<div class="text-content">
|
|
<p>
|
|
Get in touch with us! This is a demo contact section.</p>
|
|
</div>
|
|
<div class="image-content">
|
|
<img src="images/contact.webp" alt="contact image 1">
|
|
</div>
|
|
</div> <div class="section-content right-align">
|
|
<div class="text-content">
|
|
<p>You can add your contact information, social media links, or any other details here. The format is flexible - just use Markdown!</p>
|
|
</div>
|
|
<div class="image-content">
|
|
<img src="images/contact.webp" alt="contact image 2">
|
|
</div>
|
|
</div> <div class="section-content left-align">
|
|
<div class="text-content">
|
|
<p>Feel free to customize this section with your own contact details and information.</p>
|
|
</div>
|
|
<div class="image-content">
|
|
<img src="images/contact.webp" alt="contact image 3">
|
|
</div>
|
|
</div> </div>
|
|
</section> <section id="services" class="snap-section">
|
|
<h2>Services</h2>
|
|
<div class="content-container"> <div class="section-content left-align">
|
|
<div class="text-content">
|
|
<p>
|
|
Our first service offering is detailed here. This content block will appear with an image on the right side.</p>
|
|
</div>
|
|
<div class="image-content">
|
|
<img src="images/services.webp" alt="services image 1">
|
|
</div>
|
|
</div> <div class="section-content right-align">
|
|
<div class="text-content">
|
|
<p>The second service is described in this block. Notice how the image alignment alternates - this block will have the image on the left side.</p>
|
|
</div>
|
|
<div class="image-content">
|
|
<img src="images/services.webp" alt="services image 2">
|
|
</div>
|
|
</div> <div class="section-content left-align">
|
|
<div class="text-content">
|
|
<p>You can customize this content to match your needs. Simply edit the Markdown files in the `content/` folder and rebuild the site!</p>
|
|
</div>
|
|
<div class="image-content">
|
|
<img src="images/services.webp" alt="services image 3">
|
|
</div>
|
|
</div> </div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2025 My Website. All rights reserved.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|