progress before lunch break
authorIan Weller <ian@gaslightmedia.com>
Thu, 5 Feb 2015 16:56:20 +0000 (11:56 -0500)
committerIan Weller <ian@gaslightmedia.com>
Thu, 5 Feb 2015 16:56:20 +0000 (11:56 -0500)
index.html
scss/_settings.scss
scss/_structure.scss [new file with mode: 0644]

index 5ac0b5e..0f867a5 100644 (file)
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Foundation</title>
+    <title>Gilmore Car Museum</title>
     <link rel="stylesheet" href="css/app.css" />
     <script src="bower_components/modernizr/modernizr.js"></script>
   </head>
   <body>
-    <div class="row">
-      <div class="large-12 columns">
-        <h1>Welcome to Foundation</h1>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="large-12 columns">
-        <div class="panel">
-          <h3>We&rsquo;re stoked you want to try Foundation! </h3>
-          <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
-          <p>Once you've exhausted the fun in this document, you should check out:</p>
-          <div class="row">
-            <div class="large-4 medium-4 columns">
-          <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
-        </div>
-            <div class="large-4 medium-4 columns">
-              <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
-            </div>
-            <div class="large-4 medium-4 columns">
-              <p><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="large-8 medium-8 columns">
-        <h5>Here&rsquo;s your basic grid:</h5>
-        <!-- Grid Example -->
-
-        <div class="row">
-          <div class="large-12 columns">
-            <div class="callout panel">
-              <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="large-6 medium-6 columns">
-            <div class="callout panel">
-              <p>Six columns</p>
-            </div>
-          </div>
-          <div class="large-6 medium-6 columns">
-            <div class="callout panel">
-              <p>Six columns</p>
-            </div>
-          </div>
-        </div>
+    <header>
         <div class="row">
-          <div class="large-4 medium-4 small-4 columns">
-            <div class="callout panel">
-              <p>Four columns</p>
-            </div>
-          </div>
-          <div class="large-4 medium-4 small-4 columns">
-            <div class="callout panel">
-              <p>Four columns</p>
-            </div>
-          </div>
-          <div class="large-4 medium-4 small-4 columns">
-            <div class="callout panel">
-              <p>Four columns</p>
-            </div>
-          </div>
-        </div>
-
-        <hr />
-
-        <h5>We bet you&rsquo;ll need a form somewhere:</h5>
-        <form>
-          <div class="row">
-            <div class="large-12 columns">
-              <label>Input Label</label>
-              <input type="text" placeholder="large-12.columns" />
-            </div>
-          </div>
-          <div class="row">
-            <div class="large-4 medium-4 columns">
-              <label>Input Label</label>
-              <input type="text" placeholder="large-4.columns" />
-            </div>
-            <div class="large-4 medium-4 columns">
-              <label>Input Label</label>
-              <input type="text" placeholder="large-4.columns" />
-            </div>
-            <div class="large-4 medium-4 columns">
-              <div class="row collapse">
-                <label>Input Label</label>
-                <div class="small-9 columns">
-                  <input type="text" placeholder="small-9.columns" />
+            <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 right 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-3 columns">
-                  <span class="postfix">.com</span>
+                <div id="soc-top" class="small-6 columns left show-for-medium-up social">
+                    <p>Connect With Us</p><br>
+                    <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-icon.jpg"></a>
+                    <a href="#"><img src="assets/share-icon.jpg"></a>
+                </div>
+                <div class="small-12 columns">
+                    <h1>AMERICA'S SIGNATURE COLLECTION<p>TM</p></h1>
                 </div>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="large-12 columns">
-              <label>Select Box</label>
-              <select>
-                <option value="husker">Husker</option>
-                <option value="starbuck">Starbuck</option>
-                <option value="hotdog">Hot Dog</option>
-                <option value="apollo">Apollo</option>
-              </select>
-            </div>
-          </div>
-          <div class="row">
-            <div class="large-6 medium-6 columns">
-              <label>Choose Your Favorite</label>
-              <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
-              <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
-            </div>
-            <div class="large-6 medium-6 columns">
-              <label>Check these out</label>
-              <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
-              <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
-            </div>
-          </div>
-          <div class="row">
-            <div class="large-12 columns">
-              <label>Textarea Label</label>
-              <textarea placeholder="small-12.columns"></textarea>
             </div>
