ISM6225 · StephUSF · Jun 5, 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/29686a9c-7f58-45f6-9070-d53e2961c88b.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/29686a9c-7f58-45f6-9070-d53e2961c88b.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/8581f7b1-a259-434e-bbea-b738ccf36897.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/8581f7b1-a259-434e-bbea-b738ccf36897.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/89bf531b-ea37-4c65-b502-cf20c16467ad.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/89bf531b-ea37-4c65-b502-cf20c16467ad.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/bbf615a3-5108-4e5c-bc09-170ea0792142.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/bbf615a3-5108-4e5c-bc09-170ea0792142.vsidx
diff --git a/.vs/Assignment_LookAndFeel/FileContentIndex/bc5b4eba-0b7f-4133-94bf-4fcaaf2d7a0e.vsidx b/.vs/Assignment_LookAndFeel/FileContentIndex/bc5b4eba-0b7f-4133-94bf-4fcaaf2d7a0e.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/AboutUs.html b/AboutUs.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+<html lang="en" dir="ltr">
+<head>
+    <link rel="stylesheet" type="text/css" href="..\css\AboutUs.css">
+</head>
+<body>
+    <div class="body1">
+        <h1>ABOUT US</h1>
+        <h2>IT'S 5 O'CLOCK SOMEWHERE!</h2>
+
+
+        <P>We at 5 o'clock understand that when your focus is on education, fun needs to be cheap and accessible!</P>
+
+        <p> Finding the right happy hour should not take almost as much time as attending one. Why should you waste your time cruising the internet to find the right place to meet a date, hang out with some friends, or just relax and unwind</p>
+
+        <h2>FOR STUDENTS, BY STUDENTS</h2>
+
+        <p>We are a small, four-person team focused on work, education, meeting people and saving money. Coming from various walks of life, our varying experiences offer a dynamic approach to providing the best happy hour application out there.
+
+        <p>Most importantly, we are you! So get out there and enjoy your evening! We plan on doing the same.</p>
+
+        <center><img src="..\img\HH3.jpg" /></center>
+    </div>
+
+</body>
+</html>
diff --git a/css/AboutUs.css b/css/AboutUs.css
@@ -0,0 +1,38 @@
+body {
+    background: url(../img/HH2.jpg) no-repeat center fixed;
+    background-color: rgba(0, 0, 0, 0.8);
+    background-size: cover;
+    background-blend-mode: darken;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%)
+}
+
+div {
+    margin
+}
+
+h1 {
+    color: darkgoldenrod;
+    text-align: Center;
+    font-size: 60px
+}
+
+h2 {
+    color: goldenrod;
+    text-align: Center;
+    font-size: 36px
+}
+
+p {
+    font-size: 30px;
+    color: white;
+    text-align: Center;
+}
+
+img {
+    border-radius: 50%;
+    vertical-align: middle;
+}
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/img/HH2.jpg b/img/HH2.jpg
diff --git a/img/HH3.jpg b/img/HH3.jpg
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>