+ 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.
+
+
+
+
+
+
+
+
+
+
+
+ My search returned many options that all
+ looked delicious.
+
+
+
+
+
+
+
+
+
+
+
+ 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!
+
+
+
+
+
+
+
+
diff --git a/css/main.css b/css/main.css
index bcc90344f..4725f610e 100644
--- 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;
+ }
+}
\ No newline at end of file
diff --git a/css/responsive.css b/css/responsive.css
new file mode 100644
index 000000000..bbf2d836c
--- /dev/null
+++ b/css/responsive.css
@@ -0,0 +1,137 @@
+* {
+ box-sizing: border-box;
+}
+
+.row::after {
+ content: "";
+ clear: both;
+ display: table;
+}
+
+/* MOBILE GRIDS*/
+
+[class*="col-"] {
+ float: left;
+ padding: 15px;
+ width: 100%;
+}
+
+/* TABLET GRIDS */
+@media only screen and (min-width: 600px) {
+ .col-s-1 {
+ width: 8.33%;
+ }
+ .col-s-2 {
+ width: 16.66%;
+ }
+ .col-s-3 {
+ width: 25%;
+ }
+ .col-s-4 {
+ width: 33.33%;
+ }
+ .col-s-5 {
+ width: 41.66%;
+ }
+ .col-s-6 {
+ width: 50%;
+ }
+ .col-s-7 {
+ width: 58.33%;
+ }
+ .col-s-8 {
+ width: 66.66%;
+ }
+ .col-s-9 {
+ width: 75%;
+ }
+ .col-s-10 {
+ width: 83.33%;
+ }
+ .col-s-11 {
+ width: 91.66%;
+ }
+ .col-s-12 {
+ width: 100%;
+ }
+}
+
+/* DESKTOP GRIDS */
+@media only screen and (min-width: 768px) {
+ .col-1 {
+ width: 8.33%;
+ }
+ .col-2 {
+ width: 16.66%;
+ }
+ .col-3 {
+ width: 25%;
+ }
+ .col-4 {
+ width: 33.33%;
+ }
+ .col-5 {
+ width: 41.66%;
+ }
+ .col-6 {
+ width: 50%;
+ }
+ .col-7 {
+ width: 58.33%;
+ }
+ .col-8 {
+ width: 66.66%;
+ }
+ .col-9 {
+ width: 75%;
+ }
+ .col-10 {
+ width: 83.33%;
+ }
+ .col-11 {
+ width: 91.66%;
+ }
+ .col-12 {
+ width: 100%;
+ }
+}
+
+.m-auto {
+ margin: auto;
+}
+
+.clear-3 [class*="col-"]:nth-child(3n+1) {
+ clear: left;
+}
+
+.clear-4 [class*="col-"]:nth-child(4n+1) {
+ clear: left;
+}
+
+.clear-5 [class*="col-"]:nth-child(5n+1) {
+ clear: left;
+}
+
+.clear-6 [class*="col-"]:nth-child(6n+1) {
+ clear: left;
+}
+
+.clear-7 [class*="col-"]:nth-child(7n+1) {
+ clear: left;
+}
+
+.mx-auto {
+ margin: 0 auto;
+}
+
+.ml-auto {
+ margin-left: auto;
+}
+
+.mr-auto {
+ margin-right: auto;
+}
+
+.text-center {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/img/ChickMushAsp1.jpg b/img/ChickMushAsp1.jpg
new file mode 100644
index 000000000..adf80890b
Binary files /dev/null and b/img/ChickMushAsp1.jpg differ
diff --git a/img/ChickMushAsp2.jpg b/img/ChickMushAsp2.jpg
new file mode 100644
index 000000000..595e086b4
Binary files /dev/null and b/img/ChickMushAsp2.jpg differ
diff --git a/img/ChickMushAsp3.jpg b/img/ChickMushAsp3.jpg
new file mode 100644
index 000000000..8cf54c162
Binary files /dev/null and b/img/ChickMushAsp3.jpg differ
diff --git a/img/ChickMushAsp4.jpg b/img/ChickMushAsp4.jpg
new file mode 100644
index 000000000..ef64696fb
Binary files /dev/null and b/img/ChickMushAsp4.jpg differ
diff --git a/img/ChickMushAsp5.jpg b/img/ChickMushAsp5.jpg
new file mode 100644
index 000000000..844a09217
Binary files /dev/null and b/img/ChickMushAsp5.jpg differ
diff --git a/img/PinterestSearch.PNG b/img/PinterestSearch.PNG
new file mode 100644
index 000000000..d56273250
Binary files /dev/null and b/img/PinterestSearch.PNG differ
diff --git a/img/favicon.ico b/img/favicon.ico
new file mode 100644
index 000000000..825774c33
Binary files /dev/null and b/img/favicon.ico differ
diff --git a/img/usf-logo-png-2.png b/img/usf-logo-png-2.png
index 3d3d8548e..c5288d52e 100644
Binary files a/img/usf-logo-png-2.png and b/img/usf-logo-png-2.png differ
diff --git a/index.html b/index.html
index fbae197cd..d34ce0eda 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,1412 @@
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Homepage - Group 2
+
+
+
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+