-          </div>
-        </form>
-      </div>
-
-      <div class="large-4 medium-4 columns">
-        <h5>Try one of these buttons:</h5>
-        <p><a href="#" class="small button">Simple Button</a><br/>
-        <a href="#" class="small radius button">Radius Button</a><br/>
-        <a href="#" class="small round button">Round Button</a><br/>
-        <a href="#" class="medium success button">Success Btn</a><br/>
-        <a href="#" class="medium alert button">Alert Btn</a><br/>
-        <a href="#" class="medium secondary button">Secondary Btn</a></p>
-        <div class="panel">
-          <h5>So many components, girl!</h5>
-          <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
-          <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>
         </div>
-      </div>
+        <nav class="top-bar text-center">
+            <section class="top-bar-section">
+                <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>
+                        <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>
+                        </ul>
+                    </li>
+                </ul>
+            </section>
+        </nav>
+    </header>
+    <div class="slider">
+        <img src=""
     </div>
 
     <script src="bower_components/jquery/dist/jquery.min.js"></script>
index e81c0f8..3394e6e 100644 (file)
@@ -89,7 +89,7 @@ $include-html-global-classes: $include-html-classes;
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 // We use these to define default font stacks
-// $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ $font-family-sans-serif: Helvetica, sans-serif;
 // $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
 // $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
 
@@ -97,7 +97,7 @@ $include-html-global-classes: $include-html-classes;
 // $font-weight-normal: normal;
 // $font-weight-bold: bold;
 
-// $white       : #FFFFFF;
+ $white       : #FFFFFF;
 // $ghost       : #FAFAFA;
 // $snow        : #F9F9F9;
 // $vapor       : #F6F6F6;
@@ -115,10 +115,11 @@ $include-html-global-classes: $include-html-classes;
 // $tuatara     : #444444;
 // $oil         : #333333;
 // $jet         : #222222;
-// $black       : #000000;
+ $black       : #000000;
+ $red         : #b5121b;  
 
 // We use these as default colors throughout
-// $primary-color: #008CBA;
+// $primary-color: $black;
 // $secondary-color: #e7e7e7;
 // $alert-color: #f04124;
 // $success-color: #43AC6A;
@@ -126,8 +127,8 @@ $include-html-global-classes: $include-html-classes;
 // $info-color: #a0d3e8;
 
 // We use these to control various global styles
-// $body-bg: $white;
-// $body-font-color: $jet;
+ $body-bg: url(../assets/bg.jpg);
+ $body-font-color: $black;
 // $body-font-family: $font-family-sans-serif;
 // $body-font-weight: $font-weight-normal;
 // $body-font-style: normal;
@@ -198,20 +199,20 @@ $include-html-global-classes: $include-html-classes;
 // $include-html-type-classes: $include-html-classes;
 
 // We use these to control header font styles
-// $header-font-family: $body-font-family;
+ $header-font-family: Copperplate, sans-serif;
 // $header-font-weight: $font-weight-normal;
 // $header-font-style: normal;
-// $header-font-color: $jet;
+ $header-font-color: $red;
 // $header-line-height: 1.4;
 // $header-top-margin: .2rem;
 // $header-bottom-margin: .5rem;
 // $header-text-rendering: optimizeLegibility;
 
 // We use these to control header font sizes
-// $h1-font-size: rem-calc(44);
-// $h2-font-size: rem-calc(37);
-// $h3-font-size: rem-calc(27);
-// $h4-font-size: rem-calc(23);
+ $h1-font-size: rem-calc(35);
+ $h2-font-size: rem-calc(32);
+ $h3-font-size: rem-calc(24);
+ $h4-font-size: rem-calc(20);
 // $h5-font-size: rem-calc(18);
 // $h6-font-size: 1rem;
 
diff --git a/scss/_structure.scss b/scss/_structure.scss
new file mode 100644 (file)
index 0000000..fe3d38c
--- /dev/null
@@ -0,0 +1,27 @@
+@mixin gradient($from, $to) {
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, $from), color-stop(1, $to));
+    background: -moz-linear-gradient(center top, $from 5%, $to 100%);
+    
+}
+header {
+    background: $black;
+    .sec_nav {
+        ul {
+            li {
+                a {
+                    font-size: 0.813em;
+                    color: $white;
+                }
+            }
+        }
+    }
+    #soc-top {
+        p {
+            font-size: font-size: 0.813em;
+            color: $white;
+        }
+    }
+    .top-bar {
+        
+    }
+}
\ No newline at end of file