-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
301 lines (265 loc) · 15.3 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Name</title>
<meta name="description"
content="A minimalistic HTML + CSS + JS base front-end framework for simple web site projects." />
<!-- VIEWPORT FOR MOBILE -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- FOR IE/EDGE -->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- MAIN CSS FILE -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body id="page-home">
<div class="site-wrapper">
<header class="site-header darksection">
<div class="site-id">
<div class="site-logo fixed">
<a href="#" class="scroll">
<svg height="30" width="30">
<title>Site Name Logo</title>
<circle cx="15" cy="15" r="10" />
</svg>
<!-- <img src=" https://placehold.it/30" alt="logo" /> -->
</a>
</div>
<h1><a href="#">Site Name</a></h1>
</div>
<nav class="site-nav fixed" data-navstate="closed">
<h2 class="menu-button">Menu</h2>
<ul class="primary-nav">
<li><a href="index.html">Home</a></li>
<li><a href="menu/index.html">Menu</a></li>
<li><a href="resources/index.html">Resources</a></li>
<li><a href="about/index.html">About</a></li>
<li><a href="contact/index.html">Contact</a></li>
</ul>
<ul class="secondary-nav">
<li><a href="subpageblue/index.html" class="bg-blue">Page<span> Blue</span></a></li>
<li><a href="subpagesky/index.html" class="bg-sky">Page<span> Sky Blue</span></a></li>
<li><a href="subpagegreen/index.html" class="bg-green">Page<span> Green</span></a></li>
<li><a href="subpagelime/index.html" class="bg-lime">Page<span> Lime</span></a></li>
<li><a href="subpageorange/index.html" class="bg-orange">Page<span> Orange</span></a>
</li>
<li><a href="subpagepeach/index.html" class="bg-peach">Page<span> Peach</span></a></li>
<li><a href="subpagered/index.html" class="bg-red">Page<span> Red</span></a></li>
<li><a href="subpagepink/index.html" class="bg-pink">Page<span> Pink</span></a></li>
<li><a href="subpagepurple/index.html" class="bg-purple">Page<span> Purple</span></a></li>
</ul>
</nav>
</header>
<main id="top" class="site-main">
<section class="hero darksection">
<div class="container fadeandscaleIn">
<svg version="1.1" class="nma-svg-logo-white-trans fadeandscaleIn"
xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 1189 350" xml:space="preserve">
<style>
.nma-svg-logo-white-trans {
padding: 2em .5vw;
}
.color-svg-white {
fill: rgba(255, 255, 255, 1);
}
.color-svg-white-trans30 {
fill: rgba(255, 255, 255, .3);
}
.color-svg-white-trans60 {
fill: rgba(255, 255, 255, .6);
}
</style>
<path id="N-triangle-bottomleft" class="color-svg-white-trans60" d="M0 93.9V350h257.8z" />
<path id="N-letter-shape" class="color-svg-white" d="M105.5 0H0l352.4 350V0h-70.8v175z" />
<path id="N-triangletopright" class="color-svg-white-trans30 " d="M281.6 175V0H105.5z" />
<path id="M-triangle-left" class="color-svg-white-trans60" d="M418.3 0v350l176.2-175z" />
<path id="M-triangle-bottom" class="color-svg-white-trans30 " d="M418.3 350h352.4L594.5 175z" />
<path id="M-triangle-right" class="color-svg-white" d="M594.5 175l176.2 175V0z" />
<path id="A-letter-shape" class="color-svg-white" d="M1083.5 350H1189L836.6 0v350h70.8V175z" />
<path id="A-triangle-bottom" class="color-svg-white-trans60" d="M907.4 175v175h176.1z" />
</svg>
<h1>Framework.v5</h1>
<p>A work-in-progress, minimalistic HTML + CSS + JS base front-end framework for simple web site
projects.</p>
<a href="#subsection1" class="scroll button reversed white">Jump to a Sub Section</a>
<a href="subpageblue/index.html" class="button reversed white">Sub Page</a>
<a href="about/index.html" class="button reversed white">Another Sub Page</a>
</div>
</section>
<section class="full-size">
<ul class="grid-of-cards fadeandscaleIn-noscroll">
<li><a href="subpageblue/index.html" class="bg-blue">Card<span> Blue</span></a></li>
<li><a href="subpagesky/index.html" class="bg-sky">Card<span> Sky Blue</span></a></li>
<li><a href="subpagegreen/index.html" class="bg-green">Card<span> Green</span></a></li>
<li><a href="subpagelime/index.html" class="bg-lime">Card<span> Lime</span></a></li>
<li><a href="subpageorange/index.html" class="bg-orange">Card<span> Orange</span></a>
</li>
<li><a href="subpagepeach/index.html" class="bg-peach">Card<span> Peach</span></a></li>
<li><a href="subpagered/index.html" class="bg-red">Card<span> Red</span></a></li>
<li><a href="subpagepink/index.html" class="bg-pink">Card<span> Pink</span></a></li>
<li><a href="subpagepurple/index.html" class="bg-purple">Card<span> Purple</span></a></li>
</ul>
</section>
<nav class="page-nav">
<ul>
<li><a href="#subsection1" class="scroll"><span>Subsection 1</span></a></li>
<li><a href="#subsection2" class="scroll"><span>Subsection 2</span></a></li>
<li><a href="#subsection3" class="scroll"><span>Subsection 3</span></a></li>
<li><a href="#subsection4" class="scroll"><span>Subsection 4</span></a></li>
</ul>
</nav>
<section id="subsection1">
<div class="container fadeandscaleIn">
<h2>Student Friendly</h2>
<p>Designed for web designers and front-end developers, this framework is a simple HTML + CSS + JS
starter base created for students learning how to code a basic front-end framework from
scratch by hand, line-by-line. This site embraces emerging design patterns that are more
commonly found on higher risk
and more intentionally modern sites, such as fixed header elements, full-screen overlay
menus, video backgrounds, scroll-triggered animations, and more.</p>
</div>
</section>
<section>
<h1 class="popout-text">
<span>F</span>
<span>R</span>
<span>A</span>
<span>M</span>
<span>E</span><br>
<span>W</span>
<span>O</span>
<span>R</span>
<span>K</span><br>
<span>v</span>
<span>5</span>
</h1>
</section>
<section id="subsection2">
<div class="container fadeandscaleIn">
<div class="row centered">
<div class="two-thirds">
<img src="img/placeholder-4x3.gif" alt="">
<h2>Nothing Required</h2>
<p>No prior web design experience is required. Designed for first-time front-end coders,
this static
site starter framework uses no pre-processing, no command line, and no special software.
All you
need is a text
editor and a browser.</p>
</div>
</div>
</div>
</section>
<section id="subsection3" class="bg-white">
<div class="container row centered fadeandscaleIn">
<div class="one-half">
<img src="img/placeholder-4x3.gif" alt="">
</div>
<div class="one-half fadeandscaleIn">
<h2>Customizable CSS</h2>
<p>All styling is intentionally minimal for simple, basic web sites. Core CSS includes base
typography, a simple responsive grid, and a default site structure with a mobile-friendly
navigation system.
</p>
<a href="#" class="button">Link</a>
</div>
</div>
</section>
<section id="subsection4">
<div class="container row centered swapped fadeandscaleIn">
<div class="one-half column">
<img src="img/placeholder-4x3.gif" alt="">
</div>
<div class="one-half fadeandscaleIn">
<h2>Modular, Scalable, and Extensible</h2>
<p>All UI elements were designed and built as separate components, so that they can work
independently of one another. Most of the code found within this framework was inititally
written in small codepens first, then pieced together to collectively build a single
website.
</p>
<a href="#" class="button">Link</a>
</div>
</div>
</section>
</main>
<footer class="site-footer darksection">
<div class="container row">
<div class="one-half column fadeandscaleIn">
<h4>What is Framework v5?</h4>
<p>
This is a static HTML + CSS + JS front-end base (starter/boilerplate). As an annual exercise, it
was created to help those interested in learning how to code a basic front-end framework for
simple static websites from scratch by hand, line-by-line. No prior web design or coding
experience required. Designed for first-time front-end coders, this framework uses no build
tools, no pre-processing (e.g. SASS), no command line interface (CLI), and no special software.
All you need is a text editor and a browser.
</p>
<a href="https://github.com/kccnma/framework_v5" class="button reversed white">Framework_v5 GitHub
Repo</a>
<h5>Previous Framework Versions:</h5>
<a href="https://github.com/kccnma/framework_v4" class="button reversed white">v4</a>
<a href="https://github.com/kccnma/framework_v3" class="button reversed white">v3</a>
<a href="https://github.com/kccnma/framework_v2" class="button reversed white">v2</a>
<a href="https://github.com/kccnma/framework_v1" class="button reversed white">v1</a>
</div>
<div class="one-half column fadeandscaleIn">
<h4>Who Created This?</h4>
<p>
This was built by Chris Gargiulo, a designer/front-end web developer/teacher living in
Honolulu, Hawaii.
</p>
<h5>Links:</h5>
<ul>
<li><a href="http://nma.kcc.hawaii.edu/">NMA / Program Website</a></li>
<li><a href="http://nma.kcc.hawaii.edu/gargiulo/">NMA / Gargiulo</a></li>
<li><a href="https://github.com/kccnma/">KCCNMA on Github</a></li>
<li><a href="https://codepen.io/kccnma/">KCCNMA on Codepen</a></li>
<li>Other/related projects by Chris:
<ul>
<li><a href="https://github.com/kccnma/sitebase">SiteBase</a></li>
<li><a href="https://github.com/kccnma/sassybase">SassyBase</a></li>
<li><a href="https://github.com/kccnma/test-swup-wipe">Swup Page Wipe Transition
Test</a></li>
</ul>
</li>
</ul>
<h5>Thanks and 3rd Party Credits:</h5>
<ul>
<li>Benjamin De Cock's <a href="https://github.com/bendc/anchor-scroll">Anchor Scroll</a></li>
<li>Adam Shaw's <a href="http://arshaw.com/fullcalendar/" target="_blank">Full Calendar</a></li>
<li>Robert Fleischmann's <a href="http://rendro.github.io/easy-pie-chart/" target="_blank">Easy
Pie Chart</a></li>
</ul>
</div>
</div>
<div class="footer-navbar">
<nav class="social-nav">
<ul>
<li><a href="https://github.com/kccnma/">
<img src="img/github-logo-1x1-white.png" alt="Github" width="20" height="20" />
<span class="hide-visually">Github</span>
</a></li>
<li><a href="https://codepen.io/kccnma/">
<img src="img/codepen-logo-1x1-white.png" alt="Codepen" width="20" height="20" />
<span class="hide-visually">Codepen</span>
</a></li>
</ul>
</nav>
<nav class="bottom-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu/index.html">Menu</a></li>
<li><a href="resources/index.html">Resources</a></li>
<li><a href="about/index.html">About</a></li>
<li><a href="contact/index.html">Contact</a></li>
</ul>
</nav>
</div>
</footer>
</div>
<!-- ANCHOR-SCROLL JS by Benjamin De Cock https://github.com/bendc/anchor-scroll -->
<script src="js/scroll.min.js" defer></script>
<!-- MIAN JS -->
<script src="js/scripts.js" defer></script>
</body>
</html>