Update from yesterday
authorIan Weller <ian@gaslightmedia.com>
Tue, 10 Feb 2015 13:15:54 +0000 (08:15 -0500)
committerIan Weller <ian@gaslightmedia.com>
Tue, 10 Feb 2015 13:15:54 +0000 (08:15 -0500)
index.html
interior.html
scss/_settings.scss
scss/_structure.scss
scss/app.scss

index d8a99ac..02ac516 100644 (file)
     <script src="bower_components/modernizr/modernizr.js"></script>
   </head>
   <body>
-    <header>
-        <div class="row">
-            <div class="small-12 medium-4 columns">
-                <a id="logo" href="#"><img src="assets/logo.png"></a>
-            </div>
-            <div class="small-12 medium-8 columns right">
-                <div class="small-8 columns show-for-medium-up">
-                    <nav class="sec_nav">
+    <div class="off-canvas-wrap" data-offcanvas>
+        <div class="inner-wrap">
+            <header>
+                <div class="row">
+                    <div class="small-12 medium-4 columns">
+                        <a id="logo" href="#"><img src="assets/logo.png"></a>
+                    </div>
+                    <div class="small-12 medium-8 columns right">
+                        <div class="small-8 columns show-for-medium-up">
+                            <nav class="sec_nav">
+                                <ul>
+
+                                    <li><a href="#">Volunteer/Employment</a></li>
+                                    <li><a href="#">Donate</a></li>
+                                    <li><a href="#">Media</a></li>
+                                    <li><a href="#">Contact</a></li>
+
+                                </ul>
+                            </nav>
+                        </div>
+                        <div class="small-4 columns show-for-medium-up social">
+                            <div id="soc-top">
+                                <p>Connect With Us</p>
+                                <a href="#"><img src="assets/facebook.png"></a>
+                                <a href="#"><img src="assets/pin.jpg"></a>
+                                <a href="#"><img src="assets/twitt.jpg"></a>
+                                <a href="#"><img src="assets/flickr-icon.jpg"></a>
+                                <a href="#"><img src="assets/youtube_icon.jpg"></a>
+                                <a href="#"><img src="assets/google.png"></a>
+                                <a href="#"><img src="assets/share-icon.jpg"></a>
+                            </div>
+                            <div class="search">
+                                <input type="text" placeholder="SEARCH"><img src="assets/search_button.jpg">
+                            </div>
+                        </div>
+                        <div class="small-12 columns">
+                            <h1>America's Signature Collection<sup>&trade;</sup></h1>
+                        </div>
+                    </div>
+                </div>
+                    <nav class="top-bar text-center show-for-large-up" data-topbar role="navigation">
+                    <section class="top-bar-section">
                         <ul>
-                            
-                            <li><a href="#">Volunteer/Employment</a></li>
-                            <li><a href="#">Donate</a></li>
-                            <li><a href="#">Media</a></li>
-                            <li><a href="#">Contact</a></li>
-                        
+                            <li class="has-dropdown drop_left"><a href="#">Vist & Explore</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_left"><a href="#">About</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_left"><a href="#">Upcoming Events</a>
+                                <ul class="dropdown"><li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_left"><a href="#">Musuem Store</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_right"><a href="#">Membership & Support</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_right"><a href="#">Education</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_right"><a href="#">Host An Event</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">General Events</a></li>
+                                    <li><a href="#">Banquets</a></li>
+                                    <li><a href="#">Corporate Meetings</a></li>
+                                    <li><a href="#">Weddings</a></li>
+                                    <li><a href="#">Event/Meeting Spaces</a></li>
+                                    <li><a href="#">Approved Caterers</a></li>
+                                </ul>
+                            </li>
                         </ul>
-                    </nav>
+                    </section>
+                </nav>
+                <nav class="tab-bar show-for-medium-down">
+                    <section class="left-small">
+                        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
+                    </section>
+                </nav>
+                <aside class="left-off-canvas-menu">
+                    <ul class="left-off-canvas-list">
+                        <li><a href="#">Vist & Explore</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">Upcoming Events</a></li>
+                        <li><a href="#">Musuem Store</a></li>
+                        <li><a href="#">Membership & Support</a></li>
+                        <li><a href="#">Education</a></li>
+                        <li><a href="#">Host An Event</a>
+                            <ul>
+                                <li><a href="#">General Events</a></li>
+                                <li><a href="#">Banquets</a></li>
+                                <li><a href="#">Corporate Meetings</a></li>
+                                <li><a href="#">Weddings</a></li>
+                                <li><a href="#">Event/Meeting Spaces</a></li>
+                                <li><a href="#">Approved Caterers</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </aside>
+            </header>
+            <div class="slider">
+            </div>
+            <div class="thumb-nav">
+                <div class="row">
+                    <div id="thumb" class="large-12 show-for-large-up">
+                        <img src="assets/slide_sub1.jpg">
+                        <img src="assets/slide_sub2.jpg">
+                        <img src="assets/slide_sub3.jpg">
+                        <img src="assets/slide_sub4.jpg">
+                    </div>
+                </div>
+            </div>
+            <div class="row content">
+                <div class="small-12 columns">
+                    <h2>Welcome</h2>
+                    <p>On a 90-acre historic campus midway between Detroit and Chicago is the Gilmore Car Museum. Here, visitors shoot the breeze in an old-fashioned gas station. Children stand inches from a 1930 Rolls-Royce that’s from a Disney&reg; movie. Grandparents share stories about a ’57 Chevy, as their smiles are reflected in the car’s chrome. Stroll the campus. Eat lunch in our authentic Blue Moon Diner. Walk right upto an amazing collection of over 300 vintage automobiles, motorcycles, and memories. It’s America’s Signature Collection. And the ultimate experience for everyone in your family.</p>
                 </div>
