ISM6225 · chrisleigh44 · Jun 5, 2022 · Jun 6, 2022 · Jun 6, 2022 · Jun 6, 2022
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/05bbe171-e09e-4971-accf-3a438418ff4a.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/05bbe171-e09e-4971-accf-3a438418ff4a.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/0662e12d-9548-40c8-8463-cb6ed0e49ed4.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/0662e12d-9548-40c8-8463-cb6ed0e49ed4.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/640f89c4-a6dd-42d0-a20a-ba0b61e206d5.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/640f89c4-a6dd-42d0-a20a-ba0b61e206d5.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/685621c0-513a-4cf7-89a3-f9eedb4f0d2b.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/685621c0-513a-4cf7-89a3-f9eedb4f0d2b.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/8581f7b1-a259-434e-bbea-b738ccf36897.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/8581f7b1-a259-434e-bbea-b738ccf36897.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/a16afdbf-213e-4797-913b-ae064fead781.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/a16afdbf-213e-4797-913b-ae064fead781.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/b7bd0d24-3ad5-435e-b188-b311e1cafd56.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/b7bd0d24-3ad5-435e-b188-b311e1cafd56.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/bd1d1755-467c-4db2-a1b7-92b65ba84060.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/bd1d1755-467c-4db2-a1b7-92b65ba84060.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/read.lock b/.vs/Assignment_LookAndFeel/FileContentIndex/read.lock
diff --git a/.vs/Assignment_LookAndFeel/config/applicationhost.config b/.vs/Assignment_LookAndFeel/config/applicationhost.config
diff --git a/.vs/Assignment_LookAndFeel/v17/.suo b/.vs/Assignment_LookAndFeel/v17/.suo
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
@@ -0,0 +1,10 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\css",
+    "\\img",
+    "\\js"
+  ],
+  "SelectedNode": "\\sample.html",
+  "PreviewInSolutionExplorer": false
+}
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
diff --git a/css/chris.css b/css/chris.css
@@ -0,0 +1,59 @@
+/* Top Navigation Bar*/
+body,
+html {
+    height: 100%;
+}
+.topnav {
+    background-color: black;
+    overflow: hidden;
+    opacity: 1;
+}
+.topnav a{
+    float:left;
+    color:aliceblue;
+    text-align:center;
+    padding: 14px 16px;
+    text-decoration:none;
+    font-size:17px;
+    opacity: 1;
+}
+.topnav a.active {
+        background-color: darkgoldenrod;
+        color: black;
+        opacity: 1;
+}
+
+/*Set background image*/
+/*Set height*/
+
+
+.BeerBackground {
+  background-image: url('beer.png');
+  height: 100%;
+  width:100%;
+  background-size: cover;
+
+}
+
+/*Box up the Header and Paragrap text on the left side*/
+.MyContent{
+    float:left;
+    width:25%;
+    height:100%;
+    border:black;
+}
+.MyHeadings {
+    color: gold;
+    font:bold 20px arial;
+}
+.MyPara {
+    stop-opacity:;
+    color: ghostwhite;
+    font:bold 18px arial;
+
+}
+
+.MySmallText{
+    color:cornflowerblue;
+    font:bold 12px arial;
+}
diff --git a/css/main.css b/css/main.css
@@ -7,10 +7,34 @@ html {
   height: 100%;
 }
 
+/* Top Navigation Bar*/
+
+.topnav {
+    background-color: black;
+    overflow: hidden;
+    opacity: 1;
+}
+.topnav a{
+    float:left;
+    color:aliceblue;
+    text-align:center;
+    padding: 14px 16px;
+    text-decoration:none;
+    font-size:17px;
+    opacity: 1;
+}
+.topnav a.active{
+    background-color:darkgoldenrod;
+    color:black;
+}
+
+
+
 /*Set background image*/
 .container {
-  background-image: url('https://doc-10-ao-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/r085o9ungppbiokopob2sfbekae4uqbb/1537920000000/14802840322886517493/*/110cT8sl-pOiHGgj9yToPkAqAzrr-RNfb');
+  background-image: url('beer.png');
   height: 100%;
+  opacity: .5;
   background-position: center;
   background-size: cover;
 }
@@ -27,7 +51,9 @@ html {
 
 /*Set circle in unordered list*/
 .middle ul {
-  list-style-type: circle;
+  list-style-type: none;
+  margin: 0;
+  padding:0
 }
 
 /*Set text inside li tag to left*/
@@ -37,7 +63,7 @@ html {
 
 /*Set text color for a tag inside middle class and ul>li element*/
 .middle ul li a {
-  color: beige;
+  color: blue;
 }
 
 /*Change text color and decoration for a tags inside middle class and ul>li element*/

diff --git a/happyhour.html b/happyhour.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="css/chris.css">
+    <title>Assignment - 3</title>
+
+</head>
+
+<body>
+            <div class="topnav">
+            <a href="#home">Home</a>
+            <a href="HappyHourApp"class="active">Happy Hour App</a>
+            <a href="HappyHourDetails">Sightings</a>
+            <a href="AboutUs">About Us</a>
+        </div>
+    <div class="BeerBackground">
+
+        <h0 class="MyContent">
+            <h1 class=" = MyHeadings">
+                Why pay full price when you could save?
+            </h1>
+            <p1 class="MyPara">
+                Happy Hours are great ways to meet up in great establishments without breaking the bank
+            </p1>
+            <h1 class="MyHeadings">
+                Find the Hot Spots
+            </h1>
+            <p1 class="MyPara">
+                Why spend time searching for the hottest place in town when you can find it right here!
+            </p1>
+            <h1 class="MyHeadings">
+                What are we offering you?
+            </h1>
+            <p1 class="MyPara">
+                A Central location to search, create, rate, and save Happy Hours in the Tampa Bay area! Whether you are looking for a great date night spot, a place to meet up with friends, or a place to take that platinum client we have a place for you!
+            </p1>
+        </h0>
+    </div>
+    <!--JS link-->
+    <script src="./js/main.js"></script>
+</body>
+
+</html>
diff --git a/img/beer.png b/img/beer.png
diff --git a/sample.html b/sample.html
@@ -5,26 +5,22 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" type="text/css" href="./css/main.css">
+  <link rel="stylesheet" type="text/css" href="main.css">
   <title>Assignment - 3</title>
 </head>
 
 <body>
-  <div class="container">
-    <div class="middle">
-      <h2>
-        Useful links
-      </h2>
-      <ul id="links">
-        <li>
-          <a href="https://www.w3schools.com/css/default.asp" target="_blank">CSS tutorial- w3schools</a>
-        </li>
-        <li>
-          <a href="https://pixabay.com/" target="_blank">Free Images</a>
-        </li>
-      </ul>
+
+    <div class="container">
+        <div class="topnav">
+            <a class="active" href="#home">Home</a>
+            <a href="Top Happy Hours">Top Happy Hours</a>
+            <a href="About Us">About Us</a>
+            <a href="Sign In">Sign In</a>
+        </div>
+
+
     </div>
-  </div>
 
   <!--JS link-->
   <script src="./js/main.js"></script>