interior.html started

diff --git a/assets/content_header-img.jpg b/assets/content_header-img.jpg
new file mode 100644 (file)
index 0000000..2f3a439
Binary files /dev/null and b/assets/content_header-img.jpg differ

diff --git a/assets/content_img1.jpg b/assets/content_img1.jpg
new file mode 100644 (file)
index 0000000..49acb13
Binary files /dev/null and b/assets/content_img1.jpg differ

diff --git a/assets/content_img2.jpg b/assets/content_img2.jpg
new file mode 100644 (file)
index 0000000..4feddad
Binary files /dev/null and b/assets/content_img2.jpg differ

diff --git a/index.html b/index.html
index 2e35388..b25abc1 100644 (file)
--- a/index.html
+++ b/index.html
@@ -35,33 +35,58 @@
                     <a href="#"><img src="assets/share-icon.jpg"></a>
                 </div>
                 <div class="small-12 columns">
-                    <h1>AMERICA'S SIGNATURE COLLECTION<p>TM</p></h1>
+                    <h1>America's Signature Collection<sup>&trade;</sup></h1>
                 </div>
             </div>
         </div>
-        <nav class="top-bar text-center">
-            <section class="top-bar-section">
+        <nav class="top-bar">
+            <section class="top-bar-section text-center">
                 <ul>
-                    <li><a>VISIT & EXPLORE</a></li>
-                    <li><a>ABOUT</a></li>
-                    <li><a>UPCOMING EVENTS</a></li>
-                    <li><a>MUSEUM STORE</a></li>
-                    <li><a>MEMBERSHIP & SUPPORT</a></li>
-                    <li><a>EDUCATION</a></li>
-                    <li class="has-dropdown"><a>HOST AN EVENT</a>
+                    <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 class="has-dropdown"><a href="#">Host An Event</a>
                         <ul class="dropdown">
                             <li class="nav_img-container"><img src="assets/nav_img.jpg"></li>
-                            <li><a>GENERAL EVENTS</a></li>
-                            <li><a>BANQUETS</a></li>
-                            <li><a>CORPORATE MEETINGS</a></li>
-                            <li><a>WEDDINGS</a></li>
-                            <li><a>EVENT/MEETING SPACES</a></li>
-                            <li><a>APPROVED CATERERS</a></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="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a>
+                    <ul>
+                        <li><a href="#"></a></li>
+                        <li><a href="#"></a></li>
+                        <li><a href="#"></a></li>
+                        <li><a href="#"></a></li>
+                        <li><a href="#"></a></li>
+                        <li><a href="#"></a></li>
+                    </ul>
+                </li>
+            </ul>
+        </aside>
     </header>
     <div class="slider">
         <img src="assets/slide_sub1.jpg">
@@ -74,8 +99,56 @@
         <div class="row">
             <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>
+        <div class="row">
+            <div id="news" class="small-12 medium-4 columns">
+                <h3>News</h3>
+                <img src="assets/news_img.jpg">
+                <p><a class="event"></a></p>
+                <p><a class="event"></a></p>
+                <p><a class="event"></a></p>
+                <label><a href="#">More News</a></label>
+            </div>
+            <div id="upcoming" class="small-12 medium-4 columns">
+                <h3>Upcoming Events</h3>
+                <img src="assets/event_image.jpg">
+                <p class="date"></p>
+                <p class="date"></p>
+                <p class="date"></p>
+                <label><a href="#">View All Events</a></label>
+            </div>
+            <div id="partners" class="small-12 medium-4 columns">
+                <h3>Featured Partner</h3>
+                <img src="assets/partner_img.jpg">
+                <p></p>
+                <p></p>
             </div>
+        </div>
+    </div>
+    <div class="row text-center">
+        <div class="small-12 columns">
+            <h3>The Gilmore Car Musuem</h3>
+            <p><a href="#"></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>    
+    </footer>
+    <div class="row text-center">
+        
     </div>
 
     <script src="bower_components/jquery/dist/jquery.min.js"></script>

diff --git a/interior.html b/interior.html
new file mode 100644 (file)
index 0000000..077fafb
--- /dev/null
+++ b/interior.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gilmore Car Museum</title>
+    <link rel="stylesheet" href="css/app.css" />
+    <script src="bower_components/modernizr/modernizr.js"></script>
+  </head>
+  <body>
+    <header>
+        <div class="row">
+            <div class="small-12 medium-4 columns">
+                <a href="#"><img src="assets/logo.png"</a>
+            </div>
+            <div class="small-12 medium-8 columns right">
+                <div class="small-6 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 id="soc-top" class="small-6 columns show-for-medium-up social">
+                    <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="small-12 columns">
+                    <h1>America's Signature Collection</h1><p>TM</p>
+                </div>
+            </div>
+        </div>
+        <nav class="top-bar text-center">
+            <section class="top-bar-section">
+                <ul>
+                    <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 class="has-dropdown"><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="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a></li>
+                <li><a href="#"></a>
+                    <ul>
+                        <li><a href="#"></a></li>
+                        <li><a href="#"></a></li>
+                        <li><a href="#"></a></li>
+                        <li><a href="#"></a></li>
+                        <li><a href="#"></a></li>
+                        <li><a href="#"></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><a href="#"></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>    
+    </footer>
+    <div class="row text-center">
+        
+    </div>
+
+    <script src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="bower_components/foundation/js/foundation.min.js"></script>
+    <script src="js/app.js"></script>
+  </body>
+</html>

diff --git a/scss/_structure.scss b/scss/_structure.scss
index 13417dd..8505f6a 100644 (file)
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -5,36 +5,47 @@
 }
 header {
     background: $black;
-    .sec_nav {
-        ul {
-            li {
-                a {
-                    font-size: 0.813em;
-                    color: $white;
+    .row {
+        padding: 0;
+        .sec_nav {
+            ul {
+                li {
+                    a {
+                        font-size: 0.813em;
+                        color: $white;
+                    }
                 }
             }
         }
-    }
-    #soc-top {
-        p {
-            font-size: 0.813em;
-            color: $white;
-            margin: 0;
+        #soc-top {
+            p {
+                font-size: 0.813em;
+                color: $white;
+                margin: 0;
+            }
         }
     }
     .top-bar {
         @include gradient(#c54d38, #b71b1f);
-        border-bottom: 2px solid $white;
+        border-bottom: 4px solid $white;
         .top-bar-section {
+            background: transparent;
             ul {
                 li {
+                    background: transparent;
                     a {
                         color: $white;
                         font-size: 1.125em;
+                        background: transparent;
                         &:hover {
                             background: #9fa617;
                         }
                     }
+                    &:not(.has-form) {
+                        a:not(.button) {
+                            background: transparent;
+                        }
+                    }
                 }
             }
         }