-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
200 lines (195 loc) · 6.9 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
<html>
<head>
<meta charset="UTF-8">
<title>The Iron Yard - Design Brief</title>
<script src="scripts/jquery-2.1.4.js"></script>
<script src="scripts/main.js"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<header>
<div class="wrapper">
<h1 class="logo">
<a href="/tiy/">
<img src="images/iron-yard-logo.png" alt="">
</a>
</h1>
<a id="js-toggle" href="#0">
<div class="course-list">
<span id="title">5.1 - Introduction and Overview</span>
<div class="course-time">
7 min
</div>
</div>
</a>
<nav role='navigation'>
<ul>
<li><a class="js-nav-item" href="#js-top">5.1 - Introduction and Overview</a></li>
<li><a class="js-nav-item" href="#js-code-sample">5.2 - Code Sample</a></li>
<li><a class="js-nav-item" href="#js-video-lesson">5.3- Instructor Video Lesson</a></li>
<li><a class="js-nav-item" href="#js-code-challenge">5.4 - Code Challenge</a></li>
<li><a class="js-nav-item" href="#js-quiz">5.5 - Roundup Quiz</a></li>
<li><a class="js-nav-item" href="#js-summary">5.6 - Chapter Summary</a></li>
<li>Up Next: Chapter 6 - CSS Transitions and Animations</li>
</ul>
</nav>
<div class="course-nav">
<h4>Lauren Maxwell</h4>
<img src="images/profile.png" alt="">
</div>
</div>
<div class="loader">
<div class="progress">
</div>
</div>
</header>
<section id="js-top" class="chapter">
<div class="wrapper">
<p class="chapter-title">Chapter 5</p>
<h1>Creating Off Canvas Navigation</h1>
<div class="teacher">
<img src="images/mason.png">
<ul class="chapter-meta">
<li>Curated by: <a href="#0">Mason Stewart</a></li>
<li>Duration: 44 min</li>
<li>Difficulty: Intermediate</li>
</ul>
</div>
</div>
</section>
<section id="js-intro" class="intro">
<div class="wrapper">
<div class="intro-text">
<h2>5.1 - Introduction and Overview</h2>
<p>"Off Canvas" patterns are different ways to approach layout where content on the web isn't just laid out in a vertical column. For instance, navigation could be positioned hidden off the left edge of the "canvas" (visible browser window) and slid in on demand.</p>
<img src="images/nav-illustration.png" alt="">
</div>
<div class="sidebar-wrapper">
<div class="sidebar">
<h3>You Might Need:</h3>
<ul class="check-list">
<li>Wireframing</li>
<li>HTML Basics</li>
<li>CSS Layouts</li>
</ul>
</div>
<div class="sidebar">
<h3>Taught at these Locations:</h3>
<ul class="check-list">
<li>Greenville</li>
<li>Austin</li>
<li>Orlando</li>
<li>London</li>
</ul>
</div>
</div>
</section>
<section id="js-code-sample" class="code-sample">
<div class="wrapper">
<div class="intro-text">
<h2>5.2 - Code Sample</h2>
<p>The layout technique here is essentially a two column grid. Only the left column is 0% wide and the right column is 100% wide by default. The left column is the navigation we intend to reveal as needed. With hidden overflow, this column is completely hidden.</p>
</div>
<img src="images/code-snippet.png" alt="">
</div>
</section>
<section id="js-video-lesson" class="video-lesson">
<div class="wrapper">
<div class="intro-text">
<h2>5.3 - Instructor Video Lesson</h2>
<p>Below we'll take a look at our project demo and learn how to code our Off Canvas Navigation.</p>
</div>
<img src="images/video-player.png" alt="">
<div class="box-left">
<h3>Video Downloads:</h3>
<ul class="check-list">
<li class="project-icon">Project File <span>12.5 mb</span></li>
<li class="vid-icon">High Res Video <span>45 mb</span></li>
<li class="flat-icon">Flat Icon Set <span>1 mb</span></li>
</ul>
</div>
<div class="box-right">
<h3>Did you find this video helpful?</h3>
<p>We always love to hear our student's feedback. Please rate this video to help us keep creating more content you'll love.</p>
<img src="images/stars-image.png" alt="">
</div>
</div>
</section>
<section id="js-code-challenge" class="code-challenge">
<div class="wrapper">
<div class="intro-text">
<h2>5.4 - Code Challenge</h2>
<p>Let's complete a few tasks that will better help you understand the project.</p>
</div>
<div class="quiz-header">
<div class="loader">
<div class="progress"></div>
</div>
<span>Challenge 2/4</span>
<p class="question">Change the title of your page from "Title" to "Leave it to Beaver."</p>
<div class="btn-wrapper">
<a href="#0" class="green-btn">Next</a>
<a href="#0" class="black-btn">Help</a>
</div>
</div>
<img src="images/code-editor-body.png" alt="">
</div>
</section>
<section id="js-quiz" class="quiz">
<div class="wrapper">
<div class="intro-text">
<h2>5.5 - Roundup Quiz</h2>
<p>This is a quiz to test your knowledge on this lesson. Feel free to <a href="#">skip this quiz</a> or <a href="#">ask for help</a>.</p>
</div>
<div class="quiz-header">
<div class="loader">
<div class="progress"></div>
</div>
<span>Challenge 2/4</span>
<p class="question">Is it safe to use Off Canvas Navigation on mobile devices?</p>
<div class="btn-wrapper">
<a href="#0" class="green-btn">Next</a>
<a href="#0" class="black-btn">Help</a>
</div>
</div>
<div class="answer-wrapper">
<ul class="quiz-answers">
<li class="js-answer answer">Yes, of course it's safe!</li>
<li class="js-answer answer">No way, man! I wouldn't touch that with Dreamweaver.</li>
<li class="js-answer answer">Time is a flat circle.</li>
</ul>
</div>
</div>
</section>
<section id="js-summary" class="summary">
<div class="wrapper">
<div class="intro-text">
<h2>5.6 - Chapter Summary</h2>
<p>In this chapter you've learned to utilize Off Canvas Navigational patterns for clean and organized menus. Below are a few additional resources to further help your education on this subject.</p>
</div>
<div class="sidebar">
<h3>In this chapter we learned about:</h3>
<ul class="check-list">
<li>Responsive Navigation Patterns</li>
<li>CSS Only Menu Layout</li>
<li>Anthony Colangelo's jPanel Menu</li>
<li>Utilizing free icon sets</li>
</ul>
</div>
<div class="sidebar">
<h3>Recommended reading:</h3>
<img src="images/rwd-book.png">
<span class="book-title">Responsive Web Design</span>
<span class="book-author">by Ethan Marcotte</span>
<p class="book-info">Since it's ground breaking release in 2011, Responsive Web Design remains a fundamental resource for anyone working on the web.</p>
</div>
</div>
</section>
<footer>
<div class="wrapper">
Up Next: Chapter 6 - CSS Transitions and Animations
</div>
</footer>
</body>
</html>