-                <div class="small-4 columns show-for-medium-up social">
-                    <div id="soc-top">
-                        <p>Connect With Us</p>
+                <div id="news" class="small-12 medium-6 large-4 columns">
+                    <h3 class="text-center">News</h3>
+                    <div class="feed">
+                        <img src="assets/news_img.jpg">
+                        <p>Sunday, June 7, 2015<br><p class="event">Classic Car Club of <br>American Museum <br>"Grand Experience"</p></p>
+                        <p>Saturday, June 13, 2015<br><p class="event">Pre-Show Vintage <br>Motorcycle Ride</p></p>
+                        <p>Sunday, June 14, 2015<br><p class="event">One Example Event</p></p>
+                        <label><a href="#">More News</a></label>
+                    </div>
+                </div>
+                <div id="upcoming" class="small-12 medium-6 large-4 columns">
+                    <h3 class="text-center">Upcoming Events</h3>
+                    <div class="feed">
+                        <img src="assets/event_image.jpg">
+                        <p>Pint with the Past<br>Saturday, February 14th<br>7:00pm - 10:00pm</p>
+                        <p>Under the Hood<br>February 27, 2015 - March 1, 2015<br>Open during regular GCM hours</p>
+                        <p>Cars and Canvas<br>Sunday, March 15th<br>2:00pm - 6:00pm</p>
+                        <label><a href="#">View All Events</a></label>
+                    </div>
+                </div>
+                <div id="partners" class="small-12 medium-6 large-4 columns end">
+                    <h3 class="text-center">Featured Partner</h3>
+                    <div class="feed">
+                        <img src="assets/partner_img.jpg">
+                        <p>Did you know we have 7 onsite partner museums?</p>
+                        <p>Our featured partner this month is the H.H. Franklin Club. This permanent exhibit includes automobiles, engines, and artifacts that span the four-decade history of the H.H. Franklin Company.</p>
+                        <label><a href="#">View All Partners</a></label>
+                    </div>
+                </div>
+            </div>
+            <div class="row text-center">
+                <div class="small-12 columns">
+                    <h3>The Gilmore Car Musuem</h3>
+                    <p>6865 W Hickory Rd. Hickory Corners, MI 49060 &#8226; 269-671-5089 &#8226; <a class="link" href="#">Directions</a></p>
+                    <div id="soc-bottom" class="social">
                         <a href="#"><img src="assets/facebook.png"></a>
                         <a href="#"><img src="assets/pin.jpg"></a>
                         <a href="#"><img src="assets/twitt.jpg"></a>
                         <a href="#"><img src="assets/google.png"></a>
                         <a href="#"><img src="assets/share-icon.jpg"></a>
                     </div>
-                    <div class="search">
-                        <input type="text" placeholder="SEARCH"><img src="assets/search_button.jpg">
+                </div>
+            </div>
+            <footer>
+                <div class="row">    
+                    <div class="small-12 medium-4 columns text-center">
+                        <img src="assets/email_signup-img.png">
+                    </div>
+                    <div class="small-12 medium-4 columns text-center">
+                        <a><img src="assets/trip.jpg"></a>
+                    </div>
+                    <div class="small-12 medium-4 columns text-center">
+                        <a><img src="assets/sponsers.jpg"></a>
                     </div>
                 </div>
-                <div class="small-12 columns">
-                    <h1>America's Signature Collection<sup>&trade;</sup></h1>
+            </footer>
+            <div class="row text-center">
+                <div class="small-offset-0 small-6 medium-4 large-offset-1 large-2 columns">
+                    <a href="#"><img src="assets/naam-logo.png"></a>
+                </div>
+                <div class="small-6 medium-4 large-2 columns">
+                    <a href="#"><img src="assets/mma-logo.png"></a>
+                </div>
+                <div class="small-6 medium-4 large-2 columns">
+                    <a href="#"><img src="assets/motor-cities-logo.png"></a>
+                </div>
+                <div class="small-6 large-2 columns">
+                    <a href="#"><img src="assets/aam-logo.png"></a>
+                </div>
+                <div class="small-12 medium-6 large-2 columns left">
+                    <a href="#"><img src="assets/aaslh-logo.png"></a>
                 </div>
             </div>
