94 lines
2.5 KiB
HTML
94 lines
2.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>PicoCSS Three-Column Layout</title>
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.classless.min.css"
|
||
|
|
/>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="css/heroweb.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<textarea id="markdown-nav" style="display: none">
|
||
|
|
|
||
|
|
- [intro](#intro)
|
||
|
|
- [products](#products)
|
||
|
|
- [car](#car)
|
||
|
|
- [plane](#plane)
|
||
|
|
- [features](#features)
|
||
|
|
- [know more](#know-more)
|
||
|
|
- [documentation](#documentation)
|
||
|
|
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<textarea id="markdown-input" style="display: none">
|
||
|
|
# Welcome to the Example
|
||
|
|
|
||
|
|
This is a **Markdown** example.
|
||
|
|
|
||
|
|
# Section 1
|
||
|
|
Content for section 1.
|
||
|
|
|
||
|
|
## Section 2
|
||
|
|
Content for section 2.
|
||
|
|
|
||
|
|
### Section 3
|
||
|
|
|
||
|
|
Content for section 3.
|
||
|
|
|
||
|
|
- something
|
||
|
|
- yes
|
||
|
|
- incredible
|
||
|
|
|
||
|
|
> This is a blockquote.
|
||
|
|
|
||
|
|
| Name | Email | Description |
|
||
|
|
|------------|-------------------|-------------------|
|
||
|
|
| John Doe | john@example.com | Developer |
|
||
|
|
| Jane Smith | jane@example.com | Designer |
|
||
|
|
| Bob Brown | bob@example.com | Manager |
|
||
|
|
| Alice Blue | alice@example.com | Engineer |
|
||
|
|
| Eve White | eve@example.com | Analyst |
|
||
|
|
| Tom Black | tom@example.com | Consultant |
|
||
|
|
|
||
|
|
### Section 4
|
||
|
|
|
||
|
|
Content for section 4.
|
||
|
|
|
||
|
|
- something
|
||
|
|
- yes
|
||
|
|
- incredible
|
||
|
|
|
||
|
|
> This is a blockquote.
|
||
|
|
|
||
|
|
</textarea>
|
||
|
|
<nav>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" class="brand">MyWebsite</a></li>
|
||
|
|
<li><a href="#home">Home</a></li>
|
||
|
|
<li><a href="#about">About</a></li>
|
||
|
|
<li><a href="#services">Services</a></li>
|
||
|
|
<li><a href="#contact">Contact</a></li>
|
||
|
|
<navbar-right>
|
||
|
|
<input type="search" name="search" placeholder="Search..." />
|
||
|
|
<a href="#login">Login</a>
|
||
|
|
<div id="theme-switcher-icons"></div>
|
||
|
|
</navbar-right>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
<main class="container">
|
||
|
|
<mynav id="mynav"> </mynav>
|
||
|
|
<article id="markdown-output"></article>
|
||
|
|
<docnav>
|
||
|
|
<br />
|
||
|
|
<h5>Doc</h5>
|
||
|
|
<ul id="content-pointers"></ul>
|
||
|
|
</docnav>
|
||
|
|
</main>
|
||
|
|
<script src="js/heroweb.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|