</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>
+ <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="#"></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="#">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 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>
- <div class="content">
+ <div class="thumb-nav">
<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® 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 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 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 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® 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>
+ <img src="assets/news_img.jpg">
+ <p>Sunday, June 7, 2015<br><a class="event">Classic Car Club of American Museum "Grand Experience"</a></p>
+ <p>Saturday, June 13, 2015<<br>a class="event">Pre-Show Vintage Motorcycle Ride</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 class="text-center">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 class="text-center">Featured Partner</h3>
+ <img src="assets/partner_img.jpg">
+ <p></p>
+ <p></p>
</div>
</div>
<div class="row text-center">
<div class="small-12 columns">
<h3>The Gilmore Car Musuem</h3>
- <p><a href="#"></a></p>
+ <p>6865 W Hickory Rd. Hickory Corners, MI 49060 • 269-671-5089 • <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>
</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>
</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.jpg"></a>
+ </div>
+ <div class="small-6 medium-4 large-2 columns">
+ <a href="#"><img src="assets/MMA.jpg"></a>
+ </div>
+ <div class="small-6 medium-4 large-2 columns">
+ <a href="#"><img src="assets/motor_cities.jpg"></a>
+ </div>
+ <div class="small-6 large-2 columns">
+ <a href="#"><img src="assets/AAM.jpg"></a>
+ </div>
+ <div class="small-12 medium-6 large-2 columns">
+ <a href="#"><img src="assets/AASLH.jpg"></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>© 2015 Gilmore Car Musuem • All Rights Reserved • Produced by Gaslight Media</p>
+ </div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<header>
<div class="row">
<div class="small-12 medium-4 columns">
- <a href="#"><img src="assets/logo.png"</a>
+ <a id="logo" 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">
+ <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>
+
+ <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 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</h1><p>TM</p>
+ <h1>America's Signature Collection<sup>™</sup></h1>
</div>
</div>
</div>
- <nav class="top-bar text-center">
+ <nav class="top-bar text-center show-for-medium-up" data-topbar role="navigation">
<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>
+ <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>
// $info-color: #a0d3e8;
// We use these to control various global styles
- $body-bg: url(../assets/bg.jpg);
+ $body-bg: url(../assets/bg.jpg) no-repeat;
$body-font-color: $black;
// $body-font-family: $font-family-sans-serif;
// $body-font-weight: $font-weight-normal;
// $include-html-type-classes: $include-html-classes;
// We use these to control header font styles
- $header-font-family: Copperplate, Copperplate Gothic Light, sans-serif;
+ $header-font-family: Copperplate, Copperplate Gothic Light;
// $header-font-weight: $font-weight-normal;
// $header-font-style: normal;
$header-font-color: $red;
// We use these to style paragraphs
// $paragraph-font-family: inherit;
// $paragraph-font-weight: $font-weight-normal;
-// $paragraph-font-size: 1rem;
+ $paragraph-font-size: 0.875rem;
// $paragraph-line-height: 1.6;
// $paragraph-margin-bottom: rem-calc(20);
// $paragraph-aside-font-size: rem-calc(14);
background: -moz-linear-gradient(center top, $from 5%, $to 100%);
filter: progid:DXIm-ageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr'#{$to}');
}
-h1, h2, h3, h4 {
+body {
+ background-size: cover;
+}
+h1, h2, h3 {
text-transform: uppercase;
}
header {
.slider {
background: url(../assets/slider_img.jpg);
height: 480px;
- .thumb-nav {
- background: rgba(0, 0, 0, 0.6);
- #thumb {
- padding: 0 20px;
- img {
- margin: 13px;
- border: 1px solid $white;
- }
+}
+.thumb-nav {
+ background: rgba(0, 0, 0, 0.6);
+ margin-top: -88px;
+ #thumb {
+ padding: 0 20px;
+ img {
+ margin: 13px;
+ border: 1px solid $white;
}
}
}
+.content {
+ background: $white;
+ padding: 30px 0;
+ margin-bottom: 20px;
+ h3 {
+ color: $white;
+ }
+ #news {
+ h3 {
+ background: $red;
+ padding: 10px 0;
+ margin: 0;
+ }
+ width: 288px;
+ }
+
+}
+h3 {
+ margin: 0;
+}
+a#direct {
+ 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;
+}
\ No newline at end of file
projects / WP-Themes / gilmoremuseum.git / commitdiff