-        </div>
-            <nav class="top-bar text-center show-for-medium-up" data-topbar role="navigation">
-            <section class="top-bar-section">
-                <ul>
-                    <li class="has-dropdown drop_left"><a href="#">Vist & Explore</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_left"><a href="#">About</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_left"><a href="#">Upcoming Events</a>
-                        <ul class="dropdown"><li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_left"><a href="#">Musuem Store</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_right"><a href="#">Membership & Support</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_right"><a href="#">Education</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_right"><a href="#">Host An Event</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">General Events</a></li>
-                            <li><a href="#">Banquets</a></li>
-                            <li><a href="#">Corporate Meetings</a></li>
-                            <li><a href="#">Weddings</a></li>
-                            <li><a href="#">Event/Meeting Spaces</a></li>
-                            <li><a href="#">Approved Caterers</a></li>
-                        </ul>
-                    </li>
-                </ul>
-            </section>
-        </nav>
-        <nav class="tab-bar show-for-small-down">
-            <section class="small-left">
-                <a class="left-off-canvas-toggle menu-icon"><span>Menu</span></a>
-            </section>
-        </nav>
-        <aside class="left-off-canvas-menu">
-            <ul class="left-off-canvas-list">
-                <li><a href="#">Vist & Explore</a></li>
-                <li><a href="#">About</a></li>
-                <li><a href="#">Upcoming Events</a></li>
-                <li><a href="#">Musuem Store</a></li>
-                <li><a href="#">Membership & Support</a></li>
-                <li><a href="#">Education</a></li>
-                <li><a href="#">Host An Event</a>
-                    <ul>
-                        <li><a href="#">General Events</a></li>
-                        <li><a href="#">Banquets</a></li>
-                        <li><a href="#">Corporate Meetings</a></li>
-                        <li><a href="#">Weddings</a></li>
-                        <li><a href="#">Event/Meeting Spaces</a></li>
-                        <li><a href="#">Approved Caterers</a></li>
-                    </ul>
-                </li>
-            </ul>
-        </aside>
-    </header>
-    <div class="slider">
-        
-    </div>
-    <div class="thumb-nav">
-        <div class="row">
-            <div id="thumb" class="large-12 show-for-large-up">
-                <img src="assets/slide_sub1.jpg">
-                <img src="assets/slide_sub2.jpg">
-                <img src="assets/slide_sub3.jpg">
-                <img src="assets/slide_sub4.jpg">
-            </div>
-        </div>
-    </div>
-    <div class="row content">
-        <div class="small-12 columns">
-            <h2>Welcome</h2>
-            <p>On a 90-acre historic campus midway between Detroit and Chicago is the Gilmore Car Museum. Here, visitors shoot the breeze in an old-fashioned gas station. Children stand inches from a 1930 Rolls-Royce that’s from a Disney&reg; movie. Grandparents share stories about a ’57 Chevy, as their smiles are reflected in the car’s chrome. Stroll the campus. Eat lunch in our authentic Blue Moon Diner. Walk right upto an amazing collection of over 300 vintage automobiles, motorcycles, and memories. It’s America’s Signature Collection. And the ultimate experience for everyone in your family.</p>
-        </div>
-        <div id="news" class="small-12 medium-4 columns">
-            <h3 class="text-center">News</h3>
-            <div class="feed">
-                <img src="assets/news_img.jpg">
-                <p>Sunday, June 7, 2015<br><p class="event">Classic Car Club of <br>American Museum <br>"Grand Experience"</p></p>
-                <p>Saturday, June 13, 2015<br><p class="event">Pre-Show Vintage <br>Motorcycle Ride</p></p>
-                <p>Sunday, June 14, 2015<br><p class="event">One Example Event</p></p>
-                <label><a href="#">More News</a></label>
-            </div>
-        </div>
-        <div id="upcoming" class="small-12 medium-4 columns">
-            <h3 class="text-center">Upcoming Events</h3>
-            <div class="feed">
-                <img src="assets/event_image.jpg">
-                <p>Pint with the Past<br>Saturday, February 14th<br>7:00pm - 10:00pm</p>
-                <p>Under the Hood<br>February 27, 2015 - March 1, 2015<br>Open during regular GCM hours</p>
-                <p>Cars and Canvas<br>Sunday, March 15th<br>2:00pm - 6:00pm</p>
-                <label><a href="#">View All Events</a></label>
-            </div>
-        </div>
-        <div id="partners" class="small-12 medium-4 columns">
-            <h3 class="text-center">Featured Partner</h3>
-            <div class="feed">
-                <img src="assets/partner_img.jpg">
-                <p>Did you know we have 7 onsite partner museums?</p>
-                <p>Our featured partner this month is the H.H. Franklin Club. This permanent exhibit includes automobiles, engines, and artifacts that span the four-decade history of the H.H. Franklin Company.</p>
-                <label><a href="#">View All Partners</a></label>
-            </div>
-        </div>
-    </div>
-    <div class="row text-center">
-        <div class="small-12 columns">
-            <h3>The Gilmore Car Musuem</h3>
-            <p>6865 W Hickory Rd. Hickory Corners, MI 49060 &#8226; 269-671-5089 &#8226; <a id="direct" href="#">Directions</a></p>
-            <div id="soc-bottom" class="social">
-                <a href="#"><img src="assets/facebook.png"></a>
-                <a href="#"><img src="assets/pin.jpg"></a>
-                <a href="#"><img src="assets/twitt.jpg"></a>
-                <a href="#"><img src="assets/flickr-icon.jpg"></a>
-                <a href="#"><img src="assets/youtube_icon.jpg"></a>
-                <a href="#"><img src="assets/google.png"></a>
-                <a href="#"><img src="assets/share-icon.jpg"></a>
-            </div>
-        </div>
-    </div>
-    <footer>
-        <div class="row">
-            <div class="small-12 medium-4 columns">
-                <img src="assets/email_signup-img.png">
-            </div>
-            <div class="small-12 medium-4 columns">
-                <a><img src="assets/trip.jpg"></a>
-            </div>
-            <div class="small-12 medium-4 columns">
-                <a><img src="assets/sponsers.jpg"></a>
+            <div class="row">    
+                <div id="copyright" class="small-12 text-center">
+                    <p>The Gilmore Car Museum is a public, 501(c)3 non-profit educational institution, dedicated to preserving the history and heritage of the American automobile.</p>
+                    <p>&copy; 2015 Gilmore Car Musuem &#8226; All Rights Reserved &#8226; Produced by Gaslight Media</p>
+                </div>
             </div>
-        </div>    
-    </footer>
-    <div class="row text-center">
-        <div class="large-offset-1 columns show-for-large-up"></div>
-        <div class="small-6 medium-4 large-2 columns">
-            <a href="#"><img src="assets/naam-logo.png"></a>
-        </div>
-        <div class="small-6 medium-4 large-2 columns">
-            <a href="#"><img src="assets/mma-logo.png"></a>
-        </div>
-        <div class="small-6 medium-4 large-2 columns">
-            <a href="#"><img src="assets/motor-cities-logo.png"></a>
-        </div>
-        <div class="small-6 large-2 columns">
-            <a href="#"><img src="assets/aam-logo.png"></a>
-        </div>
-        <div class="small-12 medium-6 large-2 columns">
-            <a href="#"><img src="assets/aaslh-logo.png"></a>
-        </div>
-    </div>
-    <div class="row">    
-        <div id="copyright" class="small-12 text-center">
-            <p>The Gilmore Car Museum is a public, 501(c)3 non-profit educational institution, dedicated to preserving the history and heritage of the American automobile.</p>
-            <p>&copy; 2015 Gilmore Car Musuem &#8226; All Rights Reserved &#8226; Produced by Gaslight Media</p>
-        </div>
-    </div>
+        </div><!--/inner-wrap-->
+    </div><!--/off-canvas-wrap-->
 
     <script src="bower_components/jquery/dist/jquery.min.js"></script>
     <script src="bower_components/foundation/js/foundation.min.js"></script>
index a708859..ba10a80 100644 (file)
     <script src="bower_components/modernizr/modernizr.js"></script>
   </head>
   <body>
-    <header>
-        <div class="row">
-            <div class="small-12 medium-4 columns">
-                <a id="logo" href="#"><img src="assets/logo.png"></a>
-            </div>
-            <div class="small-12 medium-8 columns right">
-                <div class="small-8 columns show-for-medium-up">
-                    <nav class="sec_nav">
-                        <ul>
-                            
-                            <li><a href="#">Volunteer/Employment</a></li>
-                            <li><a href="#">Donate</a></li>
-                            <li><a href="#">Media</a></li>
-                            <li><a href="#">Contact</a></li>
-                        
-                        </ul>
-                    </nav>
-                </div>
-                <div class="small-4 columns show-for-medium-up social">
-                    <div id="soc-top">
-                        <p>Connect With Us</p>
-                        <a href="#"><img src="assets/facebook.png"></a>
-                        <a href="#"><img src="assets/pin.jpg"></a>
-                        <a href="#"><img src="assets/twitt.jpg"></a>
-                        <a href="#"><img src="assets/flickr-icon.jpg"></a>
-                        <a href="#"><img src="assets/youtube_icon.jpg"></a>
-                        <a href="#"><img src="assets/google.png"></a>
-                        <a href="#"><img src="assets/share-icon.jpg"></a>
+    <div class="off-canvas-wrap" data-offcanvas>
+        <div class="inner-wrap">  
+            <header>
+                <div class="row">
+                    <div class="small-12 medium-4 columns">
+                        <a id="logo" href="#"><img src="assets/logo.png"></a>
                     </div>
