I added the new social media

I removed the old Facebook graphic and added the new socail media icons.
Links are included and they are centered.

diff --git a/assets/Social-Icons-Set-color.png b/assets/Social-Icons-Set-color.png
new file mode 100644 (file)
index 0000000..155b388
Binary files /dev/null and b/assets/Social-Icons-Set-color.png differ

diff --git a/styles.css b/styles.css
index 162f816..0f4bad7 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -194,10 +194,25 @@ nav a {
     font-size: 2.4rem;\r
     display: block;\r
     }\r
+#social {\r
+    float: none;\r
+    margin: 0 auto;\r
+    text-align: center;\r
+}\r
 #cFace {\r
-    background-image: url(assets/facebook.gif);\r
-    width: 251px;\r
-    height: 82px;\r
+    background-image: url(assets/Social-Icons-Set-color.png);\r
+    width: 64px;\r
+    height: 64px;\r
+    background-position: 0 0;\r
+    margin-right: 10px;\r
+    display: inline-block;\r
+    }\r
+#cInsta {\r
+    background-image: url(assets/Social-Icons-Set-color.png);\r
+    width: 64px;\r
+    height: 64px;\r
+    background-position: -159px 0;\r
+    display: inline-block;\r
     }\r
 \r
 /* Toolbox */\r

diff --git a/templates/template.html b/templates/template.html
index e1e259f..e2b3ac5 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -91,7 +91,9 @@
                     <span class="wCond">{weather}</span>
                 </div><!-- /#weather -->
                <a href="http://w3.lre.usace.army.mil/hh/GreatLakesWaterLevels/GLWL-CurrentMonth-Feet.pdf" id="waterLevel">Great Lakes Lake Levels (USACE)</a>
-                <a href="https://www.facebook.com/cedarville.marine" id="cFace" class="glmTxtImg">Find us on Facebook</a>
+                <div id="social">
+                    <a href="https://www.facebook.com/CedarvilleMarineest1984/" id="cFace" class="glmTxtImg">Find us on Facebook</a><a href="https://www.instagram.com/cedarvillemarine/" id="cInsta" class="glmTxtImg">Find us on Instagram</a>
+                </div>
             </div><!-- /#cSide -->
         </div><!-- /#cMain -->
     </div><!-- /#row -->