Skip to content

Instantly share code, notes, and snippets.

@tomcam

tomcam/update1.html

Last active June 30, 2017 06:36
Show Gist options
  • Save tomcam/49f29c856e295ff2fa9db9fcd806baf1 to your computer and use it in GitHub Desktop.
Save tomcam/49f29c856e295ff2fa9db9fcd806baf1 to your computer and use it in GitHub Desktop.
Download ZIP
update1.html spectre.css template
Raw
update1.html
<!doctype html>
<html lang="en">
<head>
<title>Update1 template--Spectre.css</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.2.10/spectre.min.css" />
</head>
<body>
<div class="container">
<div class="columns">
<!-- LEFT COLUMN -->
<div class="column col-3">
<h3>News</h3>
<p>Why not a telling or snarky little quote here?</p>
<h4>Local</h4>
<ul class="nav">
<li class="nav-item"><a href="#">News</a></li>
<li class="nav-item"><a href="#">Weather</a></li>
<li class="nav-item"><a href="#">Sports</a></li>
<li class="nav-item"><a href="#">Classifieds</a></li>
</ul>
<br>
<h4>Site</h4>
<ul class="nav">
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
<li class="nav-item"><a href="#">Privacy</a></li>
<li class="nav-item"><a href="#">Terms</a></li>
</ul>
</div><!-- .column .col-3 -->
<!-- RIGHT COLUMN -->
<div class="column col-9 rel">
<h1>Update1.html Template using
<a href="https://picturepan2.github.io/spectre/index.html#introduction">Spectre.css</a></h1>
<p>Try this on your phone, or by resizing the window so it's smaller.
See how the left and right columns interact. That's a responsive
grid in action.</p>
</div><!-- .column .col-9 .rel -->
</div><!-- .columns -->
</div><!-- .container -->
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment