forked from chris0stein/Base-Responsive-Page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
80 lines (66 loc) · 3.76 KB
/
demo.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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Responsive Page</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/demo-style.css">
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/vendor/selectivizr-min.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>
<body>
<header class="site-header">
<img src="http://placehold.it/1200x200" alt="header image" />
<h1>Base Responsive HTML Page</h1>
</header>
<main id="main">
<section class="features">
<div class="feature">
<p><img src="http://placehold.it/900x100" alt="featured image" /></p>
<p>This page was created to show a relatively basic but still full featured responsive page. It is intended more for educational purposes than as a full production-ready page. But feel free to use it how you like as a base for your own designs. If you do, drop me a note and let me know.</p>
</div>
<div class="feature">
<p><img src="http://placehold.it/900x100" alt="featured image" /></p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="feature">
<p><img src="http://placehold.it/900x100" alt="featured image" /></p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</section> <!-- end .features -->
<section class="boxes">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
</section>
</main>
<footer class="site-footer">
<p>created by Chris Stein 2019</p>
<p>This page uses the work of many other people from the following projects:</p>
<ul>
<li>Modernizr: <a href="https://modernizr.com/">https://modernizr.com/</a></li>
<li>Selectivizr: <a href="http://selectivizr.com/">http://selectivizr.com/</a></li>
<li>jQuery: <a href="https://jquery.com/">https://jquery.com/</a></li>
<li>Normalize: <a href="https://necolas.github.io/normalize.css/">https://necolas.github.io/normalize.css/</a> </li>
<li>HTML5 Boilerplate: <a href="https://html5boilerplate.com/">https://html5boilerplate.com/</a> this project is very similar but intended to be not quite as complex to look at on the GitHub page and includes some example HTML and CSS.</li>
</ul>
</footer>
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
</body>
</html>