diff options
| -rw-r--r-- | assets/css/style.css | 39 | ||||
| -rw-r--r-- | index.html | 19 |
2 files changed, 37 insertions, 21 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index 99f44d9..1697105 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,9 +1,12 @@ + html, body { height: 100%; + font-family: 'Roboto', sans-serif; } body { background-color: white; + margin: 0; } ul { @@ -14,8 +17,11 @@ a { text-decoration: none; } + +/*top_bar.height + main.height + footer.height = 8% + 80% + 12% */ #top-bar{ width: 100%; + height: 8%; display: flex; display: -webkit-flex; flex-direction: row; @@ -117,6 +123,7 @@ main #search { height: 100%; background-color: rgba(235,235,235, 0.7); + } /* Changes - added h2 styiling for main */ @@ -156,31 +163,39 @@ main #search img { display: inline; } + footer { - position: relative; + background-color: #333333; bottom: 0; - background-color: white; + height: 12%; } -footer nav { - padding-left: 16%; +footer #footer-container{ + margin-left: 20%; + margin-right: 20%; + padding: .5%; } - -footer nav ul li{ - display: inline-block; +footer nav a{ float: left; + padding-right: 20px; + font-size: 1em; } footer h6 { - display: inline-block; + margin: 0; + color: white; float: right; - padding-right: 20%; + font-size: 1em; + font-weight: normal; + font-style: italic; + } -footer nav ul li a { +footer nav a { display: block; color: darkgray; - text-align: center; - padding: 14px 16px; vertical-align: top; } + + + @@ -6,6 +6,7 @@ <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"> @@ -31,7 +32,7 @@ </div> <main> - + <div id='search'> <h2>The solutions to all your problems.</h2> <!--<img src="assets/images/down.png">--> @@ -43,15 +44,15 @@ <footer> - <nav> - <ul> - <li><a href="#">Contact</a></li> - <li><a href="#">About Us</a></li> - <li><a href="#">Terms of Use</a></li> - </ul> - </nav> + <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> - <h6>Copyright 2016</h6> </footer> </body> </html>
\ No newline at end of file |