update index

diff --git a/index.html b/index.html
index 9f334e9..c856724 100644 (file)
--- a/index.html
+++ b/index.html
@@ -49,13 +49,60 @@
             <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>
@@ -96,11 +143,16 @@
         </aside>
     </header>
     <div class="slider">
-        <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 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="row">

diff --git a/scss/_structure.scss b/scss/_structure.scss
index d7a39f8..4450ff8 100644 (file)
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -112,14 +112,75 @@ header {
                             content: none;
                         }
                     }
-                    & .dropdown li {
-                        white-space: nowrap;
-                        background: $white;
-                        .nav_img-container {
-                            position: absolute;
-                            left: 19px;
-                            top: 19px;
-                            
+                    &.drop_left {
+                        & .dropdown {
+                            padding-left: 248px;
+                            background: $white;
+                            li {
+                                white-space: nowrap;
+                                background: $white;
+                                &.nav_img-container {
+                                    img {
+                                        position: absolute;
+                                        left: 20px;
+                                        top: 23px;
+                                        border: 6px solid #fdefd4;
+                                    }
+                                }
+                                &:not(.has-form):not(.active) {
+                                    a:not(.button) {
+                                        color: $black;
+                                        background: transparent;
+                                    }
+                                }
+                                &:hover:not(.has-form):not(.active) {
+                                    a:not(.button) {
+                                        color: $red;
+                                        background: transparent;
+                                    }
+                                }
+                                a {
+                                    border-bottom: 1px solid #e7e7e8;
+                                }
+                            }
+                        }
+                    }
+                    &.drop_right {
+                        & .dropdown {
+                            padding-left: 248px;
+                            padding-right: 20px;
+                            right: -1%;
+                            left: auto;
+                            background: $white;
+                            border-bottom-left-radius: 10px;
+                            border-bottom-right-radius: 10px;
+                            li {
+                                white-space: nowrap;
+                                background: $white;
+                                &.nav_img-container {
+                                    img {
+                                        position: absolute;
+                                        left: 20px;
+                                        top: 23px;
+                                        border: 6px solid #fdefd4;
+                                    }
+                                }
+                                &:not(.has-form):not(.active) {
+                                    a:not(.button) {
+                                        color: $black;
+                                        background: transparent;
+                                    }
+                                }
+                                &:hover:not(.has-form):not(.active) {
+                                    a:not(.button) {
+                                        color: $red;
+                                        background: transparent;
+                                    }
+                                }
+                                a {
+                                    border-bottom: 1px solid #e7e7e8;
+                                }
+                            }
                         }
                     }
                 }
@@ -143,4 +204,18 @@ header {
             }
         }
     }
-}
\ No newline at end of file
+}
+.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;
+            }
+        }
+    }
+}