82 lines
2.4 KiB
HTML
Executable File
82 lines
2.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Grids and Dark Mode</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap-reboot.css">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="layout.css">
|
|
<link rel="stylesheet" href="cards.css">
|
|
<link rel="stylesheet" href="dark.css">
|
|
</head>
|
|
|
|
<!-- To check your layout, you can add class="debug" to the body element to
|
|
add colors and borders to the major sections -->
|
|
|
|
<body>
|
|
<header>
|
|
<h1>Header</h1>
|
|
</header>
|
|
<nav>
|
|
<ul>
|
|
<li><button type="button" id="mode-print">Print Layout</button></li>
|
|
<li><button type="button" id="theme-stealth">Stealth Mode</button></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main>
|
|
<h2>Main Content</h2>
|
|
<article id="article-1">
|
|
<h3>Main</h3>
|
|
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus mi sed
|
|
facilisis finibus. Cras ut mollis eros. Aliquam commodo quis purus et tempus.
|
|
</article>
|
|
|
|
<article id="article-2">
|
|
<h3>Second</h3>
|
|
<p>Fusce nisi enim, interdum efficitur magna quis, feugiat ornare sapien. Quisque
|
|
molestie maximus diam, in egestas elit elementum vel. Morbi in faucibus odio.
|
|
</article>
|
|
|
|
<article id="article-3">
|
|
<h3>Third</h3>
|
|
<p> In consectetur, odio id malesuada venenatis, diam dolor consequat erat, sed
|
|
blandit nisi nunc ac libero.
|
|
</article>
|
|
|
|
<article id="article-4">
|
|
<h3>Fourth</h3>
|
|
<p> Etiam consequat, sem sit amet volutpat tempus, justo mi dapibus erat, in
|
|
maximus odio metus id ex. Pellentesque finibus eleifend tempor.
|
|
</article>
|
|
|
|
<article id="article-5">
|
|
<h3>Fifth</h3>
|
|
<p> Morbi in imperdiet sem, at ultrices ligula. Curabitur bibendum quis leo non
|
|
lacinia. In hac habitasse platea dictumst. Nullam malesuada consequat efficitur.
|
|
</article>
|
|
|
|
<article id="article-6">
|
|
<h3>Sixth</h3>
|
|
<p> Nulla laoreet vestibulum hendrerit. Aenean ut velit eget lectus molestie
|
|
bibendum. In ac elit a eros iaculis scelerisque dictum in nulla.
|
|
</article>
|
|
|
|
</main>
|
|
|
|
<aside id="side">
|
|
<h2>Sidebar</h2>
|
|
</aside>
|
|
<aside id="ad">
|
|
<h2>Advertising</h2>
|
|
</aside>
|
|
<footer>
|
|
<h2>The footer</h2>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html> |