You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.6 KiB
46 lines
1.6 KiB
<!DOCTYPE html> |
|
<html lang="en-US"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>Basic Grid Demo</title> |
|
<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i|Source+Sans+Pro:400,400i,600,600i" rel="stylesheet"> |
|
<link rel="stylesheet" href="style-main.css" type="text/css" media="all"> |
|
<link rel="stylesheet" href="style-grid.css" type="text/css" media="all"> |
|
</head> |
|
|
|
<body class="site"> |
|
<a class="skip-link screen-reader-text" href="#content">Skip to content</a> |
|
|
|
<header class="masthead"> |
|
<code class="identifier"><pre>.masthead</pre></code> |
|
<h2>CSS Grid</h2> |
|
</header><!-- .masthead --> |
|
|
|
<div class="page-title"> |
|
<code class="identifier"><pre>.page-title</pre></code> |
|
<h1>Demo sandbox for Advanced Layouts with CSS Grid</h1> |
|
</div><!-- .page-title --> |
|
|
|
<main id="content" class="main-content"> |
|
<code class="identifier"><pre>.main-content</pre></code> |
|
<h2>Main content</h2> |
|
<p>This is where the main bulk of the document content would go.</p> |
|
</main><!-- #content .main-content --> |
|
|
|
<aside class="sidebar"> |
|
<code class="identifier"><pre>.sidebar</pre></code> |
|
<h2>Sidebar</h2> |
|
<p>The place where things of less relevance appears.</p> |
|
</aside><!-- .sidebar --> |
|
|
|
<footer class="footer-content"> |
|
<code class="identifier"><pre>.footer-content</pre></code> |
|
<h2>Footer</h2> |
|
<p><span class="bg">The place where site nav and other meta info typically appears.</span></p> |
|
</footer><!-- .footer-content --> |
|
|
|
</body> |
|
|
|
</html>
|
|
|