-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathstarter-template.html
50 lines (47 loc) · 1.85 KB
/
starter-template.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
<!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">
<!-- Spectre.css starter template -->
<!-- Create title for browser tabs & Favorites -->
<title>Spectre.css starter template</title>
<meta name="description" content="Spectre.css starter template">
<meta name="keywords" content="spectre.css, free template">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
/* Make the navbar taller, and high contrast. */
.navbar { height: 6rem; background-color: #222222; padding: .5em 0 1em; }
.navbar-primary .navbar-brand {
color: #fff;
font-size: 3rem;
font-weight: bold;
padding-left: 2rem;
}
.btn.btn-link { color: lightgray; background-color: #222222; font-size: 1.5em;}
/* Make the button link color lighter on the nav bar */
.btn.btn-link.selected { color: white; background-color: #222222; font-size: 1.5em;}
/* Add padding to the right side of navbar. */
.navbar-section { padding-right: 2rem;}
</style>
</head>
<body>
<header class="navbar">
<!-- Logo on the left -->
<div class="navbar-primary">
<a href="#" class="navbar-brand mr-10">Project name</a>
<a href="#" class="btn btn-link selected">Home</a>
<a href="#" class="btn btn-link">About</a>
<a href="#" class="btn btn-link">Contact</a>
</div>
</header><!-- .navbar -->
<div class="container text-center">
<h1>Spectre.css starter template</h1>
<h2>Tiny, responsive, fast.</h2>
</div>
</body>