-                    <div class="search">
-                        <input type="text" placeholder="SEARCH"><img src="assets/search_button.jpg">
+                    <div class="small-12 medium-8 columns right">
+                        <div class="small-8 columns show-for-medium-up">
+                            <nav class="sec_nav">
+                                <ul>
+
+                                    <li><a href="#">Volunteer/Employment</a></li>
+                                    <li><a href="#">Donate</a></li>
+                                    <li><a href="#">Media</a></li>
+                                    <li><a href="#">Contact</a></li>
+
+                                </ul>
+                            </nav>
+                        </div>
+                        <div class="small-4 columns show-for-medium-up social">
+                            <div id="soc-top">
+                                <p>Connect With Us</p>
+                                <a href="#"><img src="assets/facebook.png"></a>
+                                <a href="#"><img src="assets/pin.jpg"></a>
+                                <a href="#"><img src="assets/twitt.jpg"></a>
+                                <a href="#"><img src="assets/flickr-icon.jpg"></a>
+                                <a href="#"><img src="assets/youtube_icon.jpg"></a>
+                                <a href="#"><img src="assets/google.png"></a>
+                                <a href="#"><img src="assets/share-icon.jpg"></a>
+                            </div>
+                            <div class="search">
+                                <input type="text" placeholder="SEARCH"><img src="assets/search_button.jpg">
+                            </div>
+                        </div>
+                        <div class="small-12 columns">
+                            <h1>America's Signature Collection<sup>&trade;</sup></h1>
+                        </div>
                     </div>
                 </div>
+                    <nav class="top-bar text-center show-for-large-up" data-topbar role="navigation">
+                    <section class="top-bar-section">
+                        <ul>
+                            <li class="has-dropdown drop_left"><a href="#">Vist & Explore</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_left"><a href="#">About</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_left"><a href="#">Upcoming Events</a>
+                                <ul class="dropdown"><li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_left"><a href="#">Musuem Store</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_right"><a href="#">Membership & Support</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_right"><a href="#">Education</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">sub1</a></li>
+                                    <li><a href="#">sub2</a></li>
+                                    <li><a href="#">sub3</a></li>
+                                    <li><a href="#">sub4</a></li>
+                                </ul>
+                            </li>
+                            <li class="has-dropdown drop_right"><a href="#">Host An Event</a>
+                                <ul class="dropdown">
+                                    <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
+                                    <li><a href="#">General Events</a></li>
+                                    <li><a href="#">Banquets</a></li>
+                                    <li><a href="#">Corporate Meetings</a></li>
+                                    <li><a href="#">Weddings</a></li>
+                                    <li><a href="#">Event/Meeting Spaces</a></li>
+                                    <li><a href="#">Approved Caterers</a></li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </section>
+                </nav>
+                <nav class="tab-bar show-for-medium-down">
+                    <section class="left-small">
+                        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
+                    </section>
+                </nav>
+                <aside class="left-off-canvas-menu">
+                    <ul class="left-off-canvas-list">
+                        <li><a href="#">Vist & Explore</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">Upcoming Events</a></li>
+                        <li><a href="#">Musuem Store</a></li>
+                        <li><a href="#">Membership & Support</a></li>
+                        <li><a href="#">Education</a></li>
+                        <li><a href="#">Host An Event</a>
+                            <ul>
+                                <li><a href="#">General Events</a></li>
+                                <li><a href="#">Banquets</a></li>
+                                <li><a href="#">Corporate Meetings</a></li>
+                                <li><a href="#">Weddings</a></li>
+                                <li><a href="#">Event/Meeting Spaces</a></li>
+                                <li><a href="#">Approved Caterers</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </aside>
+            </header>
+            <div class="row content">
                 <div class="small-12 columns">
-                    <h1>America's Signature Collection<sup>&trade;</sup></h1>
+                    <ul class="breadcrumbs">
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">Host an Event</a></li>
+                        <li><a id="current-crumb" href="#">General Events</a></li>
+                    </ul>
                 </div>
