-
Notifications
You must be signed in to change notification settings - Fork 7
/
respondo.html
134 lines (108 loc) · 3.24 KB
/
respondo.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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Respondo - Spectre.css example</title>
<meta name="description" content="Respondo home page">
<meta name="keywords" content="cute home page, spectre.css, easyonme">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css"/>
<style>
h1 {
color: white ;
font-weight: 700;
font-size: 3em;
line-height: .9em;
margin-top: 2em;
}
h2 {
color: white;
font-weight: 500;
font-size: 2em;
}
body {
background-color: black;
}
/* Brand section is larger than other navbar entries. */
.navbar-section a.navbar-brand {
color: #DFC3AB; /* Puppy off-white */
font-size: 2em;
font-weight: 700;
}
/* Non-brand area of navbar is different size */
.navbar-section a.btn.btn-link {
color: #FF7E00;
font-size: 1.25em;
font-weight: 700;
}
.warning { color: red; }
</style>
</head>
<body>
<div class="container">
<!-- HOME PAGE -->
<div class="columns">
<div class="column hide-sm 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 hide-sm col-1">
</div>
<div class="column col-4 col-sm-4 float-left"
>
<h1>Some things just sell themselves.</h1>
<h2>The rest can use some help from time to time.</h2>
</div>
<div class="column col-7 col-sm-12 float-right"
>
<img
src="images/puppy-on-black-background-close.jpg"
class="img-responsive"
alt="Cute puppy">
</div><!-- .column col-sm-1 -->
</div><!-- .columns -->
</div><!-- .container -->
</body>