/cms/style-guide.html

https://github.com/convio/Feeding-America-2014-Redesign · HTML · 908 lines · 859 code · 47 blank · 2 comment · 0 complexity · a6fca412d22b4012ffcc4e932770342d MD5 · raw file 

    

  1. <div class="two-column">
    2. 

  2.   <div class="container">
    3. 

  3.     <div class="column-1">
    4. 

  4.       <div id="page-title">
    5. 

  5.         <h1 class="page-title">Page Title Gotham Med</h1>
    6. 

  6.       </div><!--/#page-title-->
    7. 

  7.       <div id="page-description">
    8. 

  8.         <p><strong>Intro line for paragraphs.</strong></p>
    9. 

  9.         <p>Intro paragraph Gotham font-weight 200 18/24 duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
    10. 

  10.       </div><!--/#page-description-->
    11. 

  11.       <div id="body-content">
    12. 

  12.         <p><img src="/assets/images/klein.jpg" alt="alttext" border="0" style="float: right; margin: 0px 0px 25px 25px;" /></p>
    13. 

  13.         <p>Gotham Book 14/20 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    14. 

  14.         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <a href="#">Learn More.</a></p>
    15. 

  15.         <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
    16. 

  16.         <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    17. 

  17.         <p><a href="#">More Info Link or Learn More Etc<span> &rsaquo;</span></a></p>
    18. 

  18.         <h2>Subheading H2</h2>
    19. 

  19.         <p>Gotham Book 14/20 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    20. 

  20.         <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    21. 

  21.         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa. <a href="#">Learn More.</a> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugitsed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    22. 

  22.         <p><a href="#">More Info Link or Learn More Etc<span> &rsaquo;</span></a></p>
    23. 

  23.         <p class="green" style="padding: 20px; margin-left: -20px;"><a href="/z-testing/color-palette-exploration.html">Links on a colored background will look like this<span> &rsaquo;</span></a></p>
    24. 

  24.         <h3>Subheading H3 GM 26/30 and it could be a longer title (22/26 for phone)</h3>
    25. 

  25.         <h4>Subheading H4 GM 22/26 and it could be a longer title (20/24 for phone)</h4>
    26. 

  26.         <h5>Subheading H5 GM 20/24 and it could be a longer title that spans to two lines or more. (18/22 for phone)</h5>
    27. 

  27.         <h6>Subheading H6 GM 20/24 and it could be a longer title (18/22 for phone)</h6>
    28. 

  28.         <hr>
    29. 

  29.         <h2>Buttons</h2>
    30. 

  30.         <p>Additional detail located at <a href="/z-testing/color-palette-exploration.html">/z-testing/color-palette-exploration.html</a></p>
    31. 

  31.         <div class="colors-test">
    32. 

  32.           <div class="two-boxes">
    33. 

  33.             <div class="half-width">
    34. 

  34.               <p><a href="#" class="grainbutton purple">Share Your Story</a></p>
    35. 

  35.               <p><a href="#" class="grainbutton orange">Share Your Story</a></p>
    36. 

  36.               <p><a href="#" class="grainbutton green">Share Your Story</a></p>
    37. 

  37.               <p><a href="#" class="grainbutton blue">Share Your Story</a></p>
    38. 

  38.               <p><a href="#" class="grainbutton red">Share Your Story</a></p>
    39. 

  39.             </div><!--/.half-width-->
    40. 

  40.             <div class="half-width">
    41. 

  41.               <p><a href="#" class="button purple">Act Now</a></p>
    42. 

  42.               <p><a href="#" class="button orange">Act Now</a></p>
    43. 

  43.               <p><a href="#" class="button green">Act Now</a></p>
    44. 

  44.               <p><a href="#" class="button blue">Act Now</a></p>
    45. 

  45.               <p><a href="#" class="button red">Act Now</a></p>
    46. 

  46.             </div><!--/.half-width-->
    47. 

  47.             <div class="clearfix"></div>
    48. 

  48.           </div><!--/.two-boxes-->
    49. 

  49.         </div><!--/.colors-test-->
    50. 

  50.         <hr>
    51. 

  51.         <h2>Quote</h2>
    52. 

  52.         <div class="quote">
    53. 

  53.           <div class="left">
    54. 

  54.             <div class="quote-text">“We are committed to leveraging our leadership in food and agriculture to tackle the complex challenge of feeding the world with our domestic partner, Feeding America.”</div>
    55. 

  55.             <div class="quote-by">— Greg Page | Chairman of the Board and Chief Executive Officer, Cargill</div>
    56. 

  56.           </div><!--/.left--><div class="right">
    57. 

  57.             <img src="/assets/images/jeff_bexos.jpg" alt="alttext" border="0">
    58. 

  58.           </div><!--/.right-->
    59. 

  59.           <div class="clearfix"></div>
    60. 

  60.         </div><!--/.quote-->
    61. 

  61.         <hr>
    62. 

  62.         <h2>Multimedia</h2>
    63. 

  63.         <div class="video-container"><iframe src="//www.youtube.com/embed/9Hw3e--ECEk?html5=1&amp;controls=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe></div>
    64. 

  64.         <hr>
    65. 

  65.         <h2>List Styles</h2>
    66. 

  66.         <p>List style type 1: seeds (to be used only for most essential points)</p>
    67. 

  67.         <ul class="grains">
    68. 

  68.           <li>Read stories from others.</li>
    69. 

  69.           <li>Share your story or comment on issues in your state.</li>
    70. 

  70.           <li>Plot yourself on the map.</li>
    71. 

  71.           <li>Share social info to connect with other activists in your community.</li>
    72. 

  72.         </ul>
    73. 

  73.         <p>&nbsp;</p>
    74. 

  74.         <p>List style type 2: circles</p>
    75. 

  75.         <ul class="circles">
    76. 

  76.           <li>Read stories from others.</li>
    77. 

  77.           <li>Share your story or comment on issues in your state.</li>
    78. 

  78.           <li>Plot yourself on the map.</li>
    79. 

  79.           <li>Share social info to connect with other activists in your community.</li>
    80. 

  80.         </ul>
    81. 

  81.         <p>&nbsp;</p>
    82. 

  82.         <p>List (2 levels)</p>
    83. 

  83.         <ul>
    84. 

  84.           <li>Proin gravida nibh vel velit auctor aliquet.
    85. 

  85.             <ul>
    86. 

  86.               <li>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris nisi elit consequat.</li>
    87. 

  87.               <li>Proin gravida nibh vel velit auctor aliquet. Nam nec tellus a odio tincidunt auctor a ornare odio.</li>
    88. 

  88.               <li>Duis sed odio sit amet nibh vulputate cursus a sit amet.</li>
    89. 

  89.             </ul>
    90. 

  90.           </li>
    91. 

  91.           <li>Aenean sollicitudin, lorem quis bibendum auctor</li>
    92. 

  92.           <li>Morbi accumsan ipsum velit.</li>
    93. 

  93.           <li>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.</li>
    94. 

  94.         </ul>
    95. 

  95.         <p>&nbsp;</p>
    96. 

  96.         <p>Numbered List (2 levels)</p>
    97. 

  97.         <ol>
    98. 

  98.           <li>Proin gravida nibh vel velit auctor aliquet.
    99. 

  99.             <ol>
    100. 

  100.               <li>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris nisi elit consequat.</li>
    101. 

  101.               <li>Proin gravida nibh vel velit auctor aliquet. Nam nec tellus a odio tincidunt auctor a ornare odio.</li>
    102. 

  102.               <li>Duis sed odio sit amet nibh vulputate cursus a sit amet.</li>
    103. 

  103.             </ol>
    104. 

  104.           </li>
    105. 

  105.           <li>Aenean sollicitudin, lorem quis bibendum auctor</li>
    106. 

  106.           <li>Morbi accumsan ipsum velit.</li>
    107. 

  107.           <li>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.</li>
    108. 

  108.         </ol>
    109. 

  109.         <hr>
    110. 

  110.         <p class="req">Required</p>
    111. 

  111.         <h2>Comments and Other Forms</h2>
    112. 

  112.         <form action="#">
    113. 

  113.           <label for="style-guide-field-1" class="req">Email Address</label>
    114. 

  114.           <input id="style-guide-field-1" type="text" name="email" />
    115. 

  115.           <label for="style-guide-field-2">Full Name</label>
    116. 

  116.           <input id="style-guide-field-2" type="text" name="name" />
    117. 

  117.           <label for="style-guide-field-3">Dropdown Options</label>
    118. 

  118.           <select id="style-guide-field-3" name="dropdown-options" placeholder="Make a Choice">
    119. 

  119.             <option value="" selected="" disabled="">Make a Choice       </option>
    120. 

  120.             <option value="option-1">Option 1</option>
    121. 

  121.             <option value="option-2">Option 2</option>
    122. 

  122.             <option value="option-3">And a third, longer option</option>
    123. 

  123.             <!-- should we specify a min-width?-->
    124. 

  124.           </select>
    125. 

  125.           <label>Select Date Range</label>
    126. 

  126.           <div class="select-date-range">
    127. 

  127.             <input type="hidden" value="news_date" name="dateType">
    128. 

  128.             <input type="text" id="sidebar-filter-date-from" name="startDate" class="js__datepicker" placeholder="From" />
    129. 

  129.             <input type="text" id="sidebar-sidebar-filter-date-to-date-from" name="endDate" class="js__datepicker" placeholder="To" />
    130. 

  130.           </div>
    131. 

  131.           <label class="req">Radio Button Options</label>
    132. 

  132.           <div class="radios">
    133. 

  133.             <label for="style-guide-field-6-1"><input type="radio" id="style-guide-field-6-1" name="style-guide-field-6" value="choice-1" />Choice 1</label>
    134. 

  134.             <label for="style-guide-field-6-2"><input type="radio" id="style-guide-field-6-2" name="style-guide-field-6" value="choice-2" />Choice 2</label>
    135. 

  135.             <label for="style-guide-field-6-3"><input type="radio" id="style-guide-field-6-3" name="style-guide-field-6" value="choice-3" />I should test if this can include a really long choice that spans two lines, right? Not sure if this will be enough text yet but here goes.</label>
    136. 

  136.           </div><!--/.radios-->
    137. 

  137.           <label for="style-guide-field-7">Your Comments (max 500 characters)</label>
    138. 

  138.           <textarea id="style-guide-field-7" name="comments" maxlength="500"></textarea>
    139. 

  139.           <button type="submit" class="button red">Submit Form Action</button>
    140. 

  140.         </form>
    141. 

  141.         <hr>
    142. 

  142.         <h2>Table Styles</h2>
    143. 

  143.         <table>
    144. 

  144.           <caption>Title of table lorem ipsum</caption>
    145. 

  145.           <thead>
    146. 

  146.           <tr>
    147. 

  147.             <th>&nbsp;</th>
    148. 

  148.             <th>Individual</th>
    149. 

  149.             <th>Non-Profit</th>
    150. 

  150.             <th>Corporation</th>
    151. 

  151.           </tr>
    152. 

  152.           </thead>
    153. 

  153.           <tbody>
    154. 

  154.           <tr>
    155. 

  155.           <td>2010</td>
    156. 

  156.           <td>$290 M</td>
    157. 

  157.           <td>$180 M</td>
    158. 

  158.           <td>$478 M</td>
    159. 

  159.           </tr>
    160. 

  160.           <tr>
    161. 

  161.           <td>2011</td>
    162. 

  162.           <td>$310 M</td>
    163. 

  163.           <td>$220 M</td>
    164. 

  164.           <td>$592 M</td>
    165. 

  165.           </tr>
    166. 

  166.           <tr>
    167. 

  167.           <td>2012</td>
    168. 

  168.           <td>$340 M</td>
    169. 

  169.           <td>$270 M</td>
    170. 

  170.           <td>$769 M</td>
    171. 

  171.           </tr>
    172. 

  172.           <tr>
    173. 

  173.           <td>2013</td>
    174. 

  174.           <td>$370 M</td>
    175. 

  175.           <td>$210 M</td>
    176. 

  176.           <td>$812 M</td>
    177. 

  177.           </tr>
    178. 

  178.           <tr>
    179. 

  179.           <td>2014</td>
    180. 

  180.           <td>$410 M</td>
    181. 

  181.           <td>$340 M</td>
    182. 

  182.           <td>$989 M</td>
    183. 

  183.           </tr>
    184. 

  184.           </tbody>
    185. 

  185.         </table>
    186. 

  186.         <hr>
    187. 

  187.         <h2>Special Box</h2>
    188. 

  188.         <h3>One box</h3>
    189. 

  189.         <div class="special-box">
    190. 

  190.           <h5>Mission Partners</h5>
    191. 

  191.           <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <a href="#">More Info<span> &rsaquo;</span></a></p>
    192. 

  192.         </div><!--/.special-box-->
    193. 

  193.         <h3>Two boxes</h3>
    194. 

  194.         <div class="two-boxes">
    195. 

  195.           <div class="half-width">
    196. 

  196.             <div class="special-box">
    197. 

  197.               <h5>Supporting Partners</h5>
    198. 

  198.               <p>Quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <a href="#">More Info<span> &rsaquo;</span></a></p>
    199. 

  199.             </div><!--/.special-box-->
    200. 

  200.           </div><!--/.half-width-->
    201. 

  201.           <div class="half-width">
    202. 

  202.             <div class="special-box">
    203. 

  203.               <h5>Current Promotions</h5>
    204. 

  204.               <p>Quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <a href="#">More Info<span> &rsaquo;</span></a></p>
    205. 

  205.             </div><!--/.special-box-->
    206. 

  206.           </div><!--/.half-width-->
    207. 

  207.           <div class="clearfix"></div>
    208. 

  208.         </div><!--/.two-boxes-->
    209. 

  209.         <hr>
    210. 

  210.         <h2>Related Content</h2>
    211. 

  211.         <div class="related-content list-items-container">
    212. 

  212.           <h3>Read more [Related Content]</h3>
    213. 

  213.           <div class="list-items">
    214. 

  214.             <div class="list-item">
    215. 

  215.               <div class="list-item-thumbnail"><a href="#"><img src="/assets/images/klein.jpg" alt="alttext" border="0" /></a></div>
    216. 

  216.               <div class="list-item-text">
    217. 

  217.                 <div class="list-item-title"><a href="#">Title of Related Content</a></div>
    218. 

  218.                 <div class="list-item-description">Et ancillae efficiendi eum. Quis enim vituperata ea eam, cu iudico persius efficiantur vel, vis unum reprimique scribentur ex. Vix duis natum ferri cu.</div>
    219. 

  219.               </div><!--/.list-item-text-->
    220. 

  220.               <div class="clearfix"></div>
    221. 

  221.             </div><!--/.list-item-->
    222. 

  222.             <div class="list-item">
    223. 

  223.               <div class="list-item-text">
    224. 

  224.                 <div class="list-item-title"><a href="#">Title of Related Content</a></div>
    225. 

  225.                 <div class="list-item-description">Et ancillae efficiendi eum. Quis enim vituperata ea eam, cu iudico persius efficiantur vel, vis unum reprimique scribentur ex. Vix duis natum ferri cu.</div>
    226. 

  226.               </div><!--/.list-item-text-->
    227. 

  227.               <div class="clearfix"></div>
    228. 

  228.             </div><!--/.list-item-->
    229. 

  229.             <div class="list-item">
    230. 

  230.               <div class="list-item-thumbnail"><a href="#"><img src="/assets/images/klein.jpg" alt="alttext" border="0" /></a></div>
    231. 

  231.               <div class="list-item-text">
    232. 

  232.                 <div class="list-item-title"><a href="#">Title of Related Content</a></div>
    233. 

  233.                 <div class="list-item-description">Et ancillae efficiendi eum. Quis enim vituperata ea eam, cu iudico persius efficiantur vel, vis unum reprimique scribentur ex. Vix duis natum ferri cu.</div>
    234. 

  234.               </div><!--/.list-item-text-->
    235. 

  235.               <div class="clearfix"></div>
    236. 

  236.             </div><!--/.list-item-->
    237. 

  237.           </div><!--/.list-items-->
    238. 

  238.         </div><!--/.related-content-->
    239. 

  239.         <hr>
    240. 

  240.         <h2>List/Post Results with Thumbnails</h2>
    241. 

  241.         <div class="blog-posts list-items-container">
    242. 

  242.           <h3>Blog Posts</h3>
    243. 

  243.           <div class="list-items">
    244. 

  244.             <div class="list-item">
    245. 

  245.               <div class="list-item-thumbnail"><a href="#"><img src="/assets/images/klein.jpg" alt="alttext" border="0" /></a></div>
    246. 

  246.               <div class="list-item-text">
    247. 

  247.                 <div class="list-item-title"><a href="#">Hunger in Alaska by Monica Hake</a></div>
    248. 

  248.                 <div class="list-item-date">July 22, 2013</div>
    249. 

  249.                 <div class="list-item-description">Hunger in America 2014, to be released this year, will be the next iteration of Feeding America’s quadrennial study that examines our network of agencies and the clients whom they serve. Throughout the summer of 2013, volunteer data collectors visited more than 12,000 food distributions across the country and collected more than 60,000 surveys...</div>
    250. 

  250.                 <div class="list-item-tags">Tags: <a href="#">Hunger in America</a>, <a href="#">Hunger Study</a>, <a href="#">Monica Hake</a>, <a href="#">Research</a></div>
    251. 

  251.                 <div class="list-item-by">Posted by <a href="#">Dan Michel</a> on April 16, 2014</div>
    252. 

  252.                 <div class="list-item-comments"><a href="#">Comments (2)</a></div>
    253. 

  253.               </div><!--/.list-item-text-->
    254. 

  254.               <div class="clearfix"></div>
    255. 

  255.             </div><!--/.list-item-->
    256. 

  256.             <div class="list-item">
    257. 

  257.               <div class="list-item-thumbnail"><a href="#"><img src="/assets/images/default-thumbnail.png" alt="alttext" border="0" /></a></div>
    258. 

  258.               <div class="list-item-text">
    259. 

  259.                 <div class="list-item-title"><a href="#">From Whole Foods to the Food Bank: Nikki and Bill’s Story</a></div>
    260. 

  260.                 <div class="list-item-date">April 10, 2014</div>
    261. 

  261.                 <div class="list-item-description">In just a short period of time, my family went from Whole Foods to the food pantry. My husband and I never thought we’d end up needing a food pantry – why would we? We both had college degrees and came from middle-class backgrounds. We’d never been in need before...</div>
    262. 

  262.                 <div class="list-item-tags">Tags: <a href="#">Hunger in America</a>, <a href="#">Hunger Study</a>, <a href="#">Research</a></div>
    263. 

  263.                 <div class="list-item-by">Posted by <a href="#">Colleen Callahan</a> on April 7, 2014</div>
    264. 

  264.                 <div class="list-item-comments"><a href="#">Comments (2)</a></div>
    265. 

  265.               </div><!--/.list-item-text-->
    266. 

  266.               <div class="clearfix"></div>
    267. 

  267.             </div><!--/.list-item-->
    268. 

  268.           </div><!--/.list-items-->
    269. 

  269.           <div class="read-more"><a href="#">Read more [Type] News<span> &rsaquo;</span></a></div>
    270. 

  270.         </div><!--/.blog-posts-->
    271. 

  271.         <hr>
    272. 

  272.         <h2>Image Captions and Styles</h2>
    273. 

  273.         <div class="img-caption" style="margin-right: 20px;">
    274. 

  274.           <img src="/assets/images/klein2.jpg" alt="alttext" border="0" />
    275. 

  275.           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore aliquam quaerat volupta.</p>
    276. 

  276.         </div><!--/.img-caption-->
    277. 

  277.         <div class="img-caption green" style="width: 300px; padding: 10px;">
    278. 

  278.           <img src="/assets/images/klein2.jpg" alt="alttext" border="0" />
    279. 

  279.           <p>Photos on a colored background should have a 1px border #dedede<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    280. 

  280.         </div><!--/.img-caption-->
    281. 

  281.         <hr>
    282. 

  282.         <h2>Lightbox</h2>
    283. 

  283.         <p><a class="lightbox" href="#lightbox-example">Click here</a></p>
    284. 

  284.         <div id="lightbox-example" class="lightbox-content">
    285. 

  285.           <h6>Feeding America free to include</h6>
    286. 

  286.           <p>any variety of media and content. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam. Suspendisse in orci enim.</p>
    287. 

  287.           <p><a href="#">Link to Do More<span> &rsaquo;</span></a></p>
    288. 

  288.         </div><!--/#lightbox-example-->
    289. 

  289.         <hr>
    290. 

  290.         <h2>Pagination</h2>
    291. 

  291.         <div style="display: inline;" class="templateComponent" id="templatelist-535292341"></div>
    292. 

  292.         <hr>
    293. 

  293.       </div><!--/#body-content-->
    294. 

  294.     </div><!--/.column-1-->
    295. 

  295. 

  296. 

  297. 

  298. 

  299. 

  300. 

  301. 

  302.     <div class="column-2">
    303. 

  303.       <ul class="social_icons">
    304. 

  304.         <li class="fbk"><a href="https://www.facebook.com/FeedingAmerica" title="Facebook">facebook</a></li>
    305. 

  305.         <li class="twt"><a href="https://twitter.com/feedingamerica" title="Twitter">twitter</a></li>
    306. 

  306.         <li class="more"><a href="#" title="More">more</a></li>
    307. 

  307.       </ul><!--/.social_icons-->
    308. 

  308.       <div class="clearfix"></div>
    309. 

  309.       <ul class="section-nav">
    310. 

  310.         <li><h4><a href="#">About Us</a></h4></li>
    311. 

  311.         <li><a href="#">Our History</a></li>
    312. 

  312.         <li><a href="#">Our Leadership</a></li>
    313. 

  313.         <li><a href="#">Charitable Ratings</a></li>
    314. 

  314.         <li><a href="#">Annual Report</a></li>
    315. 

  315.         <li class="parentOfActive expanded">
    316. 

  316.           <a href="#">Our Partners</a>
    317. 

  317.           <ul>
    318. 

  318.             <li class="current first inSameFolder">
    319. 

  319.               <a href="#">Food and Fund Partners</a>
    320. 

  320.               <ul>
    321. 

  321.                 <li class="first"><a href="#">Visionary Partners</a></li>
    322. 

  322.                 <li><a href="#">Leadership Partners</a></li>
    323. 

  323.                 <li><a href="#">Mission Partners</a></li>
    324. 

  324.                 <li><a href="#">Supporting Partners</a></li>
    325. 

  325.               </ul>
    326. 

  326.             </li><!--/.parentOfActive.first.inSameFolder-->
    327. 

  327.             <li><a href="#">Media Partners</a></li>
    328. 

  328.             <li><a href="#">Entertainment Council</a></li>
    329. 

  329.             <li><a href="#">Current Promotions</a></li>
    330. 

  330.             <li class="last"><a href="#">Disaster Partners</a></li>
    331. 

  331.           </ul>
    332. 

  332.         </li><!--/.parentOfActive.expanded-->
    333. 

  333.         <li class="last"><a href="#">Job Opportunities</a></li>
    334. 

  334.       </ul><!--/.section-nav-->
    335. 

  335.       <ul class="section-nav">
    336. 

  336.         <li><h4><a href="#">About Us</a></h4></li>
    337. 

  337.         <li><a href="#">Our History</a></li>
    338. 

  338.         <li><a href="#">Our Leadership</a></li>
    339. 

  339.         <li><a href="#">Charitable Ratings</a></li>
    340. 

  340.         <li><a href="#">Annual Report</a></li>
    341. 

  341.         <li class="parentOfActive expanded">
    342. 

  342.           <a href="#">Our Partners</a>
    343. 

  343.           <ul>
    344. 

  344.             <li class="parentOfActive first inSameFolder">
    345. 

  345.               <a href="#">Food and Fund Partners</a>
    346. 

  346.               <ul>
    347. 

  347.                 <li class="first"><a href="#">Visionary Partners</a></li>
    348. 

  348.                 <li class="current parentOfActive inSameFolder"><a href="#">Leadership Partners</a></li>
    349. 

  349.                 <li><a href="#">Mission Partners</a></li>
    350. 

  350.                 <li><a href="#">Supporting Partners</a></li>
    351. 

  351.               </ul>
    352. 

  352.             </li><!--/.parentOfActive.first.inSameFolder-->
    353. 

  353.             <li><a href="#">Media Partners</a></li>
    354. 

  354.             <li><a href="#">Entertainment Council</a></li>
    355. 

  355.             <li><a href="#">Current Promotions</a></li>
    356. 

  356.             <li class="last"><a href="#">Disaster Partners</a></li>
    357. 

  357.           </ul>
    358. 

  358.         </li><!--/.parentOfActive.expanded-->
    359. 

  359.         <li class="last"><a href="#">Job Opportunities</a></li>
    360. 

  360.       </ul><!--/.section-nav-->
    361. 

  361.       <div class="sidebar-promo-box">
    362. 

  362.         <div id="ty-sidebar-promo" class="sidebar-promo icon green">
    363. 

  363.           <img src="/assets/images/heart-icon-white.png" alt="alttext" border="0">
    364. 

  364.           <span class="small">You make our work possible.</span>
    365. 

  365.           <span class="big">Thank you for your ongreening support.</span>
    366. 

  366.         </div><!--/#ty-sidebar-promo-->
    367. 

  367.       </div><!--/.sidebar-promo-box-->
    368. 

  368.       <div class="sidebar-promo-box">
    369. 

  369.         <div id="ty-sidebar-promo" class="sidebar-promo icon blue">
    370. 

  370.           <img src="/assets/images/heart-icon-white.png" alt="alttext" border="0">
    371. 

  371.           <span class="small">You make our work possible.</span>
    372. 

  372.           <span class="big">Thank blue for your ongoing support.</span>
    373. 

  373.         </div><!--/#ty-sidebar-promo-->
    374. 

  374.       </div><!--/.sidebar-promo-box-->
    375. 

  375.       <div class="sidebar-promo-box">
    376. 

  376.         <div id="yourarea-sidebar-promo" class="sidebar-promo standard form gray">
    377. 

  377.           <span class="big">Hunger in Your Area</span>
    378. 

  378.           <span class="small">Use our map to learn about hunger in your community.</span>
    379. 

  379.           <img src="/assets/images/usa_smallgray.png" alt="alttext" border="0">
    380. 

  380.           <form id="yourarea-sidebar-promo-form" action="#">
    381. 

  381.             <input type="text" name="cons_zip_code" class="half-width" placeholder="Enter Zip" />
    382. 

  382.             <div class="half-width">
    383. 

  383.               <button type="submit" class="purple">GO</button>
    384. 

  384.             </div>
    385. 

  385.             <div class="clearfix"></div>
    386. 

  386.           </form><!--/#yourarea-sidebar-promo-form-->          
    387. 

  387.         </div><!--/#yourarea-sidebar-promo-->
    388. 

  388.       </div><!--/.sidebar-promo-box-->
    389. 

  389.       <div class="sidebar-promo-box">
    390. 

  390.         <div class="sidebar-promo icon purple">
    391. 

  391.           <img src="/assets/images/wheat-icon-white.png" alt="alttext" border="0">
    392. 

  392.           <span class="big">Interested in Partnering with Feeding America?</span>
    393. 

  393.           <a href="#" class="grainbutton red">Contact Us</a>
    394. 

  394.         </div><!--/.sidebar-promo-->
    395. 

  395.       </div><!--/.sidebar-promo-box-->
    396. 

  396.       <div class="sidebar-promo-box">
    397. 

  397.         <div id="ty-sidebar-promo" class="sidebar-promo standard blue">
    398. 

  398.           <img src="/assets/images/united.jpg" alt="alttext" border="0">
    399. 

  399.           <span class="small"><br />Did you know you can donate your United Airlines miles to help end hunger?</span>
    400. 

  400.           <a href="#" class="button red">Find Out How</a>
    401. 

  401.         </div><!--/#ty-sidebar-promo-->
    402. 

  402.       </div><!--/.sidebar-promo-box-->
    403. 

  403.       <div class="sidebar-promo-box">
    404. 

  404.         <div id="ty-sidebar-promo" class="sidebar-promo icon orange">
    405. 

  405.           <img src="/assets/images/child-hunger-icon.png" alt="alttext" border="0">
    406. 

  406.           <span class="big">Join the<br />Child Hunger<br />Ends Here team.</span><br />
    407. 

  407.           <a href="#" class="button green">Find Out More about How You Can Help</a>
    408. 

  408.         </div><!--/#ty-sidebar-promo-->
    409. 

  409.       </div><!--/.sidebar-promo-box-->
    410. 

  410.       <div class="sidebar-promo-box">
    411. 

  411.         <div class="sidebar-promo related-content list-items-container">
    412. 

  412.           <h6>Related Content</h6>
    413. 

  413.           <div class="list-items">
    414. 

  414.             <div class="list-item">
    415. 

  415.               <div class="list-item-thumbnail"><a href="#"><img src="/assets/images/klein.jpg" alt="alttext" border="0" /></a></div>
    416. 

  416.               <div class="list-item-text">
    417. 

  417.                 <div class="list-item-title"><a href="#">Neque porro quisquam</a></div>
    418. 

  418.               </div><!--/.list-item-text-->
    419. 

  419.               <div class="clearfix"></div>
    420. 

  420.             </div><!--/.list-item-->
    421. 

  421.             <div class="list-item">
    422. 

  422.               <div class="list-item-thumbnail"><a href="#"><img src="/assets/images/conagra_story.jpg" alt="alttext" border="0" /></a></div>
    423. 

  423.               <div class="list-item-text">
    424. 

  424.                 <div class="list-item-title"><a href="#">Est, qui dolorem ipsum quia dolor sit amet consectetur</a></div>
    425. 

  425.               </div><!--/.list-item-text-->
    426. 

  426.               <div class="clearfix"></div>
    427. 

  427.             </div><!--/.list-item-->
    428. 

  428.             <div class="list-item">
    429. 

  429.               <div class="list-item-thumbnail"><a href="#"><img src="/assets/images/klein.jpg" alt="alttext" border="0" /></a></div>
    430. 

  430.               <div class="list-item-text">
    431. 

  431.                 <div class="list-item-title"><a href="#">Adipisci velit sed quia</a></div>
    432. 

  432.               </div><!--/.list-item-text-->
    433. 

  433.               <div class="clearfix"></div>
    434. 

  434.             </div><!--/.list-item-->
    435. 

  435.             <div class="list-item">
    436. 

  436.               <div class="list-item-thumbnail"><a href="#"><img src="/assets/images/conagra_story.jpg" alt="alttext" border="0" /></a></div>
    437. 

  437.               <div class="list-item-text">
    438. 

  438.                 <div class="list-item-title"><a href="#">Non numquam eius mod quia dolor sit amet </a></div>
    439. 

  439.               </div><!--/.list-item-text-->
    440. 

  440.               <div class="clearfix"></div>
    441. 

  441.             </div><!--/.list-item-->
    442. 

  442.           </div><!--/.list-items-->
    443. 

  443.         </div><!--/.sidebar-promo.related-contentlist-items-container-->
    444. 

  444.       </div><!--/.sidebar-promo-box-->
    445. 

  445.       <div class="sidebar-promo-box">
    446. 

  446.         <div class="sidebar-promo search white border">
    447. 

  447.           <h6>Load Indicator</h6>
    448. 

  448.           <div class="loading"></div>
    449. 

  449.         </div><!--/#ty-sidebar-promo-->
    450. 

  450.       </div><!--/.sidebar-promo-box-->
    451. 

  451. 

  452.       <link rel="stylesheet" href="/assets/js/pickadate/lib/themes/default.css">
    453. 

  453.       <link rel="stylesheet" href="/assets/js/pickadate/lib/themes/default-date.css">
    454. 

  454.       <link rel="stylesheet" href="/assets/js/pickadate/lib/themes/default-fa.css">
    455. 

  455.       <div class="sidebar-promo-box">
    456. 

  456.         <div id="sidebarpromosearch" class="sidebar-promo search lightgray border">
    457. 

  457.           <div class="by-keyword">
    458. 

  458.             <span class="big">Search Lorem Ipsum</span>
    459. 

  459.             <form class="keyword-search-form" action="#">
    460. 

  460.               <div><input type="text" placeholder="by Keyword" /></div>
    461. 

  461.               <button type="submit" class="red">GO</button>
    462. 

  462.             </form><!--/.keyword-search-form-->
    463. 

  463.           </div><!--/.by-keyword-->
    464. 

  464.           <div class="filter-by">
    465. 

  465.             <span class="big">or Filter by</span>
    466. 

  466.             <form class="filter-search-form" action="#">
    467. 

  467.               <label for="sidebar-filter-all-topics">
    468. 

  468.                 <input type="checkbox" name="category" value="all-topcs" id="sidebar-filter-all-topics" checked="checked" />
    469. 

  469.                 <span>All Topics</span>
    470. 

  470.               </label>
    471. 

  471.               <label for="sidebar-filter-people-we-serve">
    472. 

  472.                 <input type="checkbox" name="category" value="all-topcs" id="sidebar-filter-people-we-serve" />
    473. 

  473.                 <span>People We Serve</span>
    474. 

  474.               </label>
    475. 

  475.               <label for="sidebar-filter-people-who-help-us">
    476. 

  476.                 <input type="checkbox" name="category" value="all-topcs" id="sidebar-filter-people-who-help-us" />
    477. 

  477.                 <span>People Who Help Us</span>
    478. 

  478.               </label>
    479. 

  479.               <label for="sidebar-filter-people-and-government">
    480. 

  480.                 <input type="checkbox" name="category" value="all-topcs" id="sidebar-filter-people-and-government" />
    481. 

  481.                 <span>People and Government</span>
    482. 

  482.               </label>
    483. 

  483.               <label for="sidebar-filter-people-talking-about-hunger">
    484. 

  484.                 <input type="checkbox" name="category" value="all-topcs" id="sidebar-filter-people-talking-about-hunger" />
    485. 

  485.                 <span>People Talking About Hunger</span>
    486. 

  486.               </label>
    487. 

  487.               <label for="sidebar-filter-people-at-our-nfb">
    488. 

  488.                 <input type="checkbox" name="category" value="all-topcs" id="sidebar-filter-people-at-our-nfb" />
    489. 

  489.                 <span>People at Our Network Food Banks</span>
    490. 

  490.               </label>
    491. 

  491.               <div id="sidebar-filter-dates">
    492. 

  492.                 <!-- calendar JS: amsul.ca/pickadate.js/index.htm#demo -->
    493. 

  493.                 <input type="hidden" value="news_date" name="dateType">
    494. 

  494.                 <input type="text" id="sidebar-filter-date-from" name="startDate" class="js__datepicker" placeholder="From" />
    495. 

  495.                 <input type="text" id="sidebar-sidebar-filter-date-to-date-from" name="endDate" class="js__datepicker" placeholder="To" />
    496. 

  496.               </div><!--/#sidebar-filter-dates-->
    497. 

  497.               <button type="submit" class="red">GO</button>
    498. 

  498.             </form><!--/.filter-search-form-->
    499. 

  499.           </div><!--/.filter-by-->                  
    500. 

  500.         </div><!--/#sidebarpromosearch.sidebar-promo-->
    501. 

  501.       </div><!--/.sidebar-promo-box-->
    502. 

  502.       <script src="/assets/js/pickadate/lib/picker.js"></script>
    503. 

  503.       <script src="/assets/js/pickadate/lib/picker-date.js"></script>
    504. 

  504.       <script>
    505. 

  505.       $( '.js__datepicker' ).pickadate({
    506. 

  506.         // Work-around for some mobile browsers clipping off the picker.
    507. 

  507.         onOpen: function() { $('pre').css('overflow', 'hidden') },
    508. 

  508.         onClose: function() { $('pre').css('overflow', '') },
    509. 

  509.         format: 'mm/dd/yyyy'
    510. 

  510.       })
    511. 

  511.       </script>
    512. 

  512. 

  513.     </div><!--/.column-2-->
    514. 

  514.     <div class="clearfix"></div>
    515. 

  515.   </div><!--/.container-->
    516. 

  516. </div><!--/.two-column-->
    517. 

  517. 

  518. 

  519. 

  520. <div class="two-column">
    521. 

  521.   <div class="container">
    522. 

  522.     <div class="column-1">
    523. 

  523.       <h2>Inline Promo &mdash; only need to upload 462x150 image</h2>
    524. 

  524.       <h3>With sidebar</h3>
    525. 

  525.       <div class="inline-promo orange">
    526. 

  526.         <div class="inline-promo-image"><img src="/assets/images/hunger-action-month.png" alt="alttext" border="0" /></div>
    527. 

  527.         <div class="inline-promo-text">Join in all September to help raise awareness about the issue of hunger in the U.S.</div>
    528. 

  528.         <div class="clearfix"></div>
    529. 

  529.       </div><!--/.inline-promo.orange-->
    530. 

  530.     </div><!--/.column-1-->
    531. 

  531.     <div class="column-2">
    532. 

  532.     </div><!--/.column-2-->
    533. 

  533.     <div class="clearfix"></div>
    534. 

  534.   </div><!--/.container-->
    535. 

  535. </div><!--/.two-column-->
    536. 

  536. 

  537. <div class="container inline-promo-container">
    538. 

  538.   <h3>Full width</h3>
    539. 

  539.   <div class="inline-promo orange">
    540. 

  540.     <div class="inline-promo-image"><img src="/assets/images/hunger-action-month.png" alt="alttext" border="0" /></div>
    541. 

  541.     <div class="inline-promo-text">Join in all September to help raise awareness about the issue of hunger in the U.S.</div>
    542. 

  542.     <div class="clearfix"></div>
    543. 

  543.   </div><!--/.inline-promo.orange-->
    544. 

  544. </div><!--/.container-->
    545. 

  545. 

  546. <br /><br /><br /><br />
    547. 

  547. 

  548. 

  549. <div id="recent_news">
    550. 

  550.   <div class="container">
    551. 

  551.     <div class="headline">Recent News</div>
    552. 

  552.     <div id="recent_news_boxes">
    553. 

  553. 

  554.       <a href="#" class="recent_news_item one">
    555. 

  555.         <img src="/assets/images/news1.jpg" alt="news 1" border="0" />
    556. 

  556.         <div class="news_preview"><span>1 Earn Your Wings</span></div><!--/.news_preview-->
    557. 

  557.         <div class="news_expanded">
    558. 

  558.           <span>1 Earn Your Wings</span>
    559. 

  559.           <p>Veggie ipsum es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion.</p>
    560. 

  560.           <p><span class="link">Daikon amaranth tatsoi &rsaquo;</span></p>
    561. 

  561.         </div><!--/.news_expanded-->
    562. 

  562.       </a><!--/.recent_news_item.one-->
    563. 

  563. 

  564.       <a href="#" class="recent_news_item two">
    565. 

  565.         <img src="/assets/images/news1.jpg" alt="news 1" border="0" />
    566. 

  566.         <div class="news_preview"><span>2 Earn Your Wings</span></div><!--/.news_preview-->
    567. 

  567.         <div class="news_expanded">
    568. 

  568.           <span>2 Earn Your Wings</span>
    569. 

  569.           <p>Veggie ipsum es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion.</p>
    570. 

  570.           <p><span class="link">Daikon amaranth tatsoi &rsaquo;</span></p>
    571. 

  571.         </div><!--/.news_expanded-->
    572. 

  572.       </a><!--/.recent_news_item.two-->
    573. 

  573.       <a href="#" class="recent_news_item two">
    574. 

  574.         <img src="/assets/images/news2.jpg" alt="news 2" border="0" />
    575. 

  575.         <div class="news_preview"><span>2 It's National Nutrition Month</span></div><!--/.news_preview-->
    576. 

  576.         <div class="news_expanded">
    577. 

  577.           <span>2 It's National Nutrition Month</span>
    578. 

  578.           <p>Welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
    579. 

  579.           <p><span class="link">Gumbo beet greens corn &rsaquo;</span></p>
    580. 

  580.         </div><!--/.news_expanded-->
    581. 

  581.       </a><!--/.recent_news_item.two-->
    582. 

  582. 

  583.       <a href="#" class="recent_news_item three">
    584. 

  584.         <img src="/assets/images/news1.jpg" alt="news 1" border="0" />
    585. 

  585.         <div class="news_preview"><span>3 Earn Your Wings</span></div><!--/.news_preview-->
    586. 

  586.         <div class="news_expanded">
    587. 

  587.           <span>3 Earn Your Wings</span>
    588. 

  588.           <p>Veggie ipsum es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion.</p>
    589. 

  589.           <p><span class="link">Daikon amaranth tatsoi &rsaquo;</span></p>
    590. 

  590.         </div><!--/.news_expanded-->
    591. 

  591.       </a><!--/.recent_news_item.three-->
    592. 

  592.       <a href="#" class="recent_news_item three">
    593. 

  593.         <img src="/assets/images/news2.jpg" alt="news 2" border="0" />
    594. 

  594.         <div class="news_preview"><span>3 It's National Nutrition Month</span></div><!--/.news_preview-->
    595. 

  595.         <div class="news_expanded">
    596. 

  596.           <span>3 It's National Nutrition Month</span>
    597. 

  597.           <p>Welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
    598. 

  598.           <p><span class="link">Gumbo beet greens corn &rsaquo;</span></p>
    599. 

  599.         </div><!--/.news_expanded-->
    600. 

  600.       </a><!--/.recent_news_item.three-->
    601. 

  601.       <a href="#" class="recent_news_item three">
    602. 

  602.         <img src="/assets/images/news3.jpg" alt="news 3" border="0" />
    603. 

  603.         <div class="news_preview"><span>3 Congress Visit Food Bank</span></div><!--/.news_preview-->
    604. 

  604.         <div class="news_expanded">
    605. 

  605.           <span>3 Congress Visit Food Bank</span>
    606. 

  606.           <p>Tell your Member of Congress to visit their local food bank to learn about hunger.</p>
    607. 

  607.           <p><span class="link">Tell them to visit &rsaquo;</span></p>
    608. 

  608.         </div><!--/.news_expanded-->
    609. 

  609.       </a><!--/.recent_news_item.three-->
    610. 

  610. 

  611.       <a href="#" class="recent_news_item four">
    612. 

  612.         <img src="/assets/images/news1.jpg" alt="news 1" border="0" />
    613. 

  613.         <div class="news_preview"><span>4 Earn Your Wings</span></div><!--/.news_preview-->
    614. 

  614.         <div class="news_expanded">
    615. 

  615.           <span>4 Earn Your Wings</span>
    616. 

  616.           <p>Veggie ipsum es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion.</p>
    617. 

  617.           <p><span class="link">Daikon amaranth tatsoi &rsaquo;</span></p>
    618. 

  618.         </div><!--/.news_expanded-->
    619. 

  619.       </a><!--/.recent_news_item.four-->
    620. 

  620.       <a href="#" class="recent_news_item four">
    621. 

  621.         <img src="/assets/images/news2.jpg" alt="news 2" border="0" />
    622. 

  622.         <div class="news_preview"><span>4 It's National Nutrition Month</span></div><!--/.news_preview-->
    623. 

  623.         <div class="news_expanded">
    624. 

  624.           <span>4 It's National Nutrition Month</span>
    625. 

  625.           <p>Welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
    626. 

  626.           <p><span class="link">Gumbo beet greens corn &rsaquo;</span></p>
    627. 

  627.         </div><!--/.news_expanded-->
    628. 

  628.       </a><!--/.recent_news_item.four-->
    629. 

  629.       <a href="#" class="recent_news_item four">
    630. 

  630.         <img src="/assets/images/news3.jpg" alt="news 3" border="0" />
    631. 

  631.         <div class="news_preview"><span>4 Congress Visit Food Bank</span></div><!--/.news_preview-->
    632. 

  632.         <div class="news_expanded">
    633. 

  633.           <span>4 Congress Visit Food Bank</span>
    634. 

  634.           <p>Tell your Member of Congress to visit their local food bank to learn about hunger.</p>
    635. 

  635.           <p><span class="link">Tell them to visit &rsaquo;</span></p>
    636. 

  636.         </div><!--/.news_expanded-->
    637. 

  637.       </a><!--/.recent_news_item.four-->
    638. 

  638.       <a href="#" class="recent_news_item four">
    639. 

  639.         <img src="/assets/images/news1.jpg" alt="news 1" border="0" />
    640. 

  640.         <div class="news_preview"><span>4 Earn Your Wings</span></div><!--/.news_preview-->
    641. 

  641.         <div class="news_expanded">
    642. 

  642.           <span>4 Earn Your Wings</span>
    643. 

  643.           <p>Veggie ipsum es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion.</p>
    644. 

  644.           <p><span class="link">Daikon amaranth tatsoi &rsaquo;</span></p>
    645. 

  645.         </div><!--/.news_expanded-->
    646. 

  646.       </a><!--/.recent_news_item.four-->
    647. 

  647. 

  648.       <a href="#" class="recent_news_item morenews">
    649. 

  649.         <span class="link">Read More News</span>
    650. 

  650.       </a><!--/.recent_news_item-->
    651. 

  651.       <div class="clearfix"></div>
    652. 

  652.     </div><!--/#recent_news_boxes-->
    653. 

  653.     <div id="recent_read_more"><a href="#">Read More News<span> &rsaquo;</span></a></div>
    654. 

  654.   </div><!--/.container-->
    655. 

  655. </div><!--/#recent_news-->
    656. 

  656. 

  657. 

  658. 

  659. 

  660. 

  661. <div class="container">
    662. 

  662.   <h2><br /><br />Full Width Banners</h2>
    663. 

  663. </div>
    664. 

  664. 

  665. <div id="section-banner" class="big-photo with-text">
    666. 

  666.   <div class="container">
    667. 

  667.     <img src="/assets/images/hungerinamerica_banner_bigphoto_withtext.jpg" alt="alt_text" border="0" />
    668. 

  668.       <div class="headline-bar">
    669. 

  669.         <div class="container">
    670. 

  670.           <div class="headline-text">
    671. 

  671.             <span class="headline-title">Hunger in America exists for over 50 million people.</span>
    672. 

  672.             <span class="headline-subhead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuint ut labore.</span>
    673. 

  673.           </div><!--/.headline-text-->
    674. 

  674.         </div><!--/.container-->
    675. 

  675.       </div><!--/.headline-bar-->
    676. 

  676.   </div><!--/.container-->
    677. 

  677. </div><!--/#section-banner.big-photo.with-text-->
    678. 

  678. 

  679. <div id="section-banner" class="big-photo no-text">
    680. 

  680.   <div class="container">
    681. 

  681.     <img src="/assets/images/hungerinamerica_banner_bigphoto_notext.jpg" alt="alt_text" border="0" />
    682. 

  682.       <div class="headline-bar">
    683. 

  683.         <div class="container">
    684. 

  684.           <div class="headline-text">
    685. 

  685.             <span class="headline-title">Hunger in America exists for over 50 million people.</span>
    686. 

  686.             <span class="headline-subhead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuint ut labore.</span>
    687. 

  687.           </div><!--/.headline-text-->
    688. 

  688.         </div><!--/.container-->
    689. 

  689.       </div><!--/.headline-bar-->
    690. 

  690.   </div><!--/.container-->
    691. 

  691. </div><!--/#section-banner.big-photo.no-text-->
    692. 

  692. 

  693. <div id="section-banner" class="small-photo with-text green">
    694. 

  694.   <div class="container">
    695. 

  695.     <img src="/assets/images/hungerinamerica_banner_smallphoto_withtext.jpg" alt="alt_text" border="0" />
    696. 

  696.       <div class="headline-bar">
    697. 

  697.         <div class="container">
    698. 

  698.           <div class="headline-text">
    699. 

  699.             <span class="headline-title">Hunger in America exists for over 50 million people.</span>
    700. 

  700.             <span class="headline-subhead">
    701. 

  701.               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuint ut labore. Lorem ipsum dolor sit amet, consectetur.</p>
    702. 

  702.               <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat dolore eu fugiat.</p>
    703. 

  703.             </span>
    704. 

  704.           </div><!--/.headline-text-->
    705. 

  705.         </div><!--/.container-->
    706. 

  706.       </div><!--/.headline-bar-->
    707. 

  707.   </div><!--/.container-->
    708. 

  708. </div><!--/#section-banner.small-photo.with-text.green-->
    709. 

  709. 

  710. <div id="section-banner" class="no-photo with-text green">
    711. 

  711.   <div class="container">
    712. 

  712.       <div class="headline-bar">
    713. 

  713.         <div class="container">
    714. 

  714.           <div class="headline-text">
    715. 

  715.             <span class="headline-title">Hunger in America exists for over 50 million people.</span>
    716. 

  716.             <span class="headline-subhead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuint ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    717. 

  717.           </div><!--/.headline-text-->
    718. 

  718.         </div><!--/.container-->
    719. 

  719.       </div><!--/.headline-bar-->
    720. 

  720.   </div><!--/.container-->
    721. 

  721. </div><!--/#section-banner.no-photo.with-text.green-->
    722. 

  722. 

  723. <div id="section-banner" class="small-photo with-text orange">
    724. 

  724.   <div class="container">
    725. 

  725.     <img src="/assets/images/hungerinamerica_banner_smallphoto_withtext.jpg" alt="alt_text" border="0" />
    726. 

  726.       <div class="headline-bar">
    727. 

  727.         <div class="container">
    728. 

  728.           <div class="headline-text">
    729. 

  729.             <span class="headline-title">Hunger in America exists for over 50 million people.</span>
    730. 

  730.             <span class="headline-subhead">
    731. 

  731.               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuint ut labore. Lorem ipsum dolor sit amet, consectetur.</p>
    732. 

  732.               <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat dolore eu fugiat.</p>
    733. 

  733.             </span>
    734. 

  734.           </div><!--/.headline-text-->
    735. 

  735.         </div><!--/.container-->
    736. 

  736.       </div><!--/.headline-bar-->
    737. 

  737.   </div><!--/.container-->
    738. 

  738. </div><!--/#section-banner.small-photo.with-text.orange-->
    739. 

  739. 

  740. <div id="section-banner" class="no-photo with-text orange">
    741. 

  741.   <div class="container">
    742. 

  742.       <div class="headline-bar">
    743. 

  743.         <div class="container">
    744. 

  744.           <div class="headline-text">
    745. 

  745.             <span class="headline-title">Hunger in America exists for over 50 million people.</span>
    746. 

  746.             <span class="headline-subhead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuint ut labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    747. 

  747.           </div><!--/.headline-text-->
    748. 

  748.         </div><!--/.container-->
    749. 

  749.       </div><!--/.headline-bar-->
    750. 

  750.   </div><!--/.container-->
    751. 

  751. </div><!--/#section-banner.no-photo.with-text.orange-->
    752. 

  752. 

  753. 

  754. 

  755. 

  756. 

  757. 

  758. <div class="container">
    759. 

  759.   <h2><br /><br />Landing Page Sections</h2>
    760. 

  760. </div>
    761. 

  761. 

  762. <div id="section-boxes">
    763. 

  763.   <div class="container">
    764. 

  764.     <div class="section-box left">
    765. 

  765.       <div class="section-title">The Impact of Hunger</div>
    766. 

  766.       <div class="section-img">
    767. 

  767.         <img src="/assets/images/section_impactofhunger.jpg" alt="alttext" border="0" />
    768. 

  768.         <div class="section-img-hover">
    769. 

  769.           <span class="in-this-section">In This Section:</span>
    770. 

  770.           <span>Veggie Ipsum</span><span>Es Bonus Vobis</span><span>Proinde vos Postulo</span><span>Essum Magis Kohlrabi</span><span>Welsh Onion</span><span>Daikon Amaranth</span>
    771. 

  771.         </div><!--/.section-img-hover-->
    772. 

  772.       </div><!--/.section-img-->
    773. 

  773.       <div class="section-text">Many people believe that the problems associated with hunger are confined to small pockets of society, certain areas of the country, or certain neighborhoods, but the reality is much different. <a href="#">Learn More<span> &rsaquo;</span></a></div><!--/.section-text-->
    774. 

  774.     </div><!--/.section-box.left--><div class="section-box right">
    775. 

  775.       <div class="section-title">Hunger in Your Community</div>
    776. 

  776.       <div class="section-img">
    777. 

  777.         <img src="/assets/images/section_hungerinyourcommunity.jpg" alt="alttext" border="0" />
    778. 

  778.         <div class="section-img-hover">
    779. 

  779.           <span class="in-this-section">In This Section:</span>
    780. 

  780.           <span>Hunger and Poverty</span><span>Latino Hunger</span><span>Child Hunger</span><span style="float: right;">Rural, Suburban and Urban Hunger</span><span>Senior Hunger</span>
    781. 

  781.           <span>African American Hunger</span>
    782. 

  782.         </div><!--/.section-img-hover-->
    783. 

  783.       </div><!--/.section-img-->
    784. 

  784.       <div class="section-text">What is the face of hunger? Learn more about individuals struggling with hunger around the U.S. and in your community and the food banks that serve them. <a href="#">Learn More<span> &rsaquo;</span></a></div><!--/.section-text-->
    785. 

  785.     </div><!--/.section-box.right-->
    786. 

  786.   </div><!--/.container-->
    787. 

  787.   <div class="container">
    788. 

  788.     <div class="section-box left">
    789. 

  789.       <div class="section-title">Our Research</div>
    790. 

  790.       <div class="section-img">
    791. 

  791.         <img src="/assets/images/section_ourresearch.jpg" alt="alttext" border="0" />
    792. 

  792.         <div class="section-img-hover">
    793. 

  793.           <span class="in-this-section">In This Section:</span>
    794. 

  794.           <span>Veggie Ipsum</span><span>Es Bonus Vobis</span><span>Proinde vos Postulo</span><span>Essum Magis Kohlrabi</span><span>Welsh Onion</span><span>Daikon Amaranth</span>
    795. 

  795.         </div><!--/.section-img-hover-->
    796. 

  796.       </div><!--/.section-img-->
    797. 

  797.       <div class="section-text">Many people believe that the problems associated with hunger are confined to small pockets of society, certain areas of the country, or certain neighborhoods, but the reality is much different. <a href="#">Learn More<span> &rsaquo;</span></a></div><!--/.section-text-->
    798. 

  798.     </div><!--/.section-box.left--><div class="section-box right">
    799. 

  799.       <div class="section-title">Corporate Donations Lorem Ipsum Dolor</div>
    800. 

  800.       <div class="section-img">
    801. 

  801.         <img src="/assets/images/section_corporatedonations.jpg" alt="alttext" border="0" />
    802. 

  802.         <div class="section-img-hover">
    803. 

  803.           <span class="in-this-section">In This Section:</span>
    804. 

  804.           <span>Veggie Ipsum</span><span>Es Bonus Vobis</span><span>Proinde vos Postulo</span><span>Essum Magis Kohlrabi</span><span>Welsh Onion</span><span>Daikon Amaranth</span>
    805. 

  805.         </div><!--/.section-img-hover-->
    806. 

  806.       </div><!--/.section-img-->
    807. 

  807.       <div class="section-text">Many people believe that the problems associated with hunger are confined to small pockets of society, certain areas of the country, or certain neighborhoods, but the reality is much different. <a href="#">Learn More<span> &rsaquo;</span></a></div><!--/.section-text-->
    808. 

  808.     </div><!--/.section-box.right-->
    809. 

  809.   </div><!--/.container-->
    810. 

  810.   <div class="container">
    811. 

  811.     <div class="section-box full-width">
    812. 

  812.       <div class="section-title">Full Width Option</div>
    813. 

  813.       <div class="section-img">
    814. 

  814.         <img src="/assets/images/section_fullwidthoption.jpg" alt="alttext" border="0" />
    815. 

  815.         <div class="section-img-hover">
    816. 

  816.           <span class="in-this-section">In This Section:</span>
    817. 

  817.           <span>Veggie Ipsum</span><span>Es Bonus Vobis</span><span>Proinde vos Postulo</span><span>Essum Magis Kohlrabi</span><span>Welsh Onion</span><span>Daikon Amaranth</span>
    818. 

  818.         </div><!--/.section-img-hover-->
    819. 

  819.       </div><!--/.section-img-->
    820. 

  820.       <div class="section-text">Many people believe that the problems associated with hunger are confined to small pockets of society, certain areas of the country, or certain neighborhoods, but the reality is much different. <a href="#">Learn More<span> &rsaquo;</span></a></div><!--/.section-text-->
    821. 

  821.     </div><!--/.section-box.full-width-->
    822. 

  822.   </div><!--/.container-->
    823. 

  823. </div><!--/#section-boxes-->
    824. 

  824. 

  825. 

  826. 

  827. 

  828. 

  829. <div class="container">
    830. 

  830.   <h2><br /><br /><br />Footer Promos</h2>
    831. 

  831. </div>
    832. 

  832. 

  833. <div id="footer_promos">
    834. 

  834.   <div class="container">
    835. 

  835.     <div class="headline">How You Can Help Feeding America Solve Hunger</div>
    836. 

  836.     <div id="footer_promo_boxes">
    837. 

  837.       <div class="footer-promo">
    838. 

  838.         <img src="/assets/images/learn-icon-white.png" alt="alttext" border="0">
    839. 

  839.         <div class="promo-title">Learn</div>
    840. 

  840.         <div class="promo-text">What does hunger look like in your state?<br />Find out.</div>
    841. 

  841.         <div class="promo-action">
    842. 

  842.           <form class="promo-learn" action="#">
    843. 

  843.             <input type="text" name="cons_zip_code" class="half-width" placeholder="Enter Zip">
    844. 

  844.             <div class="half-width">
    845. 

  845.               <button type="submit" class="red">GO</button>
    846. 

  846.             </div>
    847. 

  847.             <div class="clearfix"></div>
    848. 

  848.           </form><!--/.promo-learn-->
    849. 

  849.         </div><!--/.promo-action-->
    850. 

  850.       </div><!--/.footer-promo-->
    851. 

  851.       <div class="footer-promo">
    852. 

  852.         <img src="/assets/images/act-icon-1-white.png" alt="alttext" border="0">
    853. 

  853.         <div class="promo-title">Act</div>
    854. 

  854.         <div class="promo-text">Tell your member of Congress to visit your local food bank.</div>
    855. 

  855.         <div class="promo-action">
    856. 

  856.           <a href="#" class="button purple">Act Now</a>
    857. 

  857.         </div><!--/.promo-action-->
    858. 

  858.       </div><!--/.footer-promo-->
    859. 

  859.       <div class="footer-promo">
    860. 

  860.         <img src="/assets/images/give-icon-1-white.png" alt="alttext" border="0">
    861. 

  861.         <div class="promo-title">Give</div>
    862. 

  862.         <div class="promo-text">Give hope to children and families in need year round. Become a monthly donor.</div>
    863. 

  863.         <div class="promo-action">
    864. 

  864.           <a href="#" class="button blue">Donate</a>
    865. 

  865.         </div><!--/.promo-action-->
    866. 

  866.       </div><!--/.footer-promo-->
    867. 

  867.       <div class="clearfix"></div>
    868. 

  868.     </div><!--/#footer_promo_boxes-->
    869. 

  869.   </div><!--/.container-->
    870. 

  870. </div><!--/#footer_promos-->
    871. 

  871. 

  872. 

  873. <div id="footer_promos">
    874. 

  874.   <div class="container">
    875. 

  875.     <div class="headline">How You Can Help Feeding America Solve Hunger</div>
    876. 

  876.     <div id="footer_promo_boxes">
    877. 

  877.       <div class="footer-promo">
    878. 

  878.         <img src="/assets/images/join-icon-white.png" alt="alttext" border="0">
    879. 

  879.         <div class="promo-title">Join</div>
    880. 

  880.         <div class="promo-text">Get the latest news and learn how you can get involved</div>
    881. 

  881.         <div class="promo-action">
    882. 

  882.           <form class="promo-learn" action="#">
    883. 

  883.             <input type="email" name="cons_email" class="full-width" placeholder="Enter Email">
    884. 

  884.             <input type="text" name="cons_zip_code" class="half-width" placeholder="Enter Zip">
    885. 

  885.             <div class="half-width">
    886. 

  886.               <button type="submit" class="red">GO</button>
    887. 

  887.             </div>
    888. 

  888.             <div class="clearfix"></div>
    889. 

  889.           </form><!--/.promo-learn-->
    890. 

  890.         </div><!--/.promo-action-->
    891. 

  891.       </div><!--/.footer-promo-->
    892. 

  892.       <div class="footer-promo">
    893. 

  893.         <img src="/assets/images/share-icon-white.png" alt="alttext" border="0">
    894. 

  894.         <div class="promo-title">Share</div>
    895. 

  895.         <div class="promo-text">Tell us why you're dedicated to fighting hunger in the U.S.</div>
    896. 

  896.         <div class="promo-action">
    897. 

  897.           <a href="#" class="button blue">Share Your Story</a>
    898. 

  898.         </div><!--/.promo-action-->
    899. 

  899.       </div><!--/.footer-promo-->
    900. 

  900.       <div class="footer-promo">
    901. 

  901.         <img src="/assets/images/heart-icon-white.png" alt="alttext" border="0">
    902. 

  902.         <div class="promo-title">Thank You</div>
    903. 

  903.         <div class="promo-text">We couldn't do it without you. Thank you for your ongoing support.</div>
    904. 

  904.       </div><!--/.footer-promo-->
    905. 

  905.       <div class="clearfix"></div>
    906. 

  906.     </div><!--/#footer_promo_boxes-->
    907. 

  907.   </div><!--/.container-->
    908. 

  908. </div><!--/#footer_promos-->
    909.