-
Notifications
You must be signed in to change notification settings - Fork 0
/
notes.html
138 lines (128 loc) · 6.35 KB
/
notes.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
<!DOCTYPE html>
<!--
Brianna Buttaccio
3/16/2017
ISTE-240-01
Individual Project 1
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
Notes
</title>
<link rel="stylesheet" type="text/css" href="assets/css/mystyle.css">
<script type="text/javascript" src="assets/javascript/mobileNavScript.js"></script>
</head>
<body onload="loadMenu()">
<!-- GLOBAL NAVIGATION -->
<header>
<nav id="nav-desktop">
<figure id="logo">
<a href="index.html"><img src="assets/images/logo.png" alt="Logo" /></a>
</figure>
<ul>
<li>
<div><a href="index.html">Home</a></div>
</li>
<li>
<div><span>Wine & Dine</span></div>
<ul>
<li><a href="food.html">Food</a></li>
<li><a href="dessert.html">Dessert</a></li>
<li><a href="drinks.html">Drinks</a></li>
</ul>
</li>
<li>
<div><a href="lodging.html">Lodging</a></div>
</li>
<li>
<div><a href="navigation.html">Navigation</a></div>
</li>
<li>
<div><span>Entertainment</span></div>
<ul>
<li><a href="shopping.html">Shopping</a></li>
<li><a href="siteseeing.html">Sightseeing</a></li>
<li><a href="museums.html">Museums</a></li>
<li><a href="activities.html">Activities</a></li>
</ul>
</li>
</ul>
</nav>
<div id="nav-trigger">
<img src="assets/images/hamburger.png" alt="Logo" />
</div>
<nav id="nav-mobile">
<figure id="logoMobile">
<a href="index.html"><img src="assets/images/logo.png" alt="Logo" /></a>
</figure>
</nav>
</header>
<!-- RIGHT CONTENT -->
<div id="right-content">
<!-- BANNER -->
<div id="banner" style="background-image: url('assets/images/homeBanner.jpg')">
<h2>Notes</h2>
<h4>https://www.pexels.com/photo/new-york-time-square-29732/</h4>
</div>
<!-- INFORMATION -->
<div id="information">
<div class="float-left fullwidth last">
<!-- BOX -->
<div class="box">
<h3>The Details</h3>
<p>
All the content in is my own words. I have 10 pages: home, food, drinks, dessert, navigation, lodging, shopping, sightseeing, museums, and activities. I created the logo in photoshop and all the images are sited.
</p>
<h3>Design</h3>
<p>
The design is consistent and visually appealing. The navigation is the consistent on every page. The content is divided up properly into categories. I used an external CSS style sheet to format all content.
</p>
<h3>Browsers and Screens</h3>
<p>
The site has been tested on Google Chrome, Firefox, and IE. The site only has one minor failure on IE. The slideshow on the home page sometimes stops looping. However, if the JavaScript does not load, a background image appears instead of the slideshow.
</p>
<p>
The website is responsive and mobile friendly. There is a mobile menu that appears on devices below 800px. The google maps also disappear on mobile screen sizes to minimize large downloads. Also, if the site is loaded on a small screen size, it loads smaller images for the slideshow. Font sizes, margins, and paddings also adjust with the screen size.
</p>
<h3>Graphical and Interaction Design </h3>
<p>
The navigation, logo, title, and banner are consistent on all pages. My page titles are meaningful. Sub menus open when the user hovers over a category. The menu stays open when the user is on a sub-page. When the mobile menu is in use, if the user tries to open a second sub-menu, all other sub-menus close to reduce scrolling. The user can click on the markers on the google map and it will scroll to and highlight the content related to that location. Also, the markers are labeled with the same number as the corresponding content. The google maps stays on the screen as the user scrolls through all the content.
</p>
<h3>Content </h3>
<p>
Every page has a map. The navigation page has a map of the NYC public transportation system. All other pages have a map with markers of the locations discussed in the content. The user can click on the markers on the map to be linked to the corresponding content. All photos are sited with the source at the bottom right corner of every image. The content is thorough and well written.
</p>
<h3>Reference Page</h3>
<p>
The reference page is complete and organized.
</p>
<h3>The Grade Page</h3>
<p>
You are reading it!
</p>
<h3>No Typos</h3>
<p>
All the content was put through a spell-checker and proof read.
</p>
<h3>Code Design</h3>
<p>
All the code is properly indented and commented. The CSS is grouped by category and labeled. I used HTML5 elements such as header, nav, and footer. All pages validate.
</p>
</div> <!-- BOX -->
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<p>
Created by Brianna Buttaccio © 2017
|
<a href="sources.html">References</a>
|
<a href="notes.html">Content Explained</a>
</p>
</footer>
</body>
</html>