-            </div>
-        </div>
-            <nav class="top-bar text-center show-for-medium-up" data-topbar role="navigation">
-            <section class="top-bar-section">
-                <ul>
-                    <li class="has-dropdown drop_left"><a href="#">Vist & Explore</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_left"><a href="#">About</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_left"><a href="#">Upcoming Events</a>
-                        <ul class="dropdown"><li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_left"><a href="#">Musuem Store</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_right"><a href="#">Membership & Support</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_right"><a href="#">Education</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">sub1</a></li>
-                            <li><a href="#">sub2</a></li>
-                            <li><a href="#">sub3</a></li>
-                            <li><a href="#">sub4</a></li>
-                        </ul>
-                    </li>
-                    <li class="has-dropdown drop_right"><a href="#">Host An Event</a>
-                        <ul class="dropdown">
-                            <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a href="#">General Events</a></li>
-                            <li><a href="#">Banquets</a></li>
-                            <li><a href="#">Corporate Meetings</a></li>
-                            <li><a href="#">Weddings</a></li>
-                            <li><a href="#">Event/Meeting Spaces</a></li>
-                            <li><a href="#">Approved Caterers</a></li>
-                        </ul>
-                    </li>
-                </ul>
-            </section>
-        </nav>
-        <nav class="tab-bar show-for-small-down">
-            <section class="small-left">
-                <a class="left-off-canvas-toggle menu-icon"><span>Menu</span></a>
-            </section>
-        </nav>
-        <aside class="left-off-canvas-menu">
-            <ul class="left-off-canvas-list">
-                <li><a href="#">Vist & Explore</a></li>
-                <li><a href="#">About</a></li>
-                <li><a href="#">Upcoming Events</a></li>
-                <li><a href="#">Musuem Store</a></li>
-                <li><a href="#">Membership & Support</a></li>
-                <li><a href="#">Education</a></li>
-                <li><a href="#">Host An Event</a>
+                <div class="medium-4 columns show-for-medium-up sidebar">
+                    <h2>Host an Event</h3>
                     <ul>
-                        <li><a href="#">General Events</a></li>
+                        <li><a id="active" href="#">General Events</a></li>
                         <li><a href="#">Banquets</a></li>
                         <li><a href="#">Corporate Meetings</a></li>
                         <li><a href="#">Weddings</a></li>
                         <li><a href="#">Event/Meeting Spaces</a></li>
                         <li><a href="#">Approved Caterers</a></li>
                     </ul>
-                </li>
-            </ul>
-        </aside>
-    </header>
-    <div class="content">
-        
-    </div>
-    <div class="row text-center">
-        <div class="small-12 columns">
-            <h3>The Gilmore Car Musuem</h3>
-            <p>6865 W Hickory Rd. Hickory Corners, MI 49060 &#8226; 269-671-5089 &#8226; <a id="direct" href="#">Directions</a></p>
-            <div id="soc-bottom" class="social">
-                <a href="#"><img src="assets/facebook.png"></a>
-                <a href="#"><img src="assets/pin.jpg"></a>
-                <a href="#"><img src="assets/twitt.jpg"></a>
-                <a href="#"><img src="assets/flickr-icon.jpg"></a>
-                <a href="#"><img src="assets/youtube_icon.jpg"></a>
-                <a href="#"><img src="assets/google.png"></a>
-                <a href="#"><img src="assets/share-icon.jpg"></a>
+                    <a class="tab" href="#"><h2>Upcoming Events</h2></a>
+                    <a class="tab" href="#"><h2>News</h2></a>
+                    <a class="tab" href="#"><h2>The Collections</h2></a>
+                    <a class="tab" href="#"><h2>Sponsors</h2></a>
+                </div>
+                <div class="small-12 medium-8 columns main">
+                    <h2>Hold an Event You Won't Soon Forget.<br>In a Venue Like No Other Around.</h2>
+                    <img src="assets/content_header-img.jpg">
+                        <img class="alignleft" src="assets/content_img1.jpg">
+                           
+                            <p>Let the Gilmore Car Museum be the backdrop for your next meeting, wedding, reception—special event. With 90-acres of manicured grounds, carefully restored historic structures, and over 350 exceptional vehicles, your friends, business associates, and guests will enjoy an unforgettable occasion.</p>
+                            <p>Our Carriage House and S-Barn are ideal venues for small get-togethers, our Automotive Heritage Center is just the place to make your next gathering a truly unique experience, and our beautifully manicured campus can accommodate events of virtually any size. Whether it’s right in the heart of the Museum or off in a secluded corner, your event can be catered to your tastes.</p>
+                            <img class="alignleft" src="assets/content_img2.jpg">
+                            <p>We’re there to help. At every turn.<br>Your rental fee includes the services of an event planner to help you with every step of preparations. We look forward to helping you create a one-of-a-kind experience.</p>
+                            <p>For more information or to make your reservation, contact:</p>
+                            <p>Director of Special Events<br>Betsy Gesmundo<br>269-671-5089 Ext. 12<br><a class="link">events@gilmorecarmuseum.org</a></p>
+                </div>
             </div>
-        </div>
-    </div>
-    <footer>
-        <div class="row">
-            <div class="small-12 medium-4 columns">
-                <img src="assets/email_signup-img.png">
+            <div class="row text-center">
+                <div class="small-12 columns">
+                    <h3>The Gilmore Car Musuem</h3>
+                    <p>6865 W Hickory Rd. Hickory Corners, MI 49060 &#8226; 269-671-5089 &#8226; <a class="link" href="#">Directions</a></p>
+                    <div id="soc-bottom" class="social">
+                        <a href="#"><img src="assets/facebook.png"></a>
+                        <a href="#"><img src="assets/pin.jpg"></a>
+                        <a href="#"><img src="assets/twitt.jpg"></a>
+                        <a href="#"><img src="assets/flickr-icon.jpg"></a>
+                        <a href="#"><img src="assets/youtube_icon.jpg"></a>
+                        <a href="#"><img src="assets/google.png"></a>
+                        <a href="#"><img src="assets/share-icon.jpg"></a>
+                    </div>
+                </div>
             </div>
