From 6b722aedc374d101f4c1423aa252292651e6ec13 Mon Sep 17 00:00:00 2001 From: ssandlin12 Date: Tue, 30 May 2023 13:38:22 +0200 Subject: [PATCH] first commit --- assets/more-icon.png | Bin 0 -> 549 bytes index.html | 6 +++ styles.css | 97 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 103 insertions(+) create mode 100644 assets/more-icon.png create mode 100644 styles.css diff --git a/assets/more-icon.png b/assets/more-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..27401e8a26fea76dd4cbc2bbefb0fadf0a8ac94f GIT binary patch literal 549 zcmeAS@N?(olHy`uVBq!ia0vp^CqS5k4M?tyST_$yu@pObhHwBu4M$1`kk47*5n0T@ zz%2~Ij105pNH8!k9`|%{45^s&_O4@=NT5jTLwl{6T<;XN$+ExQz!8#M^Y_L3W@b~H0?m7?J?}CB%_Rx^Sbi_e{OY!HtB_TPqryaU(7A@VqcZ%E|%4I!k;hpUh_4nq>=ehqOA$#-hiSjLfwDIq&=J)mUfAa4$`M3SwCcXLM>XlE@ zY#r;u*Sk+om>Pd|_C?iev%Xe6S~2hZ6yw=nS$~@CVpv@(8~Z?DbKJ&Nc46|fzN^}c z?tYd2HMv9(tCb8Ep6_q1|9Z=`u6UBo+}P6CTru^Nn|I{?d5{{rP7Gw-UH(r2du3vq zLf@_a46?5D=b5`NnAVh8?>eA)bBq0^?Y;Z0PF%hjHvQ_+M=FfiEx|3y_nH0I683!= SkrnqqiacHYT-G@yGywoGjJVbS literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 72b560d..ff62c23 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,11 @@ My Personal Web Page + + + + +
@@ -12,6 +17,7 @@

Welcome to My Personal Web Page

  • About
  • Contact
    • +
    diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..0cb235e --- /dev/null +++ b/styles.css @@ -0,0 +1,97 @@ +html { + font-family: Helvetica, sans-serif; + font-size: 14px; +} + +nav ul { + list-style-type: none; +} + +nav ul li a { + text-decoration: none; + color: #000; + } + + nav ul li { + margin-right: 10px; + font-size: 1.25rem; + margin-bottom: 10px; + } + + + +@media (min-width: 601px) { + + header { + display: flex; + justify-content: space-between; + align-items: center; + } + + nav ul { + display: flex; + align-items: center; + list-style-type: none; + } + + #more-icon { + display: none; + } + } + + + @media (min-width: 541px) and (max-width: 600px) { + + html { + font-size: 12px; + } + + /* center-align the header */ + header { + text-align: center; + } + + + /* stack the navigation vertically */ + nav ul { + display: flex; + flex-direction: column; + } + + + #more-icon { + display: none; + } + } + + + @media (max-width: 540px) { + + html { + font-size: 12px; + } + + header { + display: flex; + justify-content: space-between; + align-items: center; + } + + nav ul { + display: none; /* Hide all nav items initially */ + } + + #more-icon { + height: 36px; + width: 36px; + } + } + + +h2 { + font-size: clamp(1.5rem, 1.5vw, 1.75rem); +} + +p { + font-size: clamp(1.25rem, 1.5vw, 1.5rem); +}