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