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.
47 lines
1.6 KiB
47 lines
1.6 KiB
3 months ago
|
<!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>
|