From 474c40ddedeac262a47ee5f9ae497fbbbc1d1855 Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Wed, 6 Sep 2023 10:33:16 +0200
Subject: [PATCH] Finish first nav bar

---
 img/share_icon.png | Bin 0 -> 1318 bytes
 index.html         |   8 ++++----
 styles.css         |  33 ++++++++++++++++++++++++---------
 3 files changed, 28 insertions(+), 13 deletions(-)
 create mode 100644 img/share_icon.png

diff --git a/img/share_icon.png b/img/share_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..83e22f971b24f48b036b3c86f628f9a856463304
GIT binary patch
literal 1318
zcmeAS@N?(olHy`uVBq!ia0y~yV5k6L4mJh`2Fnz)OAHJQoCO|{#S9GG!XV7ZFl&wk
z0|UzqPZ!6KiaBrR#&^rOiX46Jsr;`}Sma~8Lem1q`*-&I6m?l#C(|i0agS8;75|6L
zk@u&>E>>FfL+F!{fsnd!^z$$0(pr32tYem?M@~<fIrH7C=-A@Ag7|5v)vNvPuX^>$
zs<zrzu|>d%15T7o5;zphV5jg?^<+Fl596KHNjdh)m7)iJS65g2SN-3g<azAzM{Sk;
zYCri;7M<L1|8JJj%sG+YtQMuRH6Kh?(P#Wo&YJjNeA-<V`?ueJFIP!$@==>?tnxo5
z{094xuOBP^tSR5^vi`bu*Q4GnKV9j*{T}l|)veR@9(7b}e9ADXa#OOt@cz3$;}6?K
zJGv`>hR?pQT6B8C9+Buf%1ZSbjnQ=?PQ6z@Nfo*~mv$HYn-jfFX8P@%$8PTf3b*?9
zEK6D?yI$--&F_u5h2q5@t8=#$E`C^(f73N#QhddB`)Z4N&j+d>O5cA==Wnn*u2}Wt
z?!PyT2E`&j)|LO>%zhx2bB>`(es;$>iAmN`DXCr@4}B+@%dqZybeG+d`}f+#8@gSu
z?Y>t#aqb3&eT*OGZ{M*k)KaQ<-iLRSbvQax-fZ0Q>aPA=^(C5Xc+YPB`}gnVdw(xS
zIxRXR*V%oq_KK%dRPmd`kB)EBk^lN`weQ&*?>+v>2Ht7(EBe8)oA*J?SMzvP%N|9&
zlh+sDeQGJF#8E9WNuS}z+LMWqGiNt!aMwKjNsvMQYNcf2>Qn~#>~p>zH`r4*%T7?X
zjC^PnY`u1&`@)u1+j9jLHG4F=wlmha6<v?J7F`w|X{Gd2_~d!UIq#qFUFH0DBQo{-
z2DUg(#XZ5>8#Os++h+et=6{o?_Vba}^+_A<em;InpzNTSj(V*3p|U&j+5IvM^X%(n
zIcHC|FUy$CQO3(Td%gWPv6I<RHmPs=*GgKu2JU%!(SGi7-}*OF3y;t3`<blzhV4i4
z)QvNLCz~FB_OAb`%<TR4-`c))8Gk#@^h2@ix0#%O{hGIVxqBEkPP8{GRw;O9!GCf4
z-rMtS&&ey^{F+z)Z3gG5Lebjbe$R;;rI`C9_i*g>>1dUmu)42u8fQx!`>_LD9x4j!
zjI2I+_EmFoXfI4oyy_?<5aM*)W>fNgKOcuPlat)t%d!%d#;<y%u#v^+{o8Fuw*<BS
z3VA*`oV=M~o0LuL&Zjry=N{R!#+UCpzx5Bjg|deJt3%mWe(u?`rqtExclzh2qOEbK
zYt$CbE#I@|SVN@CS*@s_$?2ifX4#ir&tv&~;o8=IGmS5%XD@P2o^&DcUB6xY-3RvJ
z|1x$T47J~(xNy5|i(c2Gr>}Z%&lO#__}9Ue+;`{a|EURjex&;qySi3Mpol)>kHwAq
z_j6q3_jAo)SRdMbY}3PlzYnA&YuByRz2FhQ(^@1_-eomogYIvMOqa&2_E+r7r(R4|
znHXws@wsQ-t=YTXq%^Bmrfqq}o<8ql@KyeEHj5YjI{2}bt>AKC%2ob8-rDmESJoBe
z2&7-nx~UlTwK-a#;+e*VSM1&if!tFo&ddDzwRr1^Q#a*(ukxR}Ezf(E|J*Hk+qWsD
z)AXF=>$kjOfBve!?G=0a`~H0|E*v?#?EXCasISd)Ya^OF9^K<ow0VBb;bQm8{;<Cf
zLM$vSDx?m4_vJfnr8j%IebusG2P=OqUcO3xPQQKCG}pfg@Ztqj&@3{4Zg<Nq*5`81
Reo#rs;OXk;vd$@?2>?G3ao+#{

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index fd67e48..34672aa 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 9f9cab8..0a0c8a8 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
-- 
GitLab