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