all other file

6 files changed, 626 insertions, 212 deletions

diff --git a/assets/css/creative.css b/assets/css/creative.css
index 79a56f2..535e830 100644
--- a/assets/css/creative.css
+++ b/assets/css/creative.css
@@ -1,3 +1,41 @@
+/*div {*/
+    /*box-sizing: border-box;*/
+/*}*/
+main .search {
+    width: 60%;
+    height: 100%;
+}
+
+.search-cover {
+    /*height: auto;*/
+    padding-bottom: 10%;
+}
+
+.search-reduced {
+    min-width: 60%;
+}
+
+/* For better viewing for mobile displays */
+@media only screen and (max-width: 768px) {
+    main {
+        padding-top: 10%;
+        padding-bottom: 10%;
+    }
+}
+
+
+/*main #solutions {
+    padding-top: 65px;
+}*/
+
+
+h2 {
+font-family: 'Lato', sans-serif;
+color: gray;
+font-size: 2.5em;
+margin: 4%;
+padding-top: 200px;
+}
 
 .navbar-default {
     border-color: rgba(34,34,34,.05);
@@ -105,3 +143,192 @@
         /*color: #f05f40;*/
     }
 }
+
+
+header {
+    position: relative;
+    width: 100%;
+    min-height: auto;
+    text-align: center;
+    /*color: #fff;*/
+    background-image: url("../images/main.jpg");
+    /*background-color: #5bc0de;*/
+    background-size: 250px 250px;
+    background-position: center;
+    /*-webkit-background-size: cover;*/
+    /*-moz-background-size: cover;*/
+    /*background-size: cover;*/
+    /*-o-background-size: cover;*/
+
+}
+
+header .header-spec {
+    text-align: left;
+}
+
+header .header-content {
+    position: relative;
+    width: 100%;
+    padding: 100px 15px;
+    text-align: center;
+}
+
+header .header-content .header-content-inner h1 {
+    margin-top: 0;
+    margin-bottom: 0;
+    text-transform: uppercase;
+    font-weight: 700;
+}
+
+header .header-content .header-content-inner hr {
+    margin: 30px auto;
+}
+
+/*header .header-content .header-content-inner p {
+    margin-bottom: 50px;
+    font-family: 'Lato', sans-serif;
+    color: red;
+    font-size: 2.5em;
+    /color: #333333
+}*/
+
+
+
+@media (min-width: 320px) {
+    header {
+        min-height: 100%;
+    }
+
+    header .header-content {
+        position: absolute;
+        top: 50%;
+        padding: 0 50px;
+        -webkit-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+    }
+
+    header .header-content .header-content-inner {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 1000px;
+    }
+
+    header .header-content .header-content-inner p {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 80%;
+        font-size: 18px;
+        color: #333333;
+    }
+    
+}
+
+@media(min-width:768px) {
+    header {
+        min-height: 100%;
+    }
+
+    header .header-content {
+        position: absolute;
+        top: 50%;
+        padding: 0 50px;
+        -webkit-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+    }
+
+    header .header-content .header-content-inner {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 1000px;
+    }
+
+    header .header-content .header-content-inner p {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 80%;
+        font-size: 32px;
+        font-family: 'Lato', sans-serif;
+        color: gray;
+        font-size: 2.5em;
+    }
+
+    header .header-content-inner {  
+        flex: 1;
+        width: 60%;
+        height: 100%;
+        background-color: rgba(235,235,235, 0.7);
+        padding-top: 22%;
+        padding-bottom: 22%;
+    }
+
+}
+
+.rounded {
+    border-radius: 20px;
+}
+
+.dropdown-submenu {
+  position: relative;
+}
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+.dropdown-submenu:hover > a:after {
+  border-left-color: #fff;
+}
+.dropdown-submenu.pull-left {
+  float: none;
+}
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+}
+
+
+
+/******************************************************/
+
+
+.user-row {
+    margin-bottom: 14px;
+}
+
+.user-row:last-child {
+    margin-bottom: 0;
+}
+
+.dropdown-user {
+    margin: 13px 0;
+    padding: 5px;
+    height: 100%;
+}
+
+.dropdown-user:hover {
+    cursor: pointer;
+}
+
+.table-user-information > tbody > tr {
+    border-top: 1px solid rgb(221, 221, 221);
+}
+
+.table-user-information > tbody > tr:first-child {
+    border-top: 0;
+}
+
+
+.table-user-information > tbody > tr > td {
+    border-top: 0;
+}
+.toppad
+{margin-top:20px;
+}
+
+
diff --git a/assets/css/style.css b/assets/css/style.css
index 614d0c2..dc27602 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,5 +1,6 @@
 
 html, body {
+	width: 100%;
 	height: 100%;
 	font-family: 'Roboto', sans-serif;
 }
@@ -105,17 +106,10 @@ h1{
 			}
 
 			.drop-down:hover .drop-menu {
-				display: block;
-
-			}
-
-			.side-menu {
-				/* This line of code is incomplete - Humair */
-				/*display */
+			    display: block;
 			}
 
 
-
 main {
 	
 	background-image: url("../images/main.jpg");
@@ -134,17 +128,19 @@ main{
 	align-items: center;
 	justify-content: center;
 	flex-flow: column; /* Makes it grow vertically */
+	/*padding-bottom: 5%;
+	padding-top: 5%;*/
 }
 
-/*************************** SEARCH - index.html *********************************/
 
 /* Changes - search is a flex container for h2 and bar, removed various attributes */
 main .search {
 	flex: 1;
 	min-width: 60%;
 	min-height: 100%;
-	background-color: rgba(235,235,235, 0.6);
+	background-color: rgba(235,235,235, 0.7);
 	overflow: auto;
+
 }
 
 /* Changes - added h2 styiling for main */
@@ -156,11 +152,11 @@ main .search h2{
 	padding-top: 200px; /* Change to move search bar content. Keep as pixel*/
 }
 
-main #search-select {
+.search-select {
 	display: inline-block;
 }
 
-main #search-select select {
+.search-select select {
 	color: black;
 	width: 100px;
     padding: 5px;
@@ -175,31 +171,34 @@ main #search-select select {
 	margin-right: -5px;
 }
 
-main .search input[type=text] {
+.search input[type=text] {
 	display: inline;
     width: 250px;
+    height: 40px;
     text-align: center;
     box-sizing: border-box;
+    border: 2px solid #ccc;
     font-size: 16px;
+    border-radius: 10px;
     background-color: white;
     background-image: url('../images/search_icon.png');
     background-size: 20px 20px;
     background-position: 9px 9px;
     background-repeat: no-repeat;
     padding: 12px 20px 12px 40px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     -webkit-transition: width 0.4s ease-in-out;
     transition: width 0.4s ease-in-out;
-    border-top-right-radius: 10px;
-	border-bottom-right-radius: 10px;
 }
 
-main .search input[type=text], main #search-select select {
+
+.search input[type=text], .search-select select {
 	height: 40px;
 	border: 2px solid #ccc;
 	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 }
 
-main .search input[type=text]:focus {
+.search input[type=text]:focus {
     width: 50%;
 }
 
@@ -208,6 +207,9 @@ main .search img {
 	display: inline;
 }
 
+
+
+
 /*************************** END OF SEARCH - index.html *********************************/
 
 /*************************** USER SOLUTIONS - user_solutions.html *********************************/
@@ -398,7 +400,7 @@ main [id^="sol-"] div.comments ul li p.user-comment {
 
 
 /*************************** END OF USER SOLUTIONS - user_solutions.html *********************************/
-
+/*
 footer {
 	background-color: #333333;
 	bottom: 0;
@@ -431,7 +433,7 @@ footer nav a {
 	color: darkgray;
 	vertical-align: top;
 }
-
+*/
 /***********************************************************************************************************************/
 
 /*THE SOLUTIONS PAGE BEGINS HERE*/
diff --git a/exams.html b/exams.html
index daaf55e..6fea0af 100644
--- a/exams.html
+++ b/exams.html
@@ -25,42 +25,53 @@
 <body>
 
     <nav id="mainNav" class="navbar navbar-default navbar-fixed-top" >
-        <div class="container-fluid">
-            <!-- Brand and toggle get grouped for better mobile display -->
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed"
-                        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                    <span class="sr-only">Toggle navigation</span> <span
-                        class="icon-bar"></span> <span class="icon-bar"></span> <span
-                        class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand page-scroll" href="#page-top"> ENTER OUR NAME HERE</a>
-            </div>
-
-            <!-- Collect the nav links, forms, and other content for toggling -->
-            <div class="collapse navbar-collapse"
-                 id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav navbar-right">
-                    <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="#">First Year</a></li>
-                            <li><a href="#">Second Year</a></li>
-                            <li><a href="#">Third Year</a></li>
-                            <li><a href="#">Fourth Year</a></li>
-                        </ul>
-                    </li>
-                    <li><a href="#">Register</a></li>
-                    <li><a href="#">Log In</a></li>
-
-                    <!--<li id="header"><header><a href="#"><img src="assets/images/logo.png"></a></header></li> &ndash;&gt;-->
-                </ul>
-            </div>
-            <!-- /.navbar-collapse -->
+    <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed"
+                    data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                <span class="sr-only">Toggle navigation</span> <span
+                    class="icon-bar"></span> <span class="icon-bar"></span> <span
+                    class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand page-scroll" href="index.html"> ENTER OUR NAME HERE</a>
         </div>
-        <!-- /.container-fluid -->
-    </nav>
 
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse"
+             id="bs-example-navbar-collapse-1">
+            <ul class="nav navbar-nav navbar-right">
+                <li><a href="user_solutions.html">Solutions Page</a></li>
+                <li><a href="user_profile.html">Profile Page</a></li>
+                <li><a href="questions.html">Questions Page</a></li>
+                <li><a href="exams.html">Exams Pages</a></li>
+
+                <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li class="dropdown-submenu">
+                            <a tabindex="-1" href="#">First Year<i class="fa fa-chevron-right"></i></a>
+                            <ul class="dropdown-menu">
+                                <li><a tabindex="-1" href="#">CSC108</a></li>
+                                <li><a href="#">CSC148</a></li>
+                                <li><a href="#">CSC165</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Second Year</a></li>
+                        <li><a href="#">Third Year</a></li>
+                        <li><a href="#">Fourth Year</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Register</a></li>
+                <li><a href="#">Log In</a></li>
+
+                <!--<li id="header"><header><a href="#"><img src="assets/images/logo.png"></a></header></li> &ndash;&gt;-->
+            </ul>
+        </div>
+        <!-- /.navbar-collapse -->
+    </div>
+    <!-- /.container-fluid -->
+</nav>
 
 <!--any class or id pertaining to this section specifically starts with "solutions"-->
 <!--KEYS: solutions-card - holds the solutions for each exam
@@ -128,5 +139,21 @@
             </div>
         </div>
     </footer>
+
+    <script>
+        $(document).ready(function() {
+
+            // For the Second level Dropdown menu, highlight the parent
+            $( ".dropdown-menu" )
+                    .mouseenter(function() {
+                        $(this).parent('li').addClass('active');
+                    })
+                    .mouseleave(function() {
+                        $(this).parent('li').removeClass('active');
+                    });
+
+        });
+    </script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 07d8662..33f2a8f 100644
--- a/index.html
+++ b/index.html
@@ -1,69 +1,146 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Solutions Repo</title>
 
+	<!--ORDER IS IMPORTANT DO NOT SHIFT-->
+
+	<!--Custom CSS Files-->
 	<link href="assets/css/style.css" rel="stylesheet" type="text/css">
+
+	<!--Bootstrap File-->
+	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
+	<link rel="stylesheet" href="assets/css/creative.css">
+
+	<!--Fonts-->
 	<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
 	<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+
+	<!--JS-->
+	<script src="assets/js/jquery-2.2.4.min.js"></script>
+	<script src="assets/js/bootstrap.min.js"></script>
 </head>
 <body>
-	<div id="top-bar">
-		<div id="logo"><a href="#"><img src="assets/images/placeholder.png"></a></div>
-		<nav>
-			<ul>
-				<li><a href="#">Register</a></li>
-				<li><a href="#">Log In</a></li>
-				<li class="drop-down">
-					<a href="#">Courses</a>
-					<nav class="drop-menu">
-						<ul>
-							<li class="side-drop"><a href="#">First Year</a>
-								<div class="side-menu">
-									<a href="CSC108"></a>
-									<a href="CSC148"></a>
-									<a href="CSC165"></a>
-								</div>
-							</li>
-							<li>
-								<a href="#">Second Year</a></li>
+
+	<nav id="mainNav" class="navbar navbar-default navbar-fixed-top" >
+		<div class="container-fluid">
+			<!-- Brand and toggle get grouped for better mobile display -->
+			<div class="navbar-header">
+				<button type="button" class="navbar-toggle collapsed"
+						data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+					<span class="sr-only">Toggle navigation</span> <span
+						class="icon-bar"></span> <span class="icon-bar"></span> <span
+						class="icon-bar"></span>
+				</button>
+				<a class="navbar-brand page-scroll" href="index.html"> ENTER OUR NAME HERE</a>
+			</div>
+
+			<!-- Collect the nav links, forms, and other content for toggling -->
+			<div class="collapse navbar-collapse"
+				 id="bs-example-navbar-collapse-1">
+				<ul class="nav navbar-nav navbar-right">
+					<li><a href="user_solutions.html">Solutions Page</a></li>
+					<li><a href="user_profile.html">Profile Page</a></li>
+					<li><a href="questions.html">Questions Page</a></li>
+					<li><a href="exams.html">Exams Pages</a></li>
+
+					<li class="dropdown">
+						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
+						<ul class="dropdown-menu">
+						    <li class="dropdown-submenu">
+						        <a tabindex="-1" href="#">First Year<i class="fa fa-chevron-right"></i></a>
+						        <ul class="dropdown-menu">
+						          <li><a tabindex="-1" href="#">CSC108</a></li>			                  
+						          <li><a href="#">CSC148</a></li>
+						          <li><a href="#">CSC165</a></li>
+						        </ul>
+						    </li>
+							<li><a href="#">Second Year</a></li>
 							<li><a href="#">Third Year</a></li>
 							<li><a href="#">Fourth Year</a></li>
-						</ul>	
-					</nav>
-				</li>
-				<!-- <li id="header"><header><a href="#"><img src="assets/images/logo.png"></a></header></li> -->
-			</ul>
-		</nav>
-	</div>
-
-	<main>
-	<!--made the id in to a class-->
-		<div class='search'>
-			<h2>The solutions to all your problems.</h2>
-			<!--<img src="assets/images/down.png">-->
-			<div id="search-select">
-				<select>
-					<option value="courses">Courses</option>
-					<option value="users">Users</option>
-				</select>
+						</ul>
+					</li>
+					<li><a href="#">Register</a></li>
+					<li><a href="#">Log In</a></li>
+
+					<!--<li id="header"><header><a href="#"><img src="assets/images/logo.png"></a></header></li> &ndash;&gt;-->
+				</ul>
 			</div>
-			<input type="text" name="search" placeholder="Enter course name">
+			<!-- /.navbar-collapse -->
 		</div>
-		
-	</main>
+		<!-- /.container-fluid -->
+	</nav>
 
-	<footer>
-		<div id="footer-container">
-			<nav>
-					<a href="#">Contact</a>
-					<a href="#">About Us</a>
-					<a href="#">Terms of Use</a>
-			</nav>
-			<h6>Copyright 2016</h6>
+	<header>
+		<div class="header-content">
+			<div class="header-content-inner">
+				<p>
+					<strong>The solutions to all your problems</strong>
+				</p>
+				<hr>
+				<div class="search">
+					<div class="search-select">
+						<select>
+							<option value="courses">Courses</option>
+							<option value="users">Users</option>
+						</select>
+					</div>
+				<input type="text" name="search" placeholder="Enter course name">
+				</div>
+			</div>
 		</div>
+	</header>
+
+	<footer>
+		<!--<div id="footer-container" class="container-fluid">-->
+			<!--<nav>-->
+					<!--<a href="#">Contact</a>-->
+					<!--<a href="#">About Us</a>-->
+					<!--<a href="#">Terms of Use</a>-->
+			<!--</nav>-->
+			<!--<h6>Copyright 2016</h6>-->
+		<!--</div>-->
+		<div class="navbar navbar-default navbar-fixed-bottom">
+			<div class="container-fluid">
+				<div class="navbar-collapse collapse" id="footer-body">
+					<ul class="nav navbar-nav">
+						<li><a href="#">About Us</a></li>
+						<li><a href="#">Contact Us</a></li>
+						<li><a href="#">Terms &amp; Conditions</a></li>
+						<li><a href="#">Privacy Policy</a></li>
+					</ul>
+				</div>
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+				</div>
 
+			</div>
+		</div>
 	</footer>
+
+
+
+
+	<script>
+		$(document).ready(function() {
+		 
+			// For the Second level Dropdown menu, highlight the parent	
+			$( ".dropdown-menu" )
+			.mouseenter(function() {
+				$(this).parent('li').addClass('active');
+			})
+			.mouseleave(function() {
+				$(this).parent('li').removeClass('active');
+			});
+		 
+		});
+	</script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/questions.html b/questions.html
index e4d9340..a47f66f 100644
--- a/questions.html
+++ b/questions.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,7 +11,7 @@
     <link href="assets/css/style.css" rel="stylesheet" type="text/css">
 
     <!--Bootstrap File-->
-    <link rel="stylesheet" href="assets/css/bootstrap.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
     <link rel="stylesheet" href="assets/css/creative.css">
 
     <!--Fonts-->
@@ -24,90 +25,85 @@
 <body>
 
     <nav id="mainNav" class="navbar navbar-default navbar-fixed-top" >
-        <div class="container-fluid">
-            <!-- Brand and toggle get grouped for better mobile display -->
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed"
-                        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                    <span class="sr-only">Toggle navigation</span> <span
-                        class="icon-bar"></span> <span class="icon-bar"></span> <span
-                        class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand page-scroll" href="#page-top"> ENTER OUR NAME HERE</a>
-            </div>
+    <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed"
+                    data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                <span class="sr-only">Toggle navigation</span> <span
+                    class="icon-bar"></span> <span class="icon-bar"></span> <span
+                    class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand page-scroll" href="index.html"> ENTER OUR NAME HERE</a>
+        </div>
 
-            <!-- Collect the nav links, forms, and other content for toggling -->
-            <div class="collapse navbar-collapse"
-                 id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav navbar-right">
-                    <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="#">First Year</a></li>
-                            <li><a href="#">Second Year</a></li>
-                            <li><a href="#">Third Year</a></li>
-                            <li><a href="#">Fourth Year</a></li>
-                        </ul>
-                    </li>
-                    <li><a href="#">Register</a></li>
-                    <li><a href="#">Log In</a></li>
-
-                    <!--<li id="header"><header><a href="#"><img src="assets/images/logo.png"></a></header></li> &ndash;&gt;-->
-                </ul>
-            </div>
-            <!-- /.navbar-collapse -->
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse"
+             id="bs-example-navbar-collapse-1">
+            <ul class="nav navbar-nav navbar-right">
+                <li><a href="user_solutions.html">Solutions Page</a></li>
+                <li><a href="user_profile.html">Profile Page</a></li>
+                <li><a href="questions.html">Questions Page</a></li>
+                <li><a href="exams.html">Exams Pages</a></li>
+
+                <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li class="dropdown-submenu">
+                            <a tabindex="-1" href="#">First Year<i class="fa fa-chevron-right"></i></a>
+                            <ul class="dropdown-menu">
+                                <li><a tabindex="-1" href="#">CSC108</a></li>
+                                <li><a href="#">CSC148</a></li>
+                                <li><a href="#">CSC165</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Second Year</a></li>
+                        <li><a href="#">Third Year</a></li>
+                        <li><a href="#">Fourth Year</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Register</a></li>
+                <li><a href="#">Log In</a></li>
+
+                <!--<li id="header"><header><a href="#"><img src="assets/images/logo.png"></a></header></li> &ndash;&gt;-->
+            </ul>
         </div>
-        <!-- /.container-fluid -->
-    </nav>
+        <!-- /.navbar-collapse -->
+    </div>
+    <!-- /.container-fluid -->
+</nav>
 
     <main id = 'solutions-main'>
         <div class = 'search container' id = 'solutions-div'>
-            <h1 id = 'solutions-header'>CSC309-Programming on the Web</h1>
-            <h3> Summer, 2016</h3>
-            <h3> Final</h3>
-            <section class = 'solutions-card'>
-                <h3 class = 'questions-number'>Question 1</h3>
-                <p class = 'questions-comment' >Comments: 4</p>
-            </section>
-
-            <section class = 'solutions-card'>
-                <h3 class = 'questions-number'>Question 2</h3>
-                <p class = 'questions-comment' >Comments: 3</p>
-            </section>
-
-            <section class = 'solutions-card'>
-                <h3 class = 'questions-number'>Question 3</h3>
-                <p class = 'questions-comment' >Comments: 2</p>
-            </section>
-
-            <section class = 'solutions-card'>
-                <h3 class = 'questions-number'>Question 4</h3>
-                <p class = 'questions-comment' >Comments: 1</p>
-            </section>
-
+                <h1 id = 'solutions-header'>CSC309-Programming on the Web</h1>
+                <h3> Summer, 2016</h3>
+                <h3> Final</h3>
+                <section class = 'solutions-card'>
+                    <h3 class = 'questions-number'>Question 1</h3>
+                    <p class = 'questions-comment' >Comments: 4</p>
+                </section>
+
+                <section class = 'solutions-card'>
+                    <h3 class = 'questions-number'>Question 2</h3>
+                    <p class = 'questions-comment' >Comments: 3</p>
+                </section>
+
+                <section class = 'solutions-card'>
+                    <h3 class = 'questions-number'>Question 3</h3>
+                    <p class = 'questions-comment' >Comments: 2</p>
+                </section>
+
+                <section class = 'solutions-card'>
+                    <h3 class = 'questions-number'>Question 4</h3>
+                    <p class = 'questions-comment' >Comments: 1</p>
+                </section>
         </div>
 
     </main>
 
-    <!--<main>-->
-        <!--&lt;!&ndash;made the id in to a class&ndash;&gt;-->
-        <!--<div class='search container'>-->
-            <!--<h2>The solutions to all your problems.</h2>-->
-            <!--&lt;!&ndash;<img src="assets/images/down.png">&ndash;&gt;-->
-            <!--<input type="text" name="search" placeholder="Enter course name">-->
-        <!--</div>-->
-
-    <!--</main>-->
 
     <footer>
-        <!--<div id="footer-container" class="container-fluid">-->
-        <!--<nav>-->
-        <!--<a href="#">Contact</a>-->
-        <!--<a href="#">About Us</a>-->
-        <!--<a href="#">Terms of Use</a>-->
-        <!--</nav>-->
-        <!--<h6>Copyright 2016</h6>-->
-        <!--</div>-->
+
         <div class="navbar navbar-default navbar-fixed-bottom">
             <div class="container-fluid">
                 <div class="navbar-collapse collapse" id="footer-body">
@@ -130,5 +126,21 @@
         </div>
     </footer>
 
+    <script>
+        $(document).ready(function() {
+
+            // For the Second level Dropdown menu, highlight the parent
+            $( ".dropdown-menu" )
+                    .mouseenter(function() {
+                        $(this).parent('li').addClass('active');
+                    })
+                    .mouseleave(function() {
+                        $(this).parent('li').removeClass('active');
+                    });
+
+        });
+    </script>
+
+
 </body>
 </html>
\ No newline at end of file
diff --git a/user_solutions.html b/user_solutions.html
index c4cc52b..02f3708 100644
--- a/user_solutions.html
+++ b/user_solutions.html
@@ -1,46 +1,80 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Solutions Repo</title>
 
+	<!--ORDER IS IMPORTANT DO NOT SHIFT-->
+
+	<!--Custom CSS Files-->
 	<link href="assets/css/style.css" rel="stylesheet" type="text/css">
+
+	<!--Bootstrap File-->
+	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
+	<link rel="stylesheet" href="assets/css/creative.css">
+
+	<!--Fonts-->
 	<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
 	<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+
+	<!--JS-->
+	<script src="assets/js/jquery-2.2.4.min.js"></script>
+	<script src="assets/js/bootstrap.min.js"></script>
 </head>
 <body>
-	<div id="top-bar">
-		<div id="logo"><a href="#"><img src="assets/images/placeholder.png"></a></div>
-		<nav>
-			<ul>
+	<nav id="mainNav" class="navbar navbar-default navbar-fixed-top" >
+	<div class="container-fluid">
+		<!-- Brand and toggle get grouped for better mobile display -->
+		<div class="navbar-header">
+			<button type="button" class="navbar-toggle collapsed"
+					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+				<span class="sr-only">Toggle navigation</span> <span
+					class="icon-bar"></span> <span class="icon-bar"></span> <span
+					class="icon-bar"></span>
+			</button>
+			<a class="navbar-brand page-scroll" href="index.html"> ENTER OUR NAME HERE</a>
+		</div>
+
+		<!-- Collect the nav links, forms, and other content for toggling -->
+		<div class="collapse navbar-collapse"
+			 id="bs-example-navbar-collapse-1">
+			<ul class="nav navbar-nav navbar-right">
+				<li><a href="user_solutions.html">Solutions Page</a></li>
+				<li><a href="user_profile.html">Profile Page</a></li>
+				<li><a href="questions.html">Questions Page</a></li>
+				<li><a href="exams.html">Exams Pages</a></li>
+
+				<li class="dropdown">
+					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
+					<ul class="dropdown-menu">
+						<li class="dropdown-submenu">
+							<a tabindex="-1" href="#">First Year<i class="fa fa-chevron-right"></i></a>
+							<ul class="dropdown-menu">
+								<li><a tabindex="-1" href="#">CSC108</a></li>
+								<li><a href="#">CSC148</a></li>
+								<li><a href="#">CSC165</a></li>
+							</ul>
+						</li>
+						<li><a href="#">Second Year</a></li>
+						<li><a href="#">Third Year</a></li>
+						<li><a href="#">Fourth Year</a></li>
+					</ul>
+				</li>
 				<li><a href="#">Register</a></li>
 				<li><a href="#">Log In</a></li>
-				<li class="drop-down">
-					<a href="#">Courses</a>
-					<nav class="drop-menu">
-						<ul>
-							<li class="side-drop"><a href="#">First Year</a>
-								<div class="side-menu">
-									<a href="CSC108"></a>
-									<a href="CSC148"></a>
-									<a href="CSC165"></a>
-								</div>
-							</li>
-							<li>
-								<a href="#">Second Year</a></li>
-							<li><a href="#">Third Year</a></li>
-							<li><a href="#">Fourth Year</a></li>
-						</ul>	
-					</nav>
-				</li>
-				<!-- <li id="header"><header><a href="#"><img src="assets/images/logo.png"></a></header></li> -->
+
+				<!--<li id="header"><header><a href="#"><img src="assets/images/logo.png"></a></header></li> &ndash;&gt;-->
 			</ul>
-		</nav>
+		</div>
+		<!-- /.navbar-collapse -->
 	</div>
+	<!-- /.container-fluid -->
+</nav>
 
-	<main>
+	<main id="solutions-main">
 	<!--made the id in to a class-->
-		<div class='search solutions-container'>
+		<div class='search solutions-container container'>
 
 			<div id="solutions">
 				<button id="add-solution"><h3>Add a solution</h3></button>
@@ -148,16 +182,51 @@
 	</main>
 
 	<footer>
-		<div id="footer-container">
-			<nav>
-					<a href="#">Contact</a>
-					<a href="#">About Us</a>
-					<a href="#">Terms of Use</a>
-			</nav>
-			<h6>Copyright 2016</h6>
-		</div>
+		<!--<div id="footer-container" class="container-fluid">-->
+		<!--<nav>-->
+		<!--<a href="#">Contact</a>-->
+		<!--<a href="#">About Us</a>-->
+		<!--<a href="#">Terms of Use</a>-->
+		<!--</nav>-->
+		<!--<h6>Copyright 2016</h6>-->
+		<!--</div>-->
+		<div class="navbar navbar-default navbar-fixed-bottom">
+			<div class="container-fluid">
+				<div class="navbar-collapse collapse" id="footer-body">
+					<ul class="nav navbar-nav">
+						<li><a href="#">About Us</a></li>
+						<li><a href="#">Contact Us</a></li>
+						<li><a href="#">Terms &amp; Conditions</a></li>
+						<li><a href="#">Privacy Policy</a></li>
+					</ul>
+				</div>
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+				</div>
 
+			</div>
+		</div>
 	</footer>
+
+	<script>
+		$(document).ready(function() {
+
+			// For the Second level Dropdown menu, highlight the parent
+			$( ".dropdown-menu" )
+					.mouseenter(function() {
+						$(this).parent('li').addClass('active');
+					})
+					.mouseleave(function() {
+						$(this).parent('li').removeClass('active');
+					});
+
+		});
+	</script>
+
 </body>
 </html>