diff options
| -rw-r--r-- | assets/css/creative.css | 41 | ||||
| -rw-r--r-- | assets/css/style.css | 34 | ||||
| -rw-r--r-- | index.html | 37 |
3 files changed, 66 insertions, 46 deletions
diff --git a/assets/css/creative.css b/assets/css/creative.css index 1f9012c..2f45025 100644 --- a/assets/css/creative.css +++ b/assets/css/creative.css @@ -146,46 +146,9 @@ footer .navbar-default .affix .nav>li>a:focus { color: #222; } -/*@media(min-width:768px) { - footer .navbar-default { - border-color: rgba(255,255,255,.3); - background-color: #333333; - } - - footer .navbar-default .navbar-header .navbar-brand { - color: rgba(255,255,255,.7); - } - - footer .navbar-default .navbar-header .navbar-brand:hover , - footer .navbar-default .navbar-header .navbar-brand:focus { - color: #fff; - } - - footer .navbar-default .nav > li>a, - footer .navbar-default .nav>li>a:focus { - color: rgba(255,255,255,.7); - } - - footer .navbar-default .nav > li>a:hover, - footer .navbar-default .nav>li>a:focus:hover { - color: #fff; - } - - footer .navbar-default .affix { - border-color: rgba(34,34,34,.05); - background-color: #fff; - } - - footer .navbar-default .affix .navbar-header .navbar-brand { - font-size: 14px; - } - +@media(min-width:768px) { - footer .navbar-default .affix .nav > li>a, - footer .navbar-default .affix .nav>li>a:focus { - color: #222; - } -}*/ +} header { diff --git a/assets/css/style.css b/assets/css/style.css index 35eb354..308a36c 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -47,7 +47,7 @@ main .search h2{ padding-top: 200px; /* Change to move search bar content. Keep as pixel*/ } -.search input[type=text] { +.search input { text-align: center; box-sizing: border-box; background: white url('../images/search_icon.png') no-repeat 9px 9px; @@ -55,7 +55,7 @@ main .search h2{ padding: 12px 20px 12px 40px; } -.search input[type=text], .search button.search-button { +.search input, .search button.search-button { font-size: 16px; height: 40px; border-radius: 10px; @@ -404,3 +404,33 @@ section.exam-info em { padding: 15px; } /*** ABOUT PAGE END ***/ + +/************************** Pop-up Window *********************************************/ + +.login-window { + display: inline-block; + text-align: left; + vertical-align: middle; + padding: 15%; +} + +.login-window h4 { + text-transform: uppercase; + font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif; + font-weight: 700; + color: #666666; +} + +.login-window .modal-header { + text-align: center; +} + +.login-window input { + +} + +.login-window input:focus { + +} + + @@ -24,6 +24,7 @@ </head> <body> + <nav id="mainNav" class="navbar navbar-default navbar-fixed-top" > <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> @@ -62,7 +63,7 @@ <li><a href="#">Fourth Year</a></li> </ul> </li> - <li><a href="#">Log In</a></li> + <li><a href="#" data-toggle="modal" data-target=".login-window">Log In</a></li> <li><a href="#">Register</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Links <span class="caret"></span></a> @@ -88,9 +89,6 @@ <div class="header-content"> <div class="header-content-inner"> - - - <p> <strong>The solutions to all your problems</strong> </p> @@ -107,7 +105,7 @@ </ul> </div> - <input type="text" class="form-control" aria-label="..." name="search" placeholder="Enter course name"> + <input type="search" class="form-control" aria-label="..." name="search" placeholder="Enter course name"> <span class="input-group-btn"> <button onclick="window.location='exams.html';"class="btn btn-default search-button go-button" type="button">Go!</button> </span> @@ -155,6 +153,35 @@ </nav> </footer> + <!-- POP UP WINDOW FOR LOGIN --> + <article class="modal fade login-window"> + <div class="modal-dialog"> + <div class="modal-content"> + + <section class="modal-header"> + <button type="button" class="close" data-dismiss="modal">×</button> + <h4 class="modal-title">Log In</h4> + </section> + + <section class="modal-body"> + <form role="form"> + <div class="form-group"> + <input type="text" class="form-control" placeholder="Username"> + </div> + <div class="form-group"> + <input type="password" class="form-control" placeholder="Password"> + </div> + </form> + </section> + + <div class="modal-footer"> + <button class="btn">Submit</button> + </div> + + </div> + </div> + </article> + <script> $(document).ready(function() { |