/
index.html
executable file
·96 lines (76 loc) · 4.05 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
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mobile Friendly Layout Experiments</title>
<meta name="description" content="Mobile friendly layout experiments.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- TODO:
Create a mobile friendly page header. This may be a navigation
bar, but it does not have to be a navigation bar. In fact, it
may be more beneficial to try to mock up something more like
what you hope to see in your final projects header (title, score,
etc.).
-->
<!-- TODO:
Create a mobile friendly gallery layout that displays a set of
at least 24 images. Each image should be displayed along with some
metadata: title of image and a brief description. You may use
placeholder text (see http://lipsum.com) for both if you do not
have titles or descriptions available.
You may use any HTML structures you want, and this file has
Bootstrap linked in, so you may use the responsive layout and
image tools that Bootstrap includes.
-->
<!-- TODO:
Create a mobile-friendly Footer that includes three columns. The
columns should contain the following content.
Column 1:
This description: "This page is meant to provide an experimental
proof of concept for a mobile-friendly layout that can be used
to inform the creation of a card matching game."
Column 2:
A list of styled links. These links will be imaginary, and
you should focus on styling them and laying them out in a
way that works well when viewed in both mobile and desktop
browsers.
Column 3:
A table of high scores. Populate at least five rows of the
table with imaginary player names and high scores. The table
should have two columns: name and score.
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>