-
Notifications
You must be signed in to change notification settings - Fork 79
/
Copy pathindex.html
162 lines (153 loc) · 6.8 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Headers</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles/reset.min.css" />
<link rel="stylesheet" href="styles/style.css" />
<link rel="stylesheet" href="styles/home.css" />
<meta name="twitter:title" content="Headers.css" />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:description"
content="The HTML and CSS for 17+ website headers"
/>
<meta name="twitter:site" content="@shadeed9" />
<meta name="twitter:creator" content="@shadeed9" />
<meta
name="twitter:image"
content="https://headers-css.vercel.app/img/card.jpg"
/>
<meta name="og:title" content="Headers.css" />
<meta
name="og:site_name"
content="The HTML and CSS for 17+ website headers"
/>
<meta
name="og:image"
content="https://headers-css.vercel.app/img/card.jpg"
/>
<meta name="og:type" content="website" />
<meta name="og:locale" content="en_US" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-42479265-6"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-42479265-6");
</script>
</head>
<body>
<header>
<img role="presentation" src="img/header-icon.svg" alt="" />
<h1>headers.css</h1>
<p>The blueprint HTML and CSS for <strong>17+</strong> website headers</p>
<p class="links-wrapper">
<a class="link" href="https://github.com/shadeed/headers-css"
><svg
height="512"
viewBox="0 0 24 24"
width="512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.29 21.499c3.73 0 8.94.09 10.835-3.701.715-1.449.875-3.122.875-4.7h-.001c0-2.073-.575-4.047-1.95-5.651a7.558 7.558 0 00.385-2.385c0-1.064-.24-1.598-.73-2.563-2.24 0-3.69.42-5.39 1.742a17.46 17.46 0 00-4.02-.455c-1.495 0-2.986.154-4.435.495C6.134 2.945 4.684 2.5 2.419 2.5c-.484.965-.729 1.499-.729 2.563 0 .811.125 1.632.385 2.414C.695 9.066 0 11.025 0 13.098c0 1.578.281 3.266 1.01 4.701 1.97 3.835 7.49 3.7 11.28 3.7zm-5.289-9.99c.95 0 1.865.168 2.8.297 3.418.52 5.215-.297 7.31-.297 2.339 0 3.675 1.915 3.675 4.087 0 4.349-4.015 5.012-7.53 5.012h-2.41c-3.5 0-7.52-.667-7.52-5.012 0-2.172 1.334-4.087 3.675-4.087z"
/>
<path
d="M16.655 18.323c1.29 0 1.835-1.692 1.835-2.727s-.545-2.727-1.835-2.727-1.835 1.692-1.835 2.727.545 2.727 1.835 2.727zM7.47 18.323c1.29 0 1.835-1.692 1.835-2.727S8.759 12.87 7.47 12.87s-1.835 1.692-1.835 2.727.545 2.726 1.835 2.726z"
/>
</svg>
View on Github</a
>
<a
class="link link--secondary"
href="https://twitter.com/intent/tweet?text=Headers.css%20by%20@shadeed9%20https://headers-css.vercel.app/"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"
/></svg
>Spread the word</a
>
</p>
</header>
<section>
<div class="wrapper content">
<h2>Introduction</h2>
<p>
Since I don’t use CSS frameworks in my front-end work, I needed a way
to quickly build a header component without doing it from scratch for
each new project. I don’t think I’m the only one who thinks in the
same way.
</p>
<p>
As a start, I created <strong>17 headers</strong> with slight
differences between them. This is an ongoing project so expect more
headers coming your way.
</p>
<p>
If you have a suggestion, please use Github issues and I will be happy
to implement it.
</p>
<img src="img/header-css.jpg" alt="" />
</div>
</section>
<section>
<div class="wrapper content">
<h2>Demo</h2>
<ul class="demo">
<li><a href="header-1.html">Header 1</a></li>
<li><a href="header-2.html">Header 2</a></li>
<li><a href="header-3.html">Header 3</a></li>
<li><a href="header-4.html">Header 4</a></li>
<li><a href="header-5.html">Header 5</a></li>
<li><a href="header-6.html">Header 6</a></li>
<li><a href="header-7.html">Header 7</a></li>
<li><a href="header-8.html">Header 8</a></li>
<li><a href="header-9.html">Header 9</a></li>
<li><a href="header-10.html">Header 10</a></li>
<li><a href="header-11.html">Header 11</a></li>
<li><a href="header-12.html">Header 12</a></li>
<li><a href="header-13.html">Header 13</a></li>
<li><a href="header-14.html">Header 14</a></li>
<li><a href="header-15.html">Header 15</a></li>
<li><a href="header-16.html">Header 16</a></li>
<li><a href="header-17.html">Header 17</a></li>
</ul>
</div>
</section>
<footer>
<div class="wrapper">
<h2>About the creator</h2>
<div class="author">
<img class="author-avatar" src="img/shadeed.jpg" alt="" />
<div class="author-meta">
<h3 class="author-name">Ahmad Shadeed</h3>
<p class="author-desc">
Author of
<a href="http://debuggingcss.com/">Debugging CSS book</a>, writing
on <a href="http://ishadeed.com/">ishadeed.com</a>,
<a href="https://www.rtlstyling.com/">rtlstyling.com</a>,
<a href="https://www.a11ymatters.com/">a11ymatters.com</a>
</p>
</div>
</div>
<p>
An open-source project by
<a href="http://ishadeed.com/">Ahmad Shadeed</a>.
</p>
<p>
Follow on
<a href="https://twitter.com/shadeed9">Twitter [@shadeed9]</a>
</p>
</div>
</footer>
</body>
</html>