diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..447b1d7
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,634 @@
+/* CSS TABLE OF CONTENTS
+=====================================
+ #BASE CSS
+ #SITE-SPECIFIC CSS
+===================================== */
+
+
+/*
+=====================================
+========== BEGIN BASE CSS ===========
+=====================================
+*/
+
+/* BASE CSS (Initital Base Setup)
+Description: "Base" css is an initial set of core
+styles that can be used (and reused) as a start
+for most sites. It should be placed at the top so
+it can be over-written by site-specific styling
+below.
+=====================================
+ #RESET
+ #HTML5
+ #BASE TYPOGRAPHY
+ #BODY
+ #HEADINGS
+ #PARAGRAPHS
+ #LINKS
+ #LISTS
+ #IMAGES
+ #CLEARFIX
+===================================== */
+
+
+/* #RESET
+================================================== */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing:border-box;
+}
+
+/* #HTML5
+================================================== */
+header, section, footer, aside, nav, article, figure {
+ display: block;
+}
+
+/* #BASE TYPOGRAPHY
+================================================== */
+
+/* #BODY */
+body {
+ font-family: 'Raleway', sans-serif Helvetica, Arial, sans-serif;
+ font-size: 100%; /* 1em = 16px */
+ line-height: 1.5em; /* 16px x 1.5em = 24px */
+ color: #000;
+}
+
+/* #HEADINGS
+Based on a Traditional Typographic Scale:
+48, 36, 24, 21, 18, 16
+================================================== */
+
+h1, h2, h3, h4, h5, h6 {
+ margin-bottom: .5em;
+}
+
+h1 {
+ font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
+ font-size: 3.125em;
+ font-style: normal;
+ letter-spacing: -0.05em;
+ color: #000;
+ }
+
+h1 a {
+ color: #000;
+ text-decoration: none;
+ }
+
+h2 {
+ font-size: 2.25em; /* 36px / 16px = 2.25em */
+ line-height: 1.1em;
+}
+
+h3 {
+ font-size: 1.5em; /* 24px / 16px = 1.5em */
+ line-height: 1.2em;
+}
+
+h4 {
+ font-size: 1.3125em; /* 21px / 16px = 1.3125em */
+ line-height: 1.3em;
+}
+
+h5 {
+ font-size: 1.125em; /* 18px / 16px = 1.125em */
+ line-height: 1.4em;
+}
+
+h6 {
+ font-size: 1em; /* 16px / 16px = 1em */
+ line-height: 1.5em;
+}
+
+/* #Paragraphs
+================================================== */
+p {
+ margin-bottom: .5em;
+}
+
+
+/* #Links
+================================================== */
+a { color: #39c; text-decoration: none; }
+a:visited, a:hover, a:focus { color: #069; }
+
+
+/* #Lists
+================================================== */
+ul, ol {
+ margin-bottom: .5em;
+}
+
+ul li ul, ul li ol, ol li ul, ol li ol {
+ margin: 0;
+}
+
+li {
+ margin-left: 1.875em;
+}
+
+
+/* #Images
+================================================== */
+img.scale-with-grid {
+ max-width: 100%;
+ height: auto;
+}
+
+a img {
+ border: none;
+}
+
+
+/* #CLEARFIX
+================================================== */
+.row:before,
+.row:after {
+ content: "";
+ display: table;
+}
+.row:after {
+ clear: both;
+}
+.row {
+ clear: both;
+ *zoom: 1;
+}
+
+
+/*
+=====================================
+=========== END BASE CSS ============
+=====================================
+*/
+
+
+/*
+=====================================
+===== BEGIN SITE- SPECIFIC CSS ======
+=====================================
+*/
+
+/* SITE-SPECIFIC CSS (Site-Specific Design)
+Description: "Site-specific" css is where all
+site-specific visual design styles. Site-specific
+css should be placed on the bottom to
+override any base styling above it.
+=====================================
+ #SITE-SPECIFIC BASE STYLING
+ #SITE-SPECIFIC TYPOGRAPHY
+ #LAYOUT/GRID
+ #SECTIONS
+ #MEDIA QUERIES
+ #@FONT-FACE
+===================================== */
+
+/* SITE-SPECIFIC BASE STYLING
+Description: Adjust general base settings above with
+site-specific styles here.
+(e.g. body background color)
+===================================== */
+
+body {
+ background: #fff;
+ width:100%;
+ height:100%;
+}
+
+.mainnav {
+ background:rgba(255, 255, 255, 0.75);
+ position:absolute;
+ width:100%;
+ height: 60px;
+ margin-top:150px;
+ padding: 20px 25px 0 25px;
+ z-index: 500;
+}
+
+.mainnav.fixed {
+ position:fixed;
+ margin-top:0px;
+}
+
+.mainnav a.darken {
+ padding:25px;
+ -webkit-transition: all 0.2s linear;
+ -moz-transition: all 0.2s linear;
+ -ms-transition: all 0.2s linear;
+ -o-transition: all 0.2s linear;
+ transition: all 0.2s linear;
+ opacity:.4;
+}
+
+.mainnav a.darken:hover {
+ opacity: 1;
+}
+
+.homepage {
+ width:100%;
+ height: 100vh;
+ background: #fff;
+ background: url("../images/salon.png") no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ padding-bottom:15%;
+}
+
+.about {
+ width:100%;
+ height:100vh;
+ background: #fff;
+ background: url("../images/scissors.png") no-repeat center center;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+}
+
+.homepage img {
+ margin: 57px 0 0 52px;
+}
+
+.aboutbox {
+ background:rgba(208, 200, 196, 0.95);;
+width:95%;
+ position:absolute;
+ margin:auto;
+ padding: 7% 20% 10%;
+ top:165%;
+ left:50%;
+ margin-left:-47.5%;
+ margin-top:-25%;
+}
+
+/*old code
+ width:95%;
+display:inline-block;
+padding: 5% 20% 6%;
+margin: 15% 0 45% 0; */
+
+.services {
+ height:100vh;
+ background:none;
+}
+.servbox {
+ background:#9a6a65;
+ background: url("../images/hair.jpg") no-repeat center center;
+ width:95%;
+ position:absolute;
+ margin:auto;
+ padding: 0 5% 2%;
+ top:250%;
+ left:50%;
+ margin-left:-47.5%;
+ margin-top:-25%;
+}
+
+.servbox2 {
+ width: 40%;
+ margin-left:15%;
+ float:left;
+ clear:none;
+}
+
+.servbox3 {
+ width: 30%;
+ margin-right:15%;
+ float:left;
+ clear:none;
+}
+
+.servwhitebox {
+ background:rgba(255, 255, 255, 0.25);
+ padding: 5% 0 5%;
+}
+
+.mainstylistbox {
+ background:#9a6a65;
+ background: url("../images/cartoon.jpg") repeat center center;
+ width:70%;
+ display:inline-block;
+ padding-right: 1.5%;
+ overflow:hidden;
+}
+
+.mainstylistbox img {
+ width: 65%;
+ float:left;
+ clear: none;
+ margin-right:2%;
+}
+
+.mainstylisttext {
+ padding-top: 10%;
+}
+
+.otherstylistnav {
+ width: 80%;
+}
+.otherstylistnav img {
+ width:10%;
+ margin: 2% 1%;
+ border: solid 4px transparent;
+ opacity:.5;
+}
+
+.otherstylistnav a:hover img {
+ border: 4px solid #9d8188;
+}
+
+.otherstylistnav:last-of-type {
+ padding-bottom:7%;
+}
+
+a.darken img {
+ -webkit-transition: all 0.2s linear;
+ -moz-transition: all 0.2s linear;
+ -ms-transition: all 0.2s linear;
+ -o-transition: all 0.2s linear;
+ transition: all 0.2s linear;
+}
+
+a.darken:hover img {
+ opacity: 1;
+}
+
+.contactbox {
+ background: url("../images/darkbg.jpg") no-repeat center center fixed;
+ width:95%;
+ margin: 1% 2.5% 0;
+ display:inline-block;
+}
+
+.contact {
+ background: url("../images/darkbg.jpg") no-repeat center center fixed;
+ padding: 100px 0;
+}
+
+.contwhitebox {
+ background:rgba(255, 255, 255, 0.75);
+ padding: 3%;
+ margin:3%;
+}
+
+
+.footer {
+ background:rgba(255, 255, 255, 0.25);
+ width:100%;
+ padding:3% 0 3%;
+ float:left;
+}
+
+.footbox1 {
+ width: 30%;
+ margin-left:30%;
+ float:left;
+ clear:none;
+}
+
+.footbox2 {
+ width: 20%;
+ margin-right:20%;
+ float:left;
+ clear:none;
+}
+
+/* SITE-SPECIFIC TYPOGRAPHY
+Description: Adjust the base typography settings above
+with site-specific styles here.
+(e.g. headings, paragraphs, colors, etc.)
+===================================== */
+
+.mainnav {
+font-family: 'Raleway', sans-serif;
+font-weight: 200;
+text-align: center;
+text-transform: uppercase;
+font-size: 1em;
+}
+
+.mainnav a {
+ color:#000;
+}
+
+.logo {
+font-family: 'Raleway', sans-serif;
+font-size: 3em;
+font-weight: 100;
+color: #fff;
+padding-left:15px;
+vertical-align: text-bottom;
+position: absolute;
+background: transparent;
+top:50px;
+left:50px;
+z-index: 999;
+
+}
+
+.logo.fixed {
+ position: fixed;
+ top: 0;
+ left: 50px;
+}
+.logo.hide-text {
+ color:transparent;
+ -webkit-transform: scale(0.75);
+ transform: scale(0.75);
+ -webkit-transition: all 0.2s linear;
+ -moz-transition: all 0.2s linear;
+ -ms-transition: all 0.2s linear;
+ -o-transition: all 0.2s linear;
+ transition: all 0.2s linear;
+}
+
+
+.homepage h1 {
+ font-family: 'Raleway', sans-serif;
+ color: #fff;
+ font-size:4.5em;
+ font-weight: 300;
+ text-align: center;
+ padding-top:50%;
+ margin-top:0;
+}
+
+.about h1 {
+ font-family: 'Raleway', sans-serif;
+ color: #000;
+ font-size:4.5em;
+ font-weight: 100;
+ text-align: center;
+ text-transform: uppercase;
+ padding: 3% 0 3% 0;
+}
+
+.aboutbox {
+ font-family: 'Raleway', sans-serif;
+ color: #000;
+ font-size:1em;
+ line-height: 2em;
+ font-weight: 300;
+ text-align: center;
+}
+
+.servbox {
+ font-family: 'Raleway', sans-serif;
+ color: #000;
+ font-size:1em;
+ font-weight: 300;
+ text-align: center;
+}
+
+.servbox h1 {
+ font-family: 'Raleway', sans-serif;
+ color: #000;
+ font-size:4.5em;
+ font-weight: 100;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+.servbox2, .servbox3 {
+ text-align: left;
+}
+
+.servbox strong {
+ font-size: 1.5em;
+ font-weight: 300;
+}
+
+.servbox small {
+ font-style: italic;
+}
+
+.stylists h1 {
+ font-family: 'Raleway', sans-serif;
+ color: #000;
+ font-size:4.5em;
+ font-weight: 100;
+ text-align: center;
+ text-transform: uppercase;
+ margin: 15% 0 0 0;
+ padding-top: 7%;
+}
+
+.stylists {
+ font-family: 'Raleway', sans-serif;
+ color: #000;
+ font-size:1em;
+ font-weight: 100;
+ text-align: center;
+}
+
+.mainstylistbox {
+ text-align:left;
+}
+
+.mainstylistbox strong {
+ font-family: 'Raleway', sans-serif;
+ font-size: 1.5em;
+ font-weight: 300;
+}
+
+.mainstylistbox h5 {
+ font-family: 'Raleway', sans-serif;
+ font-size: 2.5em;
+ font-weight: 300;
+}
+
+.contact {
+ font-family: 'Raleway', sans-serif;
+ color: #000;
+ font-size:1em;
+ font-weight: 100;
+ text-align: center;
+}
+
+.contact h1 {
+ font-family: 'Raleway', sans-serif;
+ color: #000;
+ font-size:4.5em;
+ font-weight: 100;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+.footer {
+font-family: 'Raleway', sans-serif;
+font-weight: 200;
+text-align: center;
+font-size: 1em;
+}
+
+.footer strong {
+ font-size: 1.5em;
+ font-weight: 300;
+}
+
+.footbox1, .footbox2 {
+ text-align: left;
+}
+
+
+/* LAYOUT/GRID
+Description: Place grid and visual layout styling here.
+(e.g. containers, rows, columns)
+===================================== */
+.container {
+ /* Fixed width: 960px */
+ width: 60em; /* 960px / 16px (base) = 60em - (5em padding x 2) = 50em */
+ margin: 0.625em auto;
+ padding: 0 0.625em;
+}
+
+.row {
+ /* Fixed width: 960px */
+ width: 100%; /* 960px / 16px (base) = 60em - (5em padding x 2) = 50em */
+}
+
+
+
+}
+
+@media all and (min-width: 48em) and (max-width: 62em) {
+
+ body {
+ font-size: 93.75%; /* 15px */
+ }
+
+ .container {
+ width: 96%;
+ margin: 2%;
+ padding: 2%;
+ }
+/* MOBILE (Smaller than 768px)*/
+@media all and (max-width: 47.9999em) {
+
+ body {
+ font-size: 87.5%; /* 14px */
+ }
+
+ .container {
+ width: 60%;
+ margin: 2%;
+ padding: 2%;
+ }
+
+
+}
+
+/* @FONT-FACE (Webfonts)
+===================================== */
+
+
+/*
+=====================================
+====== END SITE- SPECIFIC CSS =======
+=====================================
+*/
diff --git a/images/cartoon.jpg b/images/cartoon.jpg
new file mode 100644
index 0000000..009cd09
Binary files /dev/null and b/images/cartoon.jpg differ
diff --git a/images/darkbg.jpg b/images/darkbg.jpg
new file mode 100644
index 0000000..e83d80c
Binary files /dev/null and b/images/darkbg.jpg differ
diff --git a/images/hair.jpg b/images/hair.jpg
new file mode 100644
index 0000000..ab3ba00
Binary files /dev/null and b/images/hair.jpg differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000..5b2ac14
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/salon.png b/images/salon.png
new file mode 100644
index 0000000..7836bb1
Binary files /dev/null and b/images/salon.png differ
diff --git a/images/scissors.png b/images/scissors.png
new file mode 100644
index 0000000..ea0add3
Binary files /dev/null and b/images/scissors.png differ
diff --git a/images/stylist1.jpg b/images/stylist1.jpg
new file mode 100644
index 0000000..543667e
Binary files /dev/null and b/images/stylist1.jpg differ
diff --git a/images/stylist_1.jpg b/images/stylist_1.jpg
new file mode 100644
index 0000000..a2ffd26
Binary files /dev/null and b/images/stylist_1.jpg differ
diff --git a/images/stylist_2.jpg b/images/stylist_2.jpg
new file mode 100644
index 0000000..9cde42a
Binary files /dev/null and b/images/stylist_2.jpg differ
diff --git a/images/stylist_3.jpg b/images/stylist_3.jpg
new file mode 100644
index 0000000..4f95106
Binary files /dev/null and b/images/stylist_3.jpg differ
diff --git a/images/stylist_4.jpg b/images/stylist_4.jpg
new file mode 100644
index 0000000..67efb4b
Binary files /dev/null and b/images/stylist_4.jpg differ
diff --git a/images/stylist_5.jpg b/images/stylist_5.jpg
new file mode 100644
index 0000000..48f7e1c
Binary files /dev/null and b/images/stylist_5.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b496e47
--- /dev/null
+++ b/index.html
@@ -0,0 +1,172 @@
+
+
+
+
+ Lissa Hardbarger's Final
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
SALON MEI
+
+
+
+
+
+
+ Where Style is Everything.
+
+
+
+
+
About
+ 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.”
+
+
+
+
+
+
Services
+
+
+ Hair Care
+ Women’s Haircut $40.00-$60.00
+ Men’s Haircut $25.00-$35.00
+ Shampoo/Style (Short Hair) $35.00
+ Shampoo/Style (Long Hair) $40.00
+ Keratriplex Treatment $45.00+
+
+ Make-Up
+ Bridal Up-Do $75.00
+ Bridal Makeup $75.00
+
+ Hair Color
+ Keratin Complex Smoothing Treatment $200.00+
+ Ombre $180.00+
+ Balayage $180.00+
+ Relaxing (Sodium Hydroxide) $100.00+
+ Color Retouch $60.00+
+ All Over Color $80.00+
+ Full Highlight $180.00+
+ Partial Highlight $130.00+
+
+
+ Combination Packages
+Hair Cut & Color (root touch-up) $100.00
+Hair Cut, Color & Keratriplex Treatment $140.00
+Hair Cut, Color & Directional Highlight $150.00
+Ombre´ with Haircut Special $200.00
+Balyage with Haircut Special $200.00
+
+ *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.)
+
+
+
+
+
+
+Stylists
+
+
+
+
+
+
Cla Yoo
+
+ About Me:
+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!
+Education & Training:
+Paul Mitchell School of Beauty
+Specialties:
+Color Correction and Makeup
+
+
+
+
+
+
+
+
+
+