Invoice Visual Design Specifications MEC

Size: px

Start display at page:

Download "Invoice Visual Design Specifications MEC"

Rosamond Bailey
5 years ago
Views:

1 Invoice Visual Design Specifications MEC Author Dean Ashworth Version Last Updated February 1, 2012 Page 1

2 Invoice Visual Design Specifications MEC Contents Note on sizes & scale Request Money Request Money No Cookie: Layout...6 Request Money Cookied: Layout...7 Request Money Invoice Summary Module: Details Invoice... 9 Invoice No Cookie: Layout.... Invoice Cookied: Layout Invoice Paid or Canceled Invoice...12 Invoice Merchant Logo: Layout...1 Invoice Expanded Modules: Layout...14 Invoice Expanded Merchant Modules: Paid/Canceled...15 Invoice T&C / Note (Open Module): Layout...16 Invoice Invoice Summary Module in Checkout flow: Layout...17 Invoice Done page: Layout...18 Invoice No Cookie: Details Invoice Cookied: Details Invoice Invoice Summary Module 2: Details Invoice Invoice BTN: Details...22 Invoice Invoice Details Module: Details...2 Invoice Merchant Details Module: Details...24 Invoice Recipient Details Module: Details...25 Invoice T&C / Note (Open Module): Details Common elements Invoice & Request Money Error Handling: Layout & Elements...28 General JS Disabled: Invoice Summary Layout...29 General JS Disabled: Merchant Details Layout....0 Related Documents IxD Invoice_iPhone_v1.0.pdf VD Assets (AI layout files) Invoice: paypal_mec_invoice_111111_v_cs4_lc.ai Request Payment: paypal_mec_reqpay_1117_cs4_v07_lc.ai About this document Please note that final files are delivered in AI CS4 All sizes are at 0% 20 x 480 px Additional assets (see final chapter) are provided at double size Indicators Note Additional comment.? Open Issues and Questions! Assumptions 4. Images... 1 General New Images for Invoice...2 Page 2

3 Note on sizes & scale Page

4 Note on sizes & scale Example of VD specification used throughout this document PIXEL MEASUREMENTS Invoice Summary Module 1 $XX.XX USD Choose a way to pay Width: 20 px x 480 px Final screens will be 200% In order to align with this, please double all pixel annotations. Log in with and password: TYPE MEASUREMENTS Font sizes are specified in pixels with 1.2 line spacing. Login Module Cookied Password Log In CHAPTER 4. IMAGES As requested, these images are at 200% Don t have a PayPal Account? Pay with a card Page 4

5 1. Request Money Page 5

6 Request Money No Cookie: Layout $15.00 USD Summary module Choose a way to pay Title & PP logo & lock Log in to PayPal or Choice - as per existing choice page in mwps Pay with a card Page 6

7 Request Money Cookied: Layout First View Invoice element expanded $15.00 USD $15.00 USD Summary module expanded Login From: John Appleseed Payment for: Goods Log in with and password: Login Title & PP logo & lock Password Log In Log in with and password: Login module Includes phone & pin login as per MEC flow Don t have a PayPal Account? Pay with a card Password Log In Don t have a PayPal Account? Pay with a card Pay with a card - secondary in text style Page 7

8 Request Money Invoice Summary Module: Details 1 Invoice Summary Module PP_MEC_reqP_02_1mod_summary_01_CS4.ai $XX.XX USD 1 Same layout as cart module in existing MEC / mwps (new icon and title) Same layout as expanded cart module in existing MEC / mwps (new content) $XX.XX USD 15 From: [NAME] @quitelongurlname.com Payment for: Goods 2 Page 8

9 2. Invoice Page 9

