-
Notifications
You must be signed in to change notification settings - Fork 7
/
update1.html
60 lines (59 loc) · 2.54 KB
/
update1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<html lang="en">
<head>
<!-- The following 2 meta tags always come first -->
<!-- Notify browsers this page is in Unicode -->
<meta charset="utf-8">
<!-- This site is responsive. Use full screen width. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update1 template--Spectre.css</title>
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/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 news site template using Spectre.css
</h1>
<p>Shows how good and very fast a default
<a href="https://picturepan2.github.io/spectre/index.html#introduction">Spectre.css</a>-based
HTML template can be. It uses only default styles and is under 70 lines of HTML with content.</p>
<h2>Notes</h2>
<ul>
<li>View on older browsers: Spectre.css is very small, yet it has a
<a href="https://picturepan2.github.io/spectre/experimentals.html">surprisingly rich feature set</a>
and works superbly, even on old Android 4.4 phones (and maybe before)
</li>
<li>This template works as a standalone HTML file.
Just download it and try it on your home machine.
No other files are required because it uses
Spectre.css from a CDN.</li>
<li>Try update1.html 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.</li>
</ul>
</div><!-- .column .col-9 .rel -->
</div><!-- .columns -->
</div><!-- .container -->
</body>