diff --git a/img/share_icon.png b/img/share_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..83e22f971b24f48b036b3c86f628f9a856463304 Binary files /dev/null and b/img/share_icon.png differ diff --git a/index.html b/index.html index fd67e48c5df15c2e55a54e40ef93c608215a5d20..34672aa3480a8f717ae73094c13241bad8c9fc85 100644 --- a/index.html +++ b/index.html @@ -23,14 +23,14 @@ <li><a href="#">NASA Audiences</a></li> <li> <form class="search-form" method="post" accept-charset="UTF-8"> - <input type="search" size="15" placeholder="Search" /> - <img class="search-icon" src="img/search_icon.png" /> + <input type="search" size="10" placeholder="Search" /> + <input type="button" /> </form> </li> - <li><img src="" /></li> + <li><img src="img/share_icon.png" /></li> </ul> - <ul class="centered-nav"> + <ul class="center-nav"> <li><a href="#">International Space Station</a></li> <li><a href="#">Journey to Mars</a></li> <li><a href="#">Earth</a></li> diff --git a/styles.css b/styles.css index 9f9cab865a2e81d970982e89e5dbdbc9fd08cacc..0a0c8a8c2c607cf4be4a7faa4c6fb2f4b9829de4 100644 --- a/styles.css +++ b/styles.css @@ -74,25 +74,34 @@ nav ul li a { float: left; } +.top-nav { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; +} + .top-nav li { font-size: 1em; padding: 0.5em 0; } -.top-nav li a { +.top-nav li a, .top-nav li img, .top-nav li form { display: block; - border-right: 0.05em solid #eeeeee; padding: 0.5em; } +.top-nav li a { + border-right: 0.05em solid #eeeeee; +} + .top-nav li:nth-child(n+7) a { border: none; } -.top-nav { - display: flex; - flex-direction: row; - justify-content: flex-end; +.top-nav li img { + height: 2.5em; + cursor: pointer; } .search-form { @@ -108,11 +117,17 @@ nav ul li a { .search-form input[type="search"] { border: none; outline: none; - display: inline-block; background-color: transparent; font-size: 1em; } -.search-form .search-icon { - height: 1.5em; +.search-form input[type="button"] { + width: 1.5em; + background-color: transparent; + background-image: url('img/search_icon.png'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: none; + cursor: pointer; } \ No newline at end of file