10 Invoice No Cookie: Layout First View (Safari iphone) Invoice from [merchant name] Back Back Note to recipient Choose a way to pay Log in to Pay with a card Summary module Title Options to login or pay with card (new screen) Pellentesque nisi odio, feugiat tincidunt porta vitae, ullamcorper eu velit. Sed eu lectus at sem vestibulum volutpat ac nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae pretium magna. Nam lacinia metus eget turpis fringilla eu ornare mauris adipiscing. Pellentesque ante ante, iaculis pellentesque porttitor nec, fringilla ut risus. Proin ut ligula non ante porta tincidunt in is Pellentesque ante ante, iaculis pellentesque porttitor nec, fringilla ut risus. Proin ut ligula non ante porta tincidunt in non erat. Aliquam scelerisque scelerisque sagittis. Curabitur ultricies commodo dui sit amet vestibulum. Nullam at justo elit, id blandit ante. Etiam sodales tellus lacus, sed pellentesque justo. Payment due: /1/2011 Proin ut ligula non ante porta tincidunt in non erat. Aliquam scelerisque scelerisque sagittis. Curabitur ultricies commodo dui sit amet vestibulum. Nullam at justo elit, id blandit ante. Etiam sodales tellus lacus, sed pellentesque justo. Etiam lorem mi, facilisis eget ornare malesuada, mollis sed magna. Curabitur quis justo nec arcu pharetra dapibus. Vivamus vel adipiscing enim. Aenean elementum varius dolor, ultricies euismod urna gravida sit amet. Curabitur aliquet varius tortor eu ultrices. Sed nulla ligula, mattis et varius at, iaculis sed odio. Note to recipient Page

