diff options
| -rw-r--r-- | assets/css/style.css | 27 | ||||
| -rw-r--r-- | index.html | 23 |
2 files changed, 24 insertions, 26 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index 4fb96fb..6eb6a24 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -62,34 +62,11 @@ main .search h2{ padding-top: 200px; /* Change to move search bar content. Keep as pixel*/ } -.search-select { - display: inline-block; -} - -.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; -} .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; @@ -102,8 +79,10 @@ main .search h2{ } -.search input[type=text], .search-select select { +.search input[type=text], .search button { + font-size: 16px; height: 40px; + border-radius: 10px; border: 2px solid #ccc; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } @@ -80,7 +80,26 @@ <strong>The solutions to all your problems</strong> </p> <hr> - <div class="search"> + + + + <div class="search col-md-12 col-lg-12"> + <div class="input-group"> + <div class="input-group-btn"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Courses <span class="caret"></span></button> + + <ul class="dropdown-menu"> + <li><a href="#">Courses</a></li> + <li><a href="#">Users</a> </li> + </ul> + </div> + + <input type="text" class="form-control" aria-label="..." name="search" placeholder="Enter course name"> + </div> + + </div> + + <!--<div class="search"> <div class="search-select"> <select> <option value="courses">Courses</option> @@ -88,7 +107,7 @@ </select> </div> <input type="text" name="search" placeholder="Enter course name"> - </div> + </div> --> </div> </div> </header> |