diff options
| author | nanalelfe <nargiza.nosirova@mail.utoronto.ca> | 2016-07-08 07:57:31 +0000 |
|---|---|---|
| committer | nanalelfe <nargiza.nosirova@mail.utoronto.ca> | 2016-07-08 07:57:31 +0000 |
| commit | 0160f4967008dd08dd07f0332774eb487f528095 (patch) | |
| tree | 0efe10dd32f5c644da1a5915587350def747fa50 | |
| parent | c13c53139ca6bff3cbe9153227b8d4dc712a8b4d (diff) | |
Completed main. Positioning problems need fizing
| -rw-r--r-- | assets/css/style.css | 118 | ||||
| -rw-r--r-- | assets/images/.DS_Store | bin | 0 -> 6148 bytes | |||
| -rw-r--r-- | assets/images/down.png | bin | 0 -> 1433 bytes | |||
| -rw-r--r-- | assets/images/main.jpg | bin | 0 -> 73224 bytes | |||
| -rw-r--r-- | assets/images/placeholder.png | bin | 0 -> 8289 bytes | |||
| -rw-r--r-- | assets/images/search_icon.png | bin | 0 -> 2782 bytes | |||
| -rw-r--r-- | index.html | 16 |
7 files changed, 104 insertions, 30 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index e67ac5f..235518c 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,12 +1,22 @@ +html, body { + height: 100%; +} + +body { + background-color: white; +} + ul { list-style-type: none; } +a { + text-decoration: none; +} + #top-bar{ - background-color: #9d9090; width: 100%; display: flex; - display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; @@ -16,43 +26,99 @@ ul { -webkit-align-items: flex-end; } -#top-bar nav { - flex: 0 1 auto; - -webkit-flex: 0 1 auto; -} + #top-bar nav { + flex: 0 1 auto; + -webkit-flex: 0 1 auto; + padding-right: 20%; -#top-bar img { - height: 20%; - width: auto; -} + } + #top-bar #logo { + padding-left: 20%; + } -#top-bar nav ul { - margin: 0; - padding: 0; - overflow: hidden; - background-color: #9d9090; -} -#top-bar ul li { - float: right; + #top-bar img { + padding: 10%; + height: 3%; + width: auto; + } + + + #top-bar nav ul { + margin: 0; + padding: 0; + overflow: hidden; + + } + #top-bar ul li { + float: right; + } + + #top-bar ul li a { + display: block; + color: darkgray; + text-align: center; + padding: 14px 16px; + vertical-align: bottom; + } + + #top-bar ul li a:hover { + color: lightblue; + } + +#drop-down { + display: none; } -#top-bar ul li a { - display: block; - color: white; +main { + position: relative; + background-image: url("../images/main.jpg"); + background-size: 250px 250px; text-align: center; - padding: 14px 16px; - text-decoration: none; - vertical-align: bottom; + height: 80%; + width: 100%; + overflow: auto; } -#top-bar ul li a:hover { - background-color: lightblue; +main #search { + position: absolute; + vertical-align: middle; + width: 60%; + height: 80%; + background-color: rgba(235,235,235, 0.7); + margin-left: 20%; + padding-top: 15%; } +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; + -webkit-transition: width 0.4s ease-in-out; + transition: width 0.4s ease-in-out; +} +main #search input[type=text]:focus { + width: 50%; +} +main #search img { + width: 50px; + display: inline; +} footer { bottom: 0; + background-color: white; } diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store Binary files differnew file mode 100644 index 0000000..5008ddf --- /dev/null +++ b/assets/images/.DS_Store diff --git a/assets/images/down.png b/assets/images/down.png Binary files differnew file mode 100644 index 0000000..2e77b84 --- /dev/null +++ b/assets/images/down.png diff --git a/assets/images/main.jpg b/assets/images/main.jpg Binary files differnew file mode 100644 index 0000000..fb1f76c --- /dev/null +++ b/assets/images/main.jpg diff --git a/assets/images/placeholder.png b/assets/images/placeholder.png Binary files differnew file mode 100644 index 0000000..ca444a8 --- /dev/null +++ b/assets/images/placeholder.png diff --git a/assets/images/search_icon.png b/assets/images/search_icon.png Binary files differnew file mode 100644 index 0000000..d21d003 --- /dev/null +++ b/assets/images/search_icon.png @@ -8,7 +8,7 @@ </head> <body> <div id="top-bar"> - <a href="#"><img src="assets/images/logo.png"></a> + <div id="logo"><a href="#"><img src="assets/images/placeholder.png"></a></div> <nav> <ul> <li><a href="#">Register</a></li> @@ -28,7 +28,16 @@ </ul> </nav> - <h2>The solutions to all your problems.</h2> + <main> + <div id='search'> + <h2>The solutions to all your problems.</h2> + <!--<img src="assets/images/down.png">--> + <input type="text" name="search" placeholder="Enter course name"> + </div> + + </main> + + <footer> <nav> @@ -40,7 +49,6 @@ </nav> <h6>Copyright 2016</h6> - - </footer> +</footer> </body> </html>
\ No newline at end of file |