11 Invoice Cookied: Layout Screen as seen in Safari (iphone) 12:4 PM [Business name name or or address] Invoice from [merchant name] total: USD Summary module Pay Pay with with Pay with Continue with PP (new screen) Choose a way to pay Log in to Joe s Store Status: Payment due: due: /1/2011 Payment due: /1/2011 Pay with a card Terms Terms and and conditions Pellentesque nisi nisi odio, odio, feugiat feugiat tincidunt Pellentesque nisi odio, feugiat tincidunt... Payment due: /1/2011 Note to recipient Proin ut ligula non ante porta tincidunt in... Note to recipient Proin ut ligula non ante porta tincidunt in... Page 11 AT& [Bu

12 Invoice Paid or Canceled Invoice Paid Canceled Paid Canceled Status: Paid with PayPal on /2/2011 Pellentesque nisi odio, feugiat tincidunt... Status: Canceled on 11/22/2011 by Joe's Computer Store Pellentesque nisi odio, feugiat tincidunt... Page 12

13 Invoice Merchant Logo: Layout Merchant logo (DESCOPED) Pay with Payment due: /1/2011 Pay with Wireless Mouse Unit price: $20.00 Quantity: 2 Description: (optional) example text Date: /1/2011 Hard Drive Unit price: $10.00 Quantity: 2 Date: /1/2011 $40.00 $10.00 Pellentesque nisi odio, feugiat tincidunt... Pellentesque nisi odio, feugiat tincidunt... Subtotal: Discount: Shipping and handling: Tax HK %: Tax KK 20%: $ $20.00 $.00 $16.00 $2.00 Note to recipient Proin ut ligula non ante porta tincidunt in... Note to recipient Proin ut ligula non ante porta tincidunt in... TOTAL: Done Pay with Payment due: /1/2011 Page 1 Joe Campbell 1245 N Street Name

14 ress] USD t... $40.00 $10.00 $ $20.00 $.00 $16.00 $2.00 USD in... Invoice Expanded Modules: Layout [Business name Pay with or address] Invoice details Wireless Mouse $40.00 Unit price: Joe s $20.00 Computer Store Wireless Mouse $40.00 Quantity: Status: 2 Pending Unit price: $20.00 Description: Payment (optional) due: /1/2011 example text Quantity: 2 Date: /1/2011 Description: (optional) example text 1245 N Street Name Date: Hard /1/2011 Drive $10.00 City, ST Zip Unit price: $10.00 Hard Drive $10.00 Quantity: United 2 States Unit price: $10.00 Date: Phone: /1/ Quantity: 2 Date: /1/2011 joe@computerstore.com Subtotal: $ Subtotal: Discount: Invoice number: 006 $ $20.00 Discount: Shipping Invoice and date: handling: /1/2011 -$20.00 $.00 Shipping Tax HK Payment and %: terms: Due on receipt handling: $.00 $16.00 Tax Tax HK %: KK 20%: $16.00 $2.00 Tax KK 20%: $2.00 TOTAL: TOTAL: Expanded invoice module Pellentesque Pay with nisi odio, feugiat tincidunt... Pay with Note to recipient Payment due: /1/2011 Payment due: /1/2011 Pellentesque nisi odio, feugiat tincidunt... Proin ut ligula non ante porta tincidunt in... Note to recipient Proin ut ligula non ante porta tincidunt in... Expanded merchant module Pay with Payment due: /1/ N Street Name City, ST Zip United States Phone: joe@computerstore.com Invoice number: Invoice date: Payment terms: 006 /1/2011 Due on receipt Pellentesque nisi odio, feugiat tincidunt... Note to recipient Proin ut ligula non ante porta tincidunt in... Pay with Expanded recipient module Payment due: /1/2011 Bill to: ACE Business Name Anne Name 155 N 90th St Phoenix, AZ United States Ship to: Test Business (Shipping) Shipping Info First Last 66 S Elm Street Scottsdale, AZ United States Pellentesque nisi odio, feugiat tincidunt... Note to recipient Proin ut ligula non ante porta tincidunt in... [Business name Pay with or address] Pay Joe s withcomputer Store Joe s Computer recipient@domain.com Store Payment Terms due: and /1/2011 conditions Pellentesque nisi odio, feugiat tincidunt... Note recipient@domain.com to Proin ut ligula non ante porta tincidunt in... Bill to: ACE Business Name Anne Name 155 N 90th St Phoenix, AZ United States Ship to: Test Business (Shipping) Shipping Info First Last 66 S Elm Street Scottsdale, AZ United States Payment due: /1/2011 Pellentesque nisi odio, feugiat tincidunt... Note to recipient Proin ut ligula non ante porta tincidunt in... Payment to for invoice Page 14 $ [Business n Invoice tot Invoice deta Pay Joe s Statu Paym Recipient deta recipient@ Terms and co Pellentesque nis Note to recipie Proin ut ligula no [Busin [Business

15 Invoice Expanded Merchant Modules: Paid/Canceled Paid Canceled Paid Canceled Status: Paid with PayPal on /2/2011 Joe Campbell 1245 N Street Name City, ST Zip United States Phone: Fax: joe@computerstore.com Other Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor commodo sem quis. Invoice number: Invoice date: Payment terms: Payment due: 006 /1/2011 Due on receipt /1/2011 Status: Cancelled on 11/22/2011 by Joe's Computer Store Joe Campbell 1245 N Street Name City, ST Zip United States Phone: Fax: joe@computerstore.com Other Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor commodo sem quis. Invoice number: Invoice date: Payment terms: Payment due: 006 /1/2011 Due on receipt /1/2011 Page 15

16 Invoice T&C / Note (Open Module): Layout Terms & Conditions (sample text) Note to recipient (sample text) 12:4 PM Back Back Terms Terms and and conditions Back Back 12:4 PM Note Note to to recipient Pellentesque nisi nisi odio, odio, feugiat feugiat tincidunt tincidunt porta porta vitae, vitae, ullamcorper eu velit. eu velit. Sed Sed eu lectus eu lectus at at sem sem vestibulum vestibulum volutpat volutpat ac nec ac ipsum. nec ipsum. Cum Cum sociis sociis natoque natoque penatibus penatibus et magnis et magnis dis dis parturient parturient montes, montes, nascetur nascetur ridiculus ridiculus mus. mus. Duis Duis vitae vitae pretium pretium magna. magna. Nam Nam lacinia lacinia metus metus eget eget turpis turpis fringilla fringilla eu ornare eu ornare mauris mauris adipiscing. adipiscing. Pellentesque ante ante, ante, iaculis iaculis pellentesque porttitor porttitor nec, nec, fringilla fringilla ut risus. ut risus. Proin Proin ut ligula ut ligula non ante non ante porta porta tincidunt tincidunt non in non erat. erat. Aliquam Aliquam scelerisque scelerisque sagittis. sagittis. Curabitur Curabitur ultricies ultricies commodo commodo dui sit dui amet sit amet vestibulum. Nullam Nullam at justo at justo elit, id elit, blandit id blandit ante. ante. Etiam Etiam sodales sodales tellus tellus lacus, lacus, sed pellentesqutesque justo. sed pellen- justo. Proin Proin ut ligula ut ligula non ante non ante porta porta tincidunt tincidunt is in is Pellentesque ante ante, ante, iaculis iaculis pellentesque porttitor porttitor nec, nec, fringilla fringilla ut risus. ut risus. Proin Proin ut ligula ut ligula non ante non ante porta porta tincidunt tincidunt non in erat. non erat. Aliquam Aliquam scelerisque scelerisque sagittis. sagittis. Curabitur Curabitur ultricies ultricies commodo commodo dui sit dui amet sit amet vestibulum. Nullam Nullam at justo at justo elit, id elit, blandit id blandit ante. ante. Etiam Etiam sodales sodales tellus tellus lacus, lacus, sed sed pellentesque justo. justo. Etiam Etiam lorem lorem mi, facilisis mi, facilisis eget eget ornare ornare malesuada, mollis mollis sed magna. sed magna. Curabitur Curabitur quis quis justo justo nec arcu nec arcu pharetra pharetra dapibus. dapibus. Vivamus Vivamus vel vel adipiscing adipiscing enim. enim. Aenean Aenean elementum elementum varius varius dolor, dolor, ultricies ultricies euismod euismod urna urna gravida gravida sit amet. sit amet. Curabitur Curabitur aliquet aliquet varius varius tortor tortor eu ultrices. eu ultrices. Sed Sed nulla nulla ligula, ligula, mattis mattis et varius et varius at, iaculis at, iaculis sed sed odio. odio. 12:4 PM 12:4 PM [Business name name or or address] [Business name name or or address] Page 16 Invoice total: $ USD Invoice total: $ USD

17 Invoice Invoice Summary Module in Checkout flow: Layout Expanded summary module in checkout flow Pay with All Invoice Screens: Layout paypal_mec_invoice_111111_v_cs4_lc.ai Payment due: /1/2011 Payment to for invoice Subtotal: Shipping and handling: TOTAL: $ $ $.00 Payment due: /1/2011 When no shipping and handling Payment is applied, terms: item price Due on receipt Pellentesque nisi odio, feugiat tincidunt and... entire subtotal section are hidden. Done Note to recipient Proin ut ligula non ante porta tincidunt in... Joe Campbell 1245 N Street Name Note City, ST Zip Elements as per Checkout United User Experience. States Phone: Item name uses standard joe@computerstore.com format: Payment to <Business name or address> for <invoice number>. All item prices, discount and taxes Invoice are bundled number: into single line 006 item price. Invoice date: /1/2011 Page 17

18 Invoice Done page: Layout Payment completed: $15.00 USD Paid to: John Appleseed Ship to: David Bowie 21 Main Ave San Jose, CA 951 Transaction details David, you just completed your payment. Transaction ID: GJ207580D Confirmation Return to invoice details Link back to invoice details page Page 18

19 Invoice - No Cookie: Details 1 1 Invoice Cookied PP_MEC_invoice_02_nocookie_01_CS4.ai Invoice Summary Module 2 A 1 Helvetica Bold 16pt, centred, # A Gradient: #FFFFFF > #E4DFBF Choose a way to pay 2 2 Helvetica Bold 15pt, centred, #82560F B #E4DFBF Invoice BTN No Cookie 1 Log in to Invoice BTN No Cookie 2 20 Pay with a card B Payment due: /1/2011 Invoice Details Module Pellentesque nisi odio, feugiat tincidunt... Note to recipient Proin ut ligula non ante porta tincidunt in... Page 19

20 Invoice Cookied: Details 1 1 Invoice Cookied PP_MEC_invoice_01_cookied_01_CS4.ai Invoice Summary Module 2 A 1 Helvetica Bold 16pt, centred, # A Gradient: #FFFFFF > #E4DFBF 20 Invoice BTN Cookied Pay with B #E4DFBF 20 B Payment due: /1/2011 Invoice Details Module Pellentesque nisi odio, feugiat tincidunt... Note to recipient Proin ut ligula non ante porta tincidunt in... Page 20

21 Invoice Invoice Summary Module 2: Details 1 2 Invoice Summary Module 2 PP_MEC_invoice_0_2mod_summary_01_CS4.ai $XX.XX USD Helvetica Bold 14pt, left, # A Stroke colour # ; 1px Helvetica Regular 1pt, left, # B Module box 22 Item Name Unit price: $XX.XX Quantity: # Description: (optional) example text Date: MM/DD/YYYY Item Name Unit price: $XX.XX Quantity: # Date: MM/DD/YYYY Subtotal: Discount: Shipping and handling: Tax HK %: Tax KK 20%: TOTAL: $XX.XX USD $XX.XX $XX.XX $XX.XX -$XX.XX $XX.XX $XX.XX $XX.XX $XX.XX USD A B Helvetica Bold 14pt, right, #6672 Helvetica Regular 14pt, right, #6672 Helvetica Bold 1pt, left, # Helvetica Bold 1pt, right, # Helvetica Regular 1pt, right, # Gradient: Type 0, #FFFFFF > #F8F6EC Stroke: 1px, inside # Box shadow: # d9d8d7, Blur 2px, offset Y1 72 Page 21

22 Invoice Invoice BTN: Details 294 Invoice BTNS PP_MEC_invoice_04_btns_01_CS4.ai horizontally centred 40 vertically centred Pay with A 1 Helvetica Bold 16pt, centred, #1B664 A Button style: 40 vertically centred Log in to horizontally centred Effects on both text and logo Shadow: #FFFFFF, no blur, offset Y1 Gradient: #FFEBC5 > #FAA919 Stroke: 1px, inside #C8808 Corner radius: 6px Box shadow: # d9d8d7, Blur 2px, offset Y1 horizontally centred 40 vertically centred Pay with a card 1! Button states: please align with MEC current status. Assume that buttons are coded and not graphical. Page 22

23 Invoice Invoice Details Module: Details Invoice Details Module PP_MEC_invoice_05_invoiceMod_01_CS4.ai Merchant Details Payment due: /1/ Recipient Details Pellentesque nisi odio, feugiat tincidunt... A 1 2 Helvetica Bold 16pt, left, # Helvetica Bold 14pt, left, # Helvetica Regular 1pt, left, # A B Gradient: #FFFFFF > #E6E6E6 Solid: #E6E6E6 Module style: Note to recipient Note to recipient Proin ut ligula non ante porta tincidunt in... B Gradient: #FFFFFF > #F2F2F2 Stroke: 1px, inside # Corner radius: 6px Box shadow: # d9d8d7, Blur 2px, offset Y1 20 Page 2

24 Invoice Merchant Details Module: Details i i Invoice Details Module PP_MEC_invoice_05_invoiceMod_02_CS4.ai Payment due: /1/2011 ii 1 Invoice Details Module (with Merchant logo - DESCOPED) PP_MEC_invoice_05_invoiceMod_05_CS4.ai Helvetica Regular 1pt, left, # A Open / close buttons MEC 12 Payment due: /1/ N Street Name City, ST Zip United States Phone: joe@computerstore.com Invoice number: Invoice date: Payment terms: /1/2011 Due on receipt A Helvetica Regular 1pt, left, # B Module style: Gradient: #FFFFFF > #F2F2F2 Stroke: 1px, inside # Corner radius: 6px Box shadow: # d9d8d7, Blur 2px, offset Y1 294 ii Joe s Computer Store Payment due: Payment /1/2011 due: /1/ Page 24

25 Invoice - Recipient Details Module: Details Invoice Details Module PP_MEC_invoice_05_invoiceMod_0_CS4.ai 1 Helvetica Bold 1pt, left, # A Open / close buttons MEC A 2 Helvetica Regular 1pt, left, # Bill to: ACE Business Name Anne Name 155 N 90th St Phoenix, AZ United States Ship to: Test Business (Shipping) Shipping Info First Last 66 S Elm Street Scottsdale, AZ United States Page 25

26 Invoice T&C / Note (open module): Details 2 2 Invoice Details Module PP_MEC_invoice_05_invoiceMod_06_CS4.ai Back Title Text A 2 Pellentesque nisi odio, feugiat tincidunt porta vitae, ullamcorper eu velit. Sed eu lectus at sem vestibulum volutpat ac nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae pretium magna. Nam lacinia metus eget turpis fringilla eu ornare mauris adipiscing. Pellentesque ante ante, iaculis pellentesque porttitor nec, fringilla ut risus. 1 1 Helvetica Reg and/or Bold 1pt, left, # Max. 1,000 characters A B Mobile MEC Payment header Invoice BK gradient (see page 22) Proin ut ligula non ante porta tincidunt in non erat. Aliquam scelerisque scelerisque sagittis. Curabitur ultricies commodo dui sit amet vestibulum. Nullam at justo elit, id blandit ante. Etiam sodales tellus lacus, sed pellentesque justo. B 294 Page 26

27 . Common elements Page 27

28 Invoice & Request Payment Error Handling: Layout & Elements Errors as defined by MEC All Request Payment Screens: Layout paypal_mec_reqpay_1117_cs4_v07_lc.ai $15.00 USD Choose a way to pay Sample error message Lorem ipsum sit amet consectetuer adipiscing elit sed diam nibh. Sample alert message Lorem ipsum sit amet consectetuer adipiscing elit sed diam nibh. Note Elements as per Checkout User Experience. Please make sure you enter address and password correctly. Sample confirmation message Lorem ipsum dolor sit adipis cing elit sed diam nibh. Log in with and password: name .com Log In Sample notification message Lorem ipsum consectetuer adipiscing elit sed diam nibh. Yellow BG: #FFFFCC 50%, Interior stroke 1px, #FFCF0F Green BG: #F8FEEE, Interior stroke 1px, #C4DE95 Blue BG: #E8F1FA, Interior stroke 1px, #81A4C6 Don t have a PayPal Account? Pay with a card Page 28

29 General JS Disabled: Invoice Summary Layout Modules open in new screen 12:4 PM 12:4 PM All Invoice Screens: Layout paypal_mec_invoice_111111_v_cs4_lc.ai [Business name name or or address] [Business name name or or address] Invoice total: USD Invoice total: USD Note Pay Pay with with Joe s Store Status: Payment due: due: /1/2011 Wireless Mouse Mouse $40.00 $40.00 Unit Unit price: price: $20.00 $20.00 Quantity: 2 2 Description: (optional) example text text Date: Date: /1/2011 Hard Hard Drive Drive $10.00 Unit Unit price: price: $10.00 Quantity: 2 2 Date: Date: /1/2011 Elements as per Checkout User Experience. details Terms Terms and and conditions Pellentesque nisi nisi odio, odio, feugiat feugiat tincidunt Subtotal: Discount: Shipping and handling: Tax Tax HK HK %: %: Tax Tax KK KK 20%: 20%: $ $ $20.00 $.00 $.00 $16.00 $16.00 $2.00 $2.00 Note Note to to recipient Proin Proin ut ligula ut ligula non non ante ante porta porta tincidunt... in... TOTAL: USD Done Done 12:4 PM 12:4 PM [Business name name or or address] [Business name name or or address] Invoice total: USD Pay Pay with with Joe s Store Status: Payment due: due: /1/2011 Page 29 s] Joe s Store Joe Joe Campbell N Street N Street Name Name City, City, ST ST Zip Zip

30 Note Note to to recipient Proin Proin ut ut ligula ligula non non ante ante porta porta tincidunt in TOTAL: General JS Disabled: Merchant Details Layout Done USD Modules open in new screen 12:4 PM 12:4 PM All Invoice Screens: Layout paypal_mec_invoice_111111_v_cs4_lc.ai [Business name or or address] [Business name or or address] total: Pay Pay with with USD Joe s Store Status: Payment due: due: /1/2011 Note Elements as per Checkout User Experience. ] Joe s Store Status: Payment due: due: /1/ Terms and and conditions Pellentesque nisi nisi odio, odio, feugiat feugiat tincidunt Note Note to to recipient Proin Proin ut ut ligula ligula non non ante ante porta porta tincidunt in Joe Joe Campbell N Street N Street Name Name City, City, ST ST Zip Zip United United States States Phone: joe@computerstore.com Invoice number: Invoice date: date: /1/2011 Payment terms: terms: Due Due on on receipt receipt Done Page 0

31 4. Images Page 1

32 General New Images for Invoice ICO Invoice (invoice summary module) New images for Invoice (200% of actual size) PP_MEC_invoice_images_01_CS4.ai IMG Paper Fold (invoice details module) BK beige gradient (layout - behind invoice summary module) BK grey gradient (invoice details module) Page 2

BOOTSTRAP AFFIX PLUGIN

BOOTSTRAP AFFIX PLUGIN http://www.tutorialspoint.com/bootstrap/bootstrap_affix_plugin.htm Copyright tutorialspoint.com The affix plugin allows a to become affixed to a location on the page. You can