spectre-css-examples/bold.html at master · tomcam/spectre-css-examples · GitHub

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bold Home Page - Spectre.css example</title>
	<meta name="description" content="Bold home page">
	<meta name="keywords" content="bold home page, spectre.css, easyonme">
	<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
	<!-- Potential updates: Search for cdnjs and code.jqery.com -->
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css" />
	<style>
		/* 	Color palette:
			Robot: 64F3D5
			FF8B0D orangey
			FF0000 red
			49E80C green
			960DFF purple  */

		h1.massive {
			color: black;
			font-weight: 900;
			font-size: 6em;
			line-height: .8em;
		}

		h2 {
			color: black;
			font-weight: 500;
			font-size: 1.5em;
		}

		html, body {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
		}

		p,h2,li { font-family: "Roboto Slab", serif; }

		a.btn.btn-link {
			color: #960DFF;
		}

		.massive {
			color: black;
			font-weight: 500;
			font-size: 1.5em;
		}

		.big-top-margin {
			margin-top: 20%;
		}

		.bold-statement { color: #960DFF; }

		.home-page {
		}

		/* Brand section is larger than other navbar entries.  */
		.navbar-section a.navbar-brand {
			color: #FF8B0D; /* #960DFF */
			font-size: 1.5em;
			font-weight: 700;
			text-decoration: underline;
		}

		/* Non-brand area of navbar is different size */
		.navbar-section a.btn.btn-link {
			color: #960DFF;
			font-size: 1.25em;
			font-weight: 700;
		}

		.warning { color: red; }


	</style>
</head>
<body>

	<div class="container">

		<!-- HOME PAGE -->
			<div class="columns">
				<div class="column col-1">
				</div><!-- .column .col-1 -->
				<div class="column col-11">

				<header class="navbar">

					<!-- ***********************************
					     IF WINDOW > 600px NAVBAR IS
					     HORIZONTAL

					     hide-sm:
					     	Display only when
					     	window is > 600px wide
					     ******************************* -->

					<!-- ***********************************
						 navbar-section:
							Distributes evenly in container
					     ******************************* -->
					<div class="navbar-section hide-sm">
						<a href="#" class="navbar-brand">Bold Home Page</a>
					</div>
					<div class="navbar-section hide-sm">
						<a  href="#" class="btn btn-link">About</a>
						<a  href="#" class="btn btn-link">Contact</a>
						<a  href="#" class="btn btn-link">FAQ</a>
					</div>

					<!-- ***********************************
					     IF WINDOW <= 600px WIDE GO VERTICAL

					     show-sm:
					    	Display only when
					    	window is <= 600px wide
					     ******************************* -->
					<ul class="nav show-sm">
						<li class="menu-item">
							<a  href="#" class="btn btn-link selected">Home</a>
						</li>
						<li class="menu-item">
							<a  href="#" class="btn btn-link">About</a>
						</li>
						<li class="menu-item">
							<a  href="#" class="btn btn-link">Contact</a>
						</li>
						<li class="menu-item">
							<a  href="#" class="btn btn-link">FAQ</a>
						</li>
					</ul>


				</header><!-- .navbar -->

				</div><!-- .column .col-11 -->
			</div><!-- .columns -->

			<div class="columns"  >
				<div class="column col-1 col-sm-1">
				</div><!-- .column col-1 -->
				<div class="column col-5 col-sm-5">
					<article>
						<h1 class="massive big-top-margin">This is a Honkin' Big
						<span class="bold-statement">Bold Statement.</span></h1>
						<header>
						</header>
						<section>
							<h2>Consider doing something like this for your client.</h2>
							<p class="massive">Here's what needs to be done.</p>
							<ul class="massive">
								<li>Make this responsive.</li>
								<li>Make bullets hang indent.</li>
								<li>Possibly restore this text from boldhome1.html.</li>
							</ul>
						</section>
					</article>
				</div><!-- column col-6 -->
				<div class="column col-4 col-sm-12">
					<p  class="column col-4 big-top-margin">&nbsp;</p>
					<img src="images/t_rex_02-291x300.png" alt="Cute T-Rex">
					<p  class="massive">You need a
					<span class="warning">monster talent</span> on the job.</p>

				</div><!-- .column col-4 -->
			</div><!-- .columns -->


	</div><!-- .container -->


</body>