-            <div class="small-12 medium-4 columns">
-                <a><img src="assets/trip.jpg"></a>
+            <footer>
+                <div class="row">
+                    <div class="small-12 medium-4 columns">
+                        <img src="assets/email_signup-img.png">
+                    </div>
+                    <div class="small-12 medium-4 columns">
+                        <a><img src="assets/trip.jpg"></a>
+                    </div>
+                    <div class="small-12 medium-4 columns">
+                        <a><img src="assets/sponsers.jpg"></a>
+                    </div>
+                </div>    
+            </footer>
+            <div class="row text-center">
+                <div class="small-6 medium-4 large-offset-1 large-2 columns">
+                    <a href="#"><img src="assets/naam-logo.png"></a>
+                </div>
+                <div class="small-6 medium-4 large-2 columns">
+                    <a href="#"><img src="assets/mma-logo.png"></a>
+                </div>
+                <div class="small-6 medium-4 large-2 columns">
+                    <a href="#"><img src="assets/motor-cities-logo.png"></a>
+                </div>
+                <div class="small-6 large-2 columns">
+                    <a href="#"><img src="assets/aam-logo.png"></a>
+                </div>
+                <div class="small-12 medium-6 large-2 columns left">
+                    <a href="#"><img src="assets/aaslh-logo.png"></a>
+                </div>
             </div>
-            <div class="small-12 medium-4 columns">
-                <a><img src="assets/sponsers.jpg"></a>
+            <div class="row">    
+                <div id="copyright" class="small-12 text-center">
+                    <p>The Gilmore Car Museum is a public, 501(c)3 non-profit educational institution, dedicated to preserving the history and heritage of the American automobile.</p>
+                    <p>&copy; 2015 Gilmore Car Musuem &#8226; All Rights Reserved &#8226; Produced by Gaslight Media</p>
+                </div>
             </div>
-        </div>    
-    </footer>
-    <div class="row text-center">
-        <div class="large-offset-1 columns show-for-large-up"></div>
-        <div class="small-6 medium-4 large-2 columns">
-            <a href="#"><img src=""></a>
-        </div>
-        <div class="small-6 medium-4 large-2 columns">
-            <a href="#"><img src=""></a>
-        </div>
-        <div class="small-6 medium-4 large-2 columns">
-            <a href="#"><img src=""></a>
-        </div>
-        <div class="small-6 large-2 columns">
-            <a href="#"><img src=""></a>
-        </div>
-        <div class="small-12 medium-6 large-2 columns">
-            <a href="#"><img src=""></a>
-        </div>
-    </div>
-    <div class="row">    
-        <div id="copyright" class="small-12 text-center">
-            <p>The Gilmore Car Museum is a public, 501(c)3 non-profit educational institution, dedicated to preserving the history and heritage of the American automobile.</p>
-            <p>&copy; 2015 Gilmore Car Musuem &#8226; All Rights Reserved &#8226; Produced by Gaslight Media</p>
-        </div>
-    </div>
+        </div><!--/inner-wrap-->
+    </div><!--/off-canvas-wrap-->
 
     <script src="bower_components/jquery/dist/jquery.min.js"></script>
     <script src="bower_components/foundation/js/foundation.min.js"></script>
index 606f914..71288ad 100644 (file)
@@ -127,7 +127,7 @@ $include-html-global-classes: $include-html-classes;
 // $info-color: #a0d3e8;
 
 // We use these to control various global styles
- $body-bg: url(../assets/bg.jpg) no-repeat;
+ $body-bg: url(../assets/bg.jpg) repeat;
  $body-font-color: $black;
 // $body-font-family: $font-family-sans-serif;
 // $body-font-weight: $font-weight-normal;
@@ -820,7 +820,7 @@ $include-html-global-classes: $include-html-classes;
 // Off Canvas Tab Bar Variables
 // $include-html-off-canvas-classes: $include-html-classes;
 
-// $tabbar-bg: $oil;
+ $tabbar-bg: $red;
 // $tabbar-height: rem-calc(45);
 // $tabbar-icon-width: $tabbar-height;
 // $tabbar-line-height: $tabbar-height;
@@ -840,7 +840,7 @@ $include-html-global-classes: $include-html-classes;
 
 // Off Canvas Menu Variables
 // $off-canvas-width: rem-calc(250);
-// $off-canvas-bg: $oil;
+ $off-canvas-bg: $red;
 
 // Off Canvas Menu List Variables
 // $off-canvas-label-padding: 0.3rem rem-calc(15);
index fb3232f..7b58418 100644 (file)
@@ -37,7 +37,7 @@ header {
                     color: #fff;
                     content: "|";
                     position: absolute;
-                    top: 2px;
+                    top: -1px;
                     left: -13px;
                     font-size: 12px;
                     font-weight: bold;
@@ -61,7 +61,7 @@ header {
             padding-bottom: 25px;
             padding-top: 5px;
             input {
-                width: 150px;
+                width: 100%;
                 height: 24px;
                 font-size: 0.5rem;
                 padding: 0 34px 0 10px;
@@ -71,7 +71,6 @@ header {
             img {
                 float: right;
                 margin-top: -24px;
-                margin-right: 34px;
                 border-radius: 10px;
             }
         }
@@ -84,6 +83,7 @@ header {
     .top-bar {
         @include gradient(#c54d38, #b71b1f);
         border-bottom: 4px solid $white;
+        box-shadow: 0 5px 5px 0 $black;
         .top-bar-section {
             background: transparent;
             float: none;
@@ -118,6 +118,7 @@ header {
                     &.drop_left {
                         & .dropdown {
                             padding-left: 248px;
+                            padding-right: 20px;
                             background: $white;
                             border-bottom-left-radius: 10px;
                             border-bottom-right-radius: 10px;
@@ -137,7 +138,6 @@ header {
                                     a:not(.button) {
                                         color: $black;
                                         background: transparent;
-                                        border-bottom: 1px solid #e7e7e8;
                                     }
                                 }
                                 &:hover:not(.has-form):not(.active) {
@@ -146,6 +146,9 @@ header {
                                         background: transparent;
                                     }
                                 }
+                                a {
+                                    border-bottom: 1px solid #e7e7e8;
+                                }
                             }
                         }
                     }
@@ -206,12 +209,31 @@ header {
                     content: none;
                 }
             }
+            .has-dropdown > a {
+                padding-right: 15px !important;
+                &:after {
+                    content: none;
+                }
+            }
+        }
+    }
+    .left-off-canvas-menu {
+        .left-off-canvas-list {
+            list-style: none;
+            li {
+                a {
+                    color: $white;
+                }
+                ul {
+                    list-style: none;
+                }
+            }
         }
     }
 }
 .slider {
-    background: url(../assets/slider_img.jpg);
     height: 480px;
+    background: url(../assets/slider_img.jpg);
 }
 .thumb-nav {
     background: rgba(0, 0, 0, 0.6);
@@ -278,6 +300,7 @@ header {
         border-left: 1px solid $black;
         border-bottom: 1px solid $black;
         border-right: 1px solid $black;
+        margin-bottom: 20px;
         label {
             margin-bottom: 25px;
             a {
@@ -293,24 +316,87 @@ header {
             
         }
     }
+    .breadcrumbs {
+        background: #fff;
+        margin-bottom: 0;
+        margin-top: 0;
+        border: none;
+        font-size: 10px;
+        a {
+            color: #b1b3b5;
+        }
+        #current-crumb {
+            font-weight: bold;
+        }
+        & > *:before {
+            content: ">";
+            color: $red;
+        }
+        & > :first-child:before {
+            content: " ";
+            margin: 0;
+        }
+
+    }
+    .main {
+        img {
+            border: 6px solid #fdefd4;
+            margin-bottom: 30px;
+        }
+    }
+    .sidebar {
+        h2 {
+            color: $black;
+            background: #9fa617;
+            text-align: center;
+            margin-bottom: 0;
+            padding: 5px 0;
+        }
+        ul {
+            list-style: none;
+            margin-left: 0;
+            li {
+                border-bottom: 1px solid $white;
+                background: #c5c974;
+                padding-left: 15px;
+                a {                    
+                    color: $black;
+                    &#active {
+                        color: $red;
+                    }
+                }
+            }
+        }
+        .tab {
+            background: #c8b776;
+            h2 {
+                color: $white;
+                background: #c8b776;
+                text-align: center;
+                margin-bottom: 8px;
+                
+            }
+        }
+    }
 }
 h3 {
     margin: 0;
 }
-a#direct {
+a.link {
     color: $red;
     text-decoration: underline;
     text-decoration-color: $red;
 }
 footer {
     background: #b9b8a3;
-    height: 203px;
     img {
         padding: 25px 0;
-        
     }
 }
 #copyright {
     margin-top: 32px;
-    margin-bottom: 200px;
+    margin-bottom: 150px;
+    p {
+        margin: 0;
+    }
 }
\ No newline at end of file
index ef23c8c..04f4e73 100644 (file)
@@ -1,7 +1,7 @@
 @import "settings";
 @import "foundation";
-@import "structure";
 @import "wordpress";
+@import "structure";
 
 // Or selectively include components
 // @import