ISM6225 · dgause · Jul 9, 2020 · Jul 10, 2020 · Jul 10, 2020 · Jul 11, 2020
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vs/Assignment_LookAndFeel/config/applicationhost.config b/.vs/Assignment_LookAndFeel/config/applicationhost.config
diff --git a/.vs/Assignment_LookAndFeel/v16/.suo b/.vs/Assignment_LookAndFeel/v16/.suo
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
@@ -0,0 +1,8 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\css"
+  ],
+  "SelectedNode": "\\blog.html",
+  "PreviewInSolutionExplorer": false
+}
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
diff --git a/blog.html b/blog.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <!-- viewport meta tag on all pages -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="icon" type="image/png" href="./img/favicon.ico">
+    <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>
+    <link rel="stylesheet" type="text/css" href="./css/main.css">
+    <link rel="stylesheet" type="text/css" href="./css/responsive.css">
+    <!-- load font awesome fonts -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <title>Blog - Group 2</title>
+</head>
+<body>
+
+    <div class="topnav sticky">
+        <!-- Set class="active" on your page -->
+        <a href="./index.html">Home</a>
+        <!-- sarah -->
+        <a href="./favorite.html">My Favorite App</a>
+        <!-- deb -->
+        <a href="./blog.html" class="active">Blog</a>
+        <!-- neeraj -->
+        <a href="./dashboard.html">Most Popular Apps</a>
+        <div class="icon">
+            <img src="./img/usf-logo-png-2.png" height="30px" />
+        </div>
+    </div>
+    <div class="content">
+        <div class="row">
+            <h1>Welcome to My App Blog</h1>
+        </div>
+        <div class="row">
+
+            <div class="col-3">
+                <div class="card">
+                    <img class="card-img" src="https://is3-ssl.mzstatic.com/image/thumb/Purple113/v4/b2/0d/b3/b20db3c7-4be7-50e3-432b-519e2b72e1da/AppIcon-0-1x_U007emarketing-0-6-0-0-0-85-220.png/200x200bb.png" alt="Avatar" style="width:100%">
+                    <div class="container">
+                        <p class="card-title"><a href="https://apps.apple.com/us/app/pinterest/id429047995" target="_blank">Pinterest</a></p>
+                        <p style="font-size:10px">Pinterest</p>
+
+                        <p>Genres:</p>
+
+                        <p style="font-size:10px">Lifestyle</p>
+                        <p style="font-size:10px">Photo &amp; Video</p>
+                    </div>
+                </div>
+            </div><h2>Pinterest</h2>
+
+            <p>
+                Apps are the best! Especially ones that help me with projects around the house. Anything from what's for dinner to planning a baby shower Pinterest has everything.
+                Just this past week I used Pinterest to find a recipe to make using the ingredients I had on hand - chicken, mushrooms and asparagus. Searching is easy.
+                Just type the ingredients you have into the search bar.
+            </p>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <img style="max-width:350px;" src="./img/PinterestSearch.PNG">
+            </div>
+
+        </div>
+
+        <div class="row">
+        <p>
+            My search returned many options that all
+            looked delicious.
+        </p>
+    </div>
+        <div class="row">
+
+            <img class="col-3" src="./img/ChickMushAsp1.jpg">
+            <img class="col-3" src="./img/ChickMushAsp2.jpg">
+            <img class="col-3" src="./img/ChickMushAsp3.jpg">
+            <img class="col-3" src="./img/ChickMushAsp5.jpg">
+        </div>
+        <div class="row">
+            <p>
+                Once I reviewed each recipe, I chose to make the mushroom asparagus chicken stir fry. It was an easy to follow recipe and most importantly it was a hit with my family! 
+                Pintrest makes it so easy to save recipes in your collection organized by boards that you can build. I have many boards to distinguish the kinds of recipes that I am saving: 
+                Healthy, Holiday, Easy, Instant Pot, Crock Pot...the options are endless. Next time you are looking for ideas for dinner using the ingredients you have on hand,
+                give Pinterest a try, you wont be disappointed!
+            </p>
+
+        </div>
+    </div>
+    <footer class="col-12 text-center">
+        <div>
+            <h2>Group 2 - App Tool</h2>
+            <span class="copyright">&#169; 2019 - Deborah Gause, Neeraj Kumar, Sarah Wasselle, and Alexander Seufert</span>
+        </div>
+    </footer>
+</body>
+</html>
+
diff --git a/css/main.css b/css/main.css
@@ -1,47 +1,125 @@
-/**
-Sample css code
-*/
-/* Set height to 100% for body and html to enable the background image to cover the whole page: */
+
 body,
 html {
   height: 100%;
+  margin: 0;
+  font-family: 'Abel';
 }
 
-/*Set background image*/
-.container {
-  background-image: url('https://doc-10-ao-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/r085o9ungppbiokopob2sfbekae4uqbb/1537920000000/14802840322886517493/*/110cT8sl-pOiHGgj9yToPkAqAzrr-RNfb');
-  height: 100%;
-  background-position: center;
-  background-size: cover;
+/* Add a black background color to the top navigation */
+.topnav {
+  background-color: #333;
 }
 
-/* Position text in the middle */
-.middle {
-  position: absolute;
-  color: beige;
-  top: 70%;
-  left: 39%;
+/* Style the links inside the navigation bar */
+.topnav a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
   text-align: center;
-  font-size: 25px;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+/* Add an active class to highlight the current page */
+.topnav a.active {
+  background-color: #a8a8a8;
+  color: white;
 }
 
-/*Set circle in unordered list*/
-.middle ul {
-  list-style-type: circle;
+/* Hide the link that should open and close the topnav on small screens */
+.topnav .icon {
+  display: none;
 }
 
-/*Set text inside li tag to left*/
-.middle ul li {
-  text-align: left !important;
+.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
 }
 
-/*Set text color for a tag inside middle class and ul>li element*/
-.middle ul li a {
-  color: beige;
+.content {
+  padding-top: 48px;
 }
 
-/*Change text color and decoration for a tags inside middle class and ul>li element*/
-.middle ul li a:hover {
-  color: red;
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  border-radius: 5px;
+  overflow-y: hidden;
+}
+
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
+}
+
+.container {
+  padding: 2px 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card p {
+  margin: 0;
+}
+
+.card-title a {
+  font-size: medium;
   text-decoration: none;
+  color: black;
+  margin: 5px 0;
+}
+
+.card-title a:hover {
+  text-decoration: underline;
+}
+
+.card-img {
+  border-radius: 5px 5px 0 0;
+}
+
+footer {
+  background-color: #333;
+  color: #f2f2f2;
 }
+
+.copyright {
+  font-size: smaller;
+}
+
+
+/* TABLET GRIDS */
+@media only screen and (min-width: 600px) {
+  .content {
+    margin: 0 2em;
+  }
+  .topnav .icon {
+    display: flex;
+    float: right;
+    padding: 10px;
+  }
+}
+
+/* PHONE LANDSCAPE */
+@media only screen and (orientation: landscape) and (min-width: 600px) {
+  .content {
+    margin: 0 4em;
+  }
+}
+
+/* DESKTOP GRIDS */
+@media only screen and (min-width: 768px) {
+  .content {
+    margin: 0 5em;
+  }
+  .card {
+    height: 30vw;
+  }
+}