kcc-nma-art128 · lissah · May 5, 2016
diff --git a/css/style.css b/css/style.css
diff --git a/images/cartoon.jpg b/images/cartoon.jpg
diff --git a/images/darkbg.jpg b/images/darkbg.jpg
diff --git a/images/hair.jpg b/images/hair.jpg
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/salon.png b/images/salon.png
diff --git a/images/scissors.png b/images/scissors.png
diff --git a/images/stylist1.jpg b/images/stylist1.jpg
diff --git a/images/stylist_1.jpg b/images/stylist_1.jpg
diff --git a/images/stylist_2.jpg b/images/stylist_2.jpg
diff --git a/images/stylist_3.jpg b/images/stylist_3.jpg
diff --git a/images/stylist_4.jpg b/images/stylist_4.jpg
diff --git a/images/stylist_5.jpg b/images/stylist_5.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Lissa Hardbarger's Final</title>
+
+    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
+<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
+    <link href="css/style.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
+    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+
+
+    </head>
+  <body>
+  <link href='https://fonts.googleapis.com/css?family=Raleway:400,200,300,300italic' rel='stylesheet' type='text/css'>
+
+  <div class="logo">
+<img src="images/logo.png">
+  <span>SALON MEI</span>
+  </div>
+
+<header class="mainnav">
+  <a href="#homepage" class="darken">Home</a>
+  <a href="#about" class="darken">About</a>
+  <a href="#services" class="darken">Services</a>
+  <a href="#stylists" class="darken">Stylists</a>
+  <a href="#contact" class="darken">Contact</a>
+</header>
+
+<section class="homepage" id="homepage">
+
+  <h1>Where Style is Everything.</h1>
+</section>
+
+<section class="about" id="about">
+  <div class="aboutbox col">
+    <h1>About</h1>
+    We are a certified Paul Mitchell Signature Salon that has
+progressed to groom many of Hawai’i’s greatest artists, performers, and politicians.
+ Mei Au, the founder and owner, has been cutting and styling hair for over 27 years, and is giving
+ back to her craft by bringing in fresh and talented professionals who share her passion for hairstyling.
+We believe that if you improve the look of a person, their inner person feels better and can then become more productive and interactive in today's “fast paced world.”
+  </div>
+</section>
+
+<section class="services" id="services">
+  <div class="servbox col">
+    <h1>Services</h1>
+    <div class="servwhitebox row">
+    <div class="servbox2 col">
+      <strong>Hair Care</strong><br>
+  Women’s Haircut						$40.00-$60.00<br>
+  Men’s Haircut							$25.00-$35.00<br>
+  Shampoo/Style (Short Hair) 				$35.00<br>
+  Shampoo/Style (Long Hair)				$40.00<br>
+  Keratriplex Treatment					$45.00+<br>
+  <br>
+  <strong>Make-Up</strong><br>
+  Bridal Up-Do							$75.00<br>
+  Bridal Makeup							$75.00<br>
+  <br>
+  <strong>Hair Color</strong><br>
+  Keratin Complex Smoothing Treatment		$200.00+<br>
+  Ombre 								$180.00+<br>
+  Balayage								$180.00+<br>
+  Relaxing (Sodium Hydroxide)				$100.00+<br>
+  Color Retouch							$60.00+<br>
+  All Over Color							$80.00+<br>
+  Full Highlight							$180.00+<br>
+  Partial Highlight						$130.00+
+    </div>
+    <div class="servbox3 col">
+      <strong>Combination Packages</strong><br>
+Hair Cut & Color (root touch-up)				$100.00<br>
+Hair Cut, Color & Keratriplex Treatment			$140.00<br>
+Hair Cut, Color & Directional Highlight			$150.00<br>
+Ombre´ with Haircut Special					$200.00<br>
+Balyage with Haircut Special					$200.00<br><br>
+
+ <small>*Participating stylists only.  For all of our chemical services the final price will be determined upon consultation. (where additional
+chemicals are needed, the cost will increase)
+Notice - All prices are subject to change without notice. Please call for the most up-to-date pricing and specials. The final price for all of our chemical services will be determined upon consultation. (Where
+additional chemicals are needed, the cost will increase accordingly.)</small>
+    </div>
+  </div>
+</div>
+</section>
+
+<section class="stylists" id="stylists">
+<h1>Stylists</h1>
+<div class="mainstylistbox">
+  <div class="mainstylistimage">
+  <img src="images/stylist1.jpg">
+  </div>
+  <div class="mainstylisttext">
+  <h5>Cla Yoo</h5>
+  <br>
+  <strong>About Me:</strong><br>
+Hey! I’m Cla. I’ve been cutting hair for 6 years, but my true love is color. You might say that I’m one of the best on the island, but I’ll leave that judgement up to you!<br><br><br>
+<strong>Education & Training:</strong><br>
+Paul Mitchell School of Beauty<br><br><br>
+<strong>Specialties:</strong><br>
+Color Correction and Makeup<br><br>
+
+
+</div>
+</div>
+<div class="otherstylistnav row slider-nav">
+  <a href="#" class="darken"><img src="images/stylist_1.jpg"></a>
+  <a href="#" class="darken"><img src="images/stylist_2.jpg"></a>
+  <a href="#" class="darken"><img src="images/stylist_3.jpg"></a>
+  <a href="#" class="darken"><img src="images/stylist_4.jpg"></a>
+  <a href="#" class="darken"><img src="images/stylist_5.jpg"></a>
+</div>
+</section>
+
+<section class="contact" id="contact">
+<div class="contactbox col">
+  <div class="contwhitebox">
+        <h1>Contact</h1>
+    <style>
+       #map {
+         width: 100%;
+         height: 500px;
+       }
+     </style>
+   </head>
+   <body>
+     <div id="map"></div>
+     <script>
+       function initMap() {
+         var mapDiv = document.getElementById('map');
+         var map = new google.maps.Map(mapDiv, {
+           center: {lat: 21.292073, lng: -157.839175},
+           zoom: 17
+         });
+       }
+     </script>
+     <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
+       async defer></script>
+    </div>
+</div>
+</section>
+
+<footer class="footer">
+  <div class="footbox1">
+<strong>Hours:</strong><br>
+Monday - Saturday<br>
+8AM - 7PM<br><br>
+
+Ph:<br>
+808.955.1600<br>
+</div>
+  <div class="footbox2">
+    <strong>Find us!</strong><br>
+1600 Kapoilani Blvd<br>
+Suite 222 in the Annex<br>
+Honolulu, HI 96814
+
+
+</footer>
+
+
+<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
+<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+<script type="text/javascript" src="slick/slick.min.js"></script>
+
+<script src="js/scripts.js">
+</script>
+  </body>
+</html>
diff --git a/js/scripts.js b/js/scripts.js
@@ -0,0 +1,77 @@
+
+var $logo = $('.logo');
+var $logoOffsetTop = $logo.offset().top;
+
+$(window).scroll(function() {
+  if( $(this).scrollTop() > ($logoOffsetTop) ) {
+    $logo.addClass("fixed");
+  } else {
+    $logo.removeClass("fixed");
+  }
+});
+
+
+/*classifying mainnav as $mainNav*/
+var $mainNav = $(".mainnav");
+
+/*classifying headerheight as 150*/
+var $headerHeight = 150;
+
+/*classifying mainnav behavior*/
+$(window).scroll(function() {
+  if( $(this).scrollTop() > ($headerHeight) ) {
+    $mainNav.addClass("fixed");
+    $logo.addClass("hide-text");
+  } else {
+    $mainNav.removeClass("fixed");
+    $logo.removeClass("hide-text");
+  }
+});
+
+/*setting smoothscroll*/
+$(document).ready(function(){
+	$('a[href^="#"]').on('click',function (e) {
+	    e.preventDefault();
+
+	    var target = this.hash;
+	    var $target = $(target);
+
+	    $('html, body').stop().animate({
+	        'scrollTop': $target.offset().top
+	    }, 900, 'swing', function () {
+	        window.location.hash = target;
+	    });
+	});
+});
+
+
+
+
+/*setting point on google maps*/
+function initMap() {
+  var myLatLng = {lat: 21.292073, lng: -157.839175};
+
+  var map = new google.maps.Map(document.getElementById('map'), {
+    zoom: 17,
+    scrollwheel: false,
+    center: myLatLng
+  });
+
+
+
+  marker = new google.maps.Marker({
+  map: map,
+  draggable: true,
+  animation: google.maps.Animation.DROP,
+  position: {lat: 21.292073, lng: -157.839175}
+});
+marker.addListener('click', toggleBounce);
+}
+
+function toggleBounce() {
+if (marker.getAnimation() !== null) {
+  marker.setAnimation(null);
+} else {
+  marker.setAnimation(google.maps.Animation.BOUNCE);
+}
+}
diff --git a/slick/ajax-loader.gif b/slick/ajax-loader.gif
diff --git a/slick/fonts/slick.eot b/slick/fonts/slick.eot
diff --git a/slick/fonts/slick.svg b/slick/fonts/slick.svg
diff --git a/slick/fonts/slick.ttf b/slick/fonts/slick.ttf
diff --git a/slick/fonts/slick.woff b/slick/fonts/slick.woff