-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.jade
352 lines (276 loc) · 12.3 KB
/
index.jade
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
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
//- ===================================
//- README FOR INDEX.JADE
//- ===================================
//- index.jade is derived from a site-wide master template known as index.layout.030215.1.jade
//- the custom content to build this page is located in the ./includes/ folder...
//- each partial is imported below and represents a different segment of the page
//- please reference these partials for the jade code
//- otherwise to see the final compiled html, see index.html
//- Additional files to reference include...
//- variables.global.jade [contains global variables]
//- mixins.universal.jade [contains commonly used jade mixins for many of my multiple projects]
//- mixins.project.jade [contains project specific mixins that I want available for all later partials and jade code]
//- END README FOR INDEX.JADE
//- ===================================
//- EXTEND FROM MASTER TEMPLATE
//- ===================================
//- for use if multiple web pages are added later on or as practice for a larger size
extends index.layout.030215.1.jade
//- END EXTEND FROM MASTER TEMPLATE
//- ===================================
//- PRIMARY NAVIGATION MENU
//- ===================================
//- the primary navigation menu is located in the index.layout.jade file in its own partial
//- please see nav.042715.1.jade or a similarly named file where the end part 042715 represents month/day/year... see latest version
//- END PRIMARY NAVIGATION MENU
block content
//- include ./includes/heroBlock.042715.1.jade
//- include ./includes/products.042715.1.jade
//- include ./includes/testimonials.042715.1.jade
//- include ./includes/featured.042715.1.jade
//- include ./includes/newsletter.042715.1.jade
// SLIDE OUT SHOPPING CART ------------------------------------------------
////////////////////////////////////////////
// SLIDE OUT SHOPPING CART
//////////////////////////////////////////
// see mixins.project.jade for the html markup in Jade
// the body will need to be set to position relative
// DISPLAY STATUS
// where display: none is default and it is revealed using jQuery Waypoints
// display: none;
+slideOutShoppingCart1
////////////////////////////////////////////
// END SLIDE OUT SHOPPING CART ------------------------------------------------
////////////////////////////////////////////
// HERO BLOCK
/////////////////////////////////////////
section.heroBlock.heroBlock042715
//- use a background image
// IMAGE SHADER ------------------------------------------------
// the image shader is used for placeholder images and prevents the image from obscuring the text
.imageshader
//- this is for lightening the background cover
// END IMAGE SHADER ------------------------------------------------
.wrapper
// COPY TEXT ------------------------------------------------
.copy
h1 Lady
p Rethink your swim wear and take it to the street
//- div
//- //- set the background to transparent so the parent div will provide the background
//- a(href=viewLookBookLink) View the Lookbook
//- this is a case where you wrap the div and the p in the link and style the div
a(href=viewLookBookLink)
div
div.slash
//- the div will hold the before element
p View the Lookbook
//- div.slash
// END COPY TEXT ------------------------------------------------
// FILL SPACE ------------------------------------------------
// this div is used to fill space and force the .copy text to be aligned around the vertical axis at the 50% mark
.fillspace
// END FILL SPACE ------------------------------------------------
////////////////////////////////////////////
////////////////////////////////////////////
// PRODUCTS DISPLAY
/////////////////////////////////////////
// display the products like a storefront
// NEW ARRIVALS SECTION ------------------------------------------------
// this is the New Arrivals section of the page
section.newArrivals
.wrapper
p.introHead The New Arrivals
h2 Trending
+companyLogo1(companyLogoEnabled)
p.subhead Define your wardrobe with accessories
// WARDROBE DISPLAY SECTION
section.wardrobeDisplay
//- the images may require a transparent background
//- the background colour will have to be set
//- little boxes are 211x211px
// LEFT ------------------------------------------------
div.left
// LEFT TOP ------------------------------------------------
div.top
// LEFT TOP LEFT ------------------------------------------------
div.left.wardrobeDrag
//- dimensions 211x420px
h3 Sweater
p.copy Bring our style
p.price $125
+purchaseShader1
// END LEFT TOP LEFT ------------------------------------------------
// LEFT TOP RIGHT ------------------------------------------------
div.right
div.top.wardrobeDrag
+purchaseShader1
div.bottom.wardrobeDrag
+purchaseShader1
// END LEFT TOP RIGHT ------------------------------------------------
// END LEFT TOP ------------------------------------------------
// LEFT BOTTOM ------------------------------------------------
div.bottom
div.left.wardrobeDrag
+purchaseShader1
div.right.wardrobeDrag
+purchaseShader1
// END LEFT BOTTOM ------------------------------------------------
// END LEFT ------------------------------------------------
//- it appears that certain classes have already been used from the left side (i.e. top,bottom,left,right) so unique names need to be assigned
// RIGHT ------------------------------------------------
div.right
// RIGHT TOP ------------------------------------------------
div.top
//- div.left.wardrobeDrag
//- +purchaseShader1
//- div.right.wardrobeDrag
//- +purchaseShader1
div.left.specialDressDrag
+purchaseShader1
div.right.specialDressDrag
+purchaseShader1
//- section.left.specialDressDrag
//- +purchaseShader1
//- section.right.specialDressDrag
//- +purchaseShader1
// END RIGHT TOP ------------------------------------------------
// RIGHT BOTTOM ------------------------------------------------
div.bottom
//- div.left.wardrobeDrag.specialDressDrag
//- //- dimensions 420x420px
//- div.top
//- div.bottom
//- div.copy
//- h3 Full Options
//- p.copy Body and Smiling
//- p.price $399
//- +purchaseShader1
//- div.right.wardrobeDrag.specialDressDrag
//- +purchaseShader1
div.left.specialDressDrag
//- dimensions 420x420px
div.top
div.bottom
div.copy
h3 Full Options
p.copy Body and Smiling
p.price $399
+purchaseShader1
div.right.specialDressDrag
+purchaseShader1
// END RIGHT BOTTOM ------------------------------------------------
// END RIGHT ------------------------------------------------
// END NEW ARRIVALS SECTION ------------------------------------------------
// DRESS COLLECTION SECTION ------------------------------------------------
// this is the Dress Collection section of the page
section.dressCollection
.wrapper
p.introHead Dress Collection
//- jQuery required to give function and enlarge the selected
//- each selection displays a new set
//- when random is clicked write a random function that selects among numbered images each time for that entry image and changes it
//- or the random randomly selects a certain number of divs?
nav
a(href="javascript:void(0)").popular
h2 Popular
span.divider /
a(href="javascript:void(0)").recent
h2 Recent
span.divider /
a(href="javascript:void(0)").random
h2 Random
+companyLogo1(companyLogoEnabled)
// COLLECTION DISPLAY SECTION
//- ===================================
//- COLLECTION DISPLAY
//- ===================================
section.collectionDisplay
+collectionUnit2('chifonFloral','Chifon & Floral Dress','$22.5')
+collectionUnit2('camiStrap','Cami Strap Dress','$23.5')
+collectionUnit2('abstractDDress','Flare Strap Dress','$19.0')
+collectionUnit2('flareStrap','Abstract Dooted Dress','$21.5')
+collectionUnit2('chifonFloral','Chifon & Floral Dress','$22.5')
+collectionUnit2('camiStrap','Cami Strap Dress','$23.5')
+collectionUnit2('flareStrap','Flare Strap Dress','$19.0')
+collectionUnit2('abstractDDress','Abstract Dooted Dress','$21.5')
//- END COLLECTION DISPLAY
// END DRESS COLLECTION SECTION ------------------------------------------------
////////////////////////////////////////////
////////////////////////////////////////////
// TESTIMONIALS
/////////////////////////////////////////
section.testimonials
.wrapper
p.leadIn What does the fox say?
h2 Happy Customers
+companyLogo1(companyLogoEnabled)
//- ===================================
//- TESTIMONIAL SLIDER
//- ===================================
//- to use any of the sliders like bxSlider or flickity you'll have to insert the entries within a ul li
//- you'll have to re-style the slider buttons and remove the previous/next arrows
// TESTIMONIALS ------------------------------------------------
// use either a jQuery slider plugin or custom code it
//- ul.testimonialList
//- li
//- +testimonialEntry1('Kyle James','Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quidem repudiandae, sequi ea delectus ut.')
//- li
//- +testimonialEntry1('Mary Jane','Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quidem repudiandae, sequi ea delectus ut.')
//- li
//- +testimonialEntry1('Peter Parker','Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quidem repudiandae, sequi ea delectus ut.')
ul.testimonialList
li#testimonial1
+testimonialEntry1('Kyle James','Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quidem repudiandae, sequi ea delectus ut.','testimonial1')
li#testimonial2
+testimonialEntry1('Mary Jane','Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quidem repudiandae, sequi ea delectus ut.','testimonial2')
li#testimonial3
+testimonialEntry1('Peter Parker','Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quidem repudiandae, sequi ea delectus ut.','testimonial3')
// END TESTIMONIALS ------------------------------------------------
// TESTIMONIAL SELECTOR NAV ------------------------------------------------
//- testimonial slider selector nav
//- each is a square button and when pressed it turns from base white to yellow
//- I could have used divs however this works as well
ul.selectorNav
li
li
li
// END TESTIMONIAL SELECTOR NAV ------------------------------------------------
//- ===================================
//- END HEADING
////////////////////////////////////////////
////////////////////////////////////////////
// FEATURED ITEMS
/////////////////////////////////////////
//- each press of the previous/next buttons should display a new div
//- you could use jQuery to construct a random selection?
section.featurePanel
.wrapper
section.newIn
+newInEntry1
section.featured
+featuredEntry1
section.top
+topPickEntry1
////////////////////////////////////////////
////////////////////////////////////////////
// NEWSLETTER
/////////////////////////////////////////
section.newsletter
.wrapper
p.leadIn Get latest news and coupons from lady
h2 Subscribe
+companyLogo1(companyLogoEnabled)
// FORM ------------------------------------------------
form(id="newsletter1", method="", action="")
span
//- a FA icon of a paper airplane must be placed ::before the input and/or absolutely positioned
input(type='email', name='email', placeholder='Your Email Address')
// END FORM ------------------------------------------------
////////////////////////////////////////////
//- ===================================
//- FOOTER
//- ===================================
//- the footer is located in the index.layout.jade file in its own partial
//- please see footer.042715.1.jade or a similarly named file where the end part 042715 represents month/day/year... see latest version
//- END FOOTER