diff options
| -rw-r--r-- | assets/css/style.css | 57 | ||||
| -rw-r--r-- | index.html | 113 | ||||
| -rw-r--r-- | user_solutions.html | 66 |
3 files changed, 141 insertions, 95 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index dad099b..e88062c 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -105,10 +105,16 @@ h1{ } .drop-down:hover .drop-menu { - display: block; + display: block; + + } + + .side-menu { + display } + main { background-image: url("../images/main.jpg"); @@ -135,7 +141,7 @@ main .search { flex: 1; width: 60%; height: 100%; - background-color: rgba(235,235,235, 0.7); + background-color: rgba(235,235,235, 0.6); } @@ -149,24 +155,47 @@ main .search h2{ padding-top: 200px; /* Change to move search bar content. Keep as pixel*/ } +main #search-select { + display: inline-block; +} + +main #search-select select { + color: black; + width: 100px; + padding: 5px; + font-size: 16px; + box-sizing: border-box; + -webkit-appearance: none; + background: url(../images/down.png) no-repeat lightgray; + background-size: 20px 20px; + background-position: 72px 9px; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + margin-right: -5px; +} + main .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 { + height: 40px; + border: 2px solid #ccc; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } main .search input[type=text]:focus { @@ -178,7 +207,18 @@ main .search img { display: inline; } -/* +main button#add-solution { + display: inline-block; + border-radius: 10px; + background-color: maroon; + color: white; + width: 110px; + +} + +main p { + display: inline-block; +} footer { background-color: #333333; @@ -206,15 +246,12 @@ footer h6 { font-style: italic; } -*/ -/* footer nav a { display: block; color: darkgray; vertical-align: top; } -*/ /***********************************************************************************************************************/ @@ -4,25 +4,12 @@ <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" crossorigin="anonymous"> - <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="top-bar"> <div id="logo"><a href="#"><img src="assets/images/placeholder.png"></a></div> <nav> <ul> @@ -32,95 +19,51 @@ <a href="#">Courses</a> <nav class="drop-menu"> <ul> - <li><a href="#">First Year</a></li> - <li><a href="#">Second Year</a></li> + <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> + </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> --> </ul> </nav> - </div>--> - - <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> –>--> - </ul> - </div> - <!-- /.navbar-collapse --> - </div> - <!-- /.container-fluid --> - </nav> + </div> <main> <!--made the id in to a class--> - <div class='search container'> + <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> + </div> <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"> - <ul class="nav navbar-nav"> - <li><a href="#">About Us</a></li> - <li><a href="#">Contact Us</a></li> - <li><a href="#">Terms & 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 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> - </footer> + </footer> </body> </html>
\ No newline at end of file diff --git a/user_solutions.html b/user_solutions.html new file mode 100644 index 0000000..ee56557 --- /dev/null +++ b/user_solutions.html @@ -0,0 +1,66 @@ +<html> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Solutions Repo</title> + + <link href="assets/css/style.css" rel="stylesheet" type="text/css"> + <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'> +</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> + <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 solutions'> + + <button id="add-solution"><h3>Add a solution</h3></button> + <p id="show-path">CSC148 > Winter 2015 > Question 1</p> + + </div> + + </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> + + </footer> +</body> +</html> + + |