una · jackychangck · Aug 27, 2020 · Aug 27, 2020 · Aug 27, 2020 · Aug 29, 2020
diff --git a/background.jpg b/background.jpg
diff --git a/cssgram-newlogo.png b/cssgram-newlogo.png
diff --git a/site/css/demo-site.min.css b/site/css/demo-site.min.css
diff --git a/site/img/background.jpg b/site/img/background.jpg
diff --git a/site/img/cssgram-newlogo.png b/site/img/cssgram-newlogo.png
diff --git a/site/img/travel.jpg b/site/img/travel.jpg
diff --git a/site/index.html b/site/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <title>CSSGram</title>
   <meta name="viewport" content="initial-scale=1, maximum-scale=1">
-
+	
     <link rel="stylesheet" href="css/demo-site.min.css">
 
   <script>
@@ -18,13 +18,23 @@
     ga('send', 'pageview');
 
   </script>
+  <div class="container">
+  <nav class="navbar">
+      <ul>
+          <li><a href="#home">Home</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#usage">Usage</a></li>
+        </ul>
+      </nav>
+	</div>
 </head>
 <body class="home">
+	<div id = "home">
     <section class="title-section">
-    <img class="title--logo" src="img/cssgram-logo.svg" alt="CSSgram">
+    <img class="title--logo" src="img/cssgram-newlogo.png" alt="CSSgram">
     <h2 class="title--top-sub">A tiny (&lt;1kb gzipped!) library for recreating <a href="http://instagram.com">Instagram</a> filters with CSS filters and blend modes.</h2>
   </section>
-
+	
   <section class="demo__section">
     <div class="demo__input-area">
       <fieldset class="demo__option-field">
@@ -34,6 +44,7 @@ <h2 class="title--top-sub">A tiny (&lt;1kb gzipped!) library for recreating <a h
                 <img class="demo__option-img" src="img/cacti.jpg" alt="cacti image">
                 <img class="demo__option-img" src="img/lakegeneva.jpg" alt="lakegeneva image">
                 <img class="demo__option-img" src="img/tahoe.jpg" alt="tahoe image">
+				<img class="demo__option-img" src="img/travel.jpg" alt="travel image">
                 <button class="take-photo">Take a photo!</button>
         <br>
         <label class="demo__input-label">
@@ -215,7 +226,8 @@ <h2 class="title--top-sub">A tiny (&lt;1kb gzipped!) library for recreating <a h
           </li>
                   </ul>
   </section>
-
+  </div>
+  <div id = "about">
   <section class="explanation-section">
     <h2>What is This?</h2>
 
@@ -240,7 +252,8 @@ <h3>Browser Support</h3>
     <p>For more information, check on <a href="http://caniuse.com/">Can I Use</a>.</p>
   <hr>
   </section>
-
+  </div>
+  <div id = "usage">
   <section class="how-to-section">
     <h2>Usage</h2>
 
@@ -432,6 +445,7 @@ <h3>Available Mixins</h3>
   <hr>
 
   </section>
+  </div>
   <footer class="attribution">Made with love by <a href="http://twitter.com/una">Una</a> | <a href="http://github.com/una/CSSgram">View Source</a></footer>
 
     <script>
@@ -519,4 +533,4 @@ <h3>Available Mixins</h3>
     });
   </script>
 </body>
-</html>
+</html>
diff --git a/travel.jpg b/travel.jpg