From 8643a3c40609db14156c87e783859040c5ce990f Mon Sep 17 00:00:00 2001 From: Nil E Date: Sun, 14 Jan 2024 16:38:17 +0100 Subject: [PATCH 1/2] added the media queries and the design --- index.html | 8 ++-- styles.css | 122 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+), 3 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 72b560d..84acfd1 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,17 @@ My Personal Web Page + +

Welcome to My Personal Web Page

diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5e2e386 --- /dev/null +++ b/styles.css @@ -0,0 +1,122 @@ +/* adding desktop design here */ +@media (min-width: 1008px) { +body { + background-color: rgb(209, 197, 187); + font-family: Arial, Helvetica, sans-serif; +} + +header { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +ul { + list-style: none; + display: flex; + flex-direction: row; + padding-inline-start: 0; +} + +a.nav-text { + text-decoration: none; + color: black; + font-weight: 100; + padding: 10px 10px 10px 0; + text-align: left; +} + +main { + background-color: white; + display: flex; + flex-direction: row; + +} + +section { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 50%; + margin: 25px; +} + +p { + text-wrap: wrap; + padding: 5px 5px 5px 0; + font-size: 20px; +} + +h2 { + font-size: 35px; +} + +footer { + text-align: center; +} + +footer > p { + font-size: 15px; +} +} + +/* adding mobile design here */ +@media (max-width: 640px) { + body { + background-color: rgb(209, 197, 187); + font-family: Arial, Helvetica, sans-serif; + } + + header { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin: 5px; + } + + ul { + list-style: none; + display: flex; + flex-direction: column; + padding-inline-start: 0; + margin-top: 0; + } + + a.nav-text { + text-decoration: none; + color: black; + font-weight: 100; + padding: 10px; + font-size: 20px; + } + + li { + margin: 5px; + } + + main { + background-color: white; + display: flex; + flex-direction: column; + padding: 15px; + } + + p { + text-wrap: wrap; + padding: 5px 5px 5px 0; + font-size: 20px; + } + + h2 { + font-size: 25px; + } + + footer { + text-align: center; + } + + footer > p { + font-size: 15px; + } +} \ No newline at end of file From de276149bae4ff71e7159d5f36a720b4f9df6362 Mon Sep 17 00:00:00 2001 From: Nil E Date: Wed, 24 Jan 2024 22:05:42 +0100 Subject: [PATCH 2/2] changed the nav font size --- styles.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 5e2e386..11aa226 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,3 @@ -/* adding desktop design here */ @media (min-width: 1008px) { body { background-color: rgb(209, 197, 187); @@ -16,6 +15,7 @@ ul { display: flex; flex-direction: row; padding-inline-start: 0; + font-size:1.5em; } a.nav-text { @@ -60,7 +60,6 @@ footer > p { } } -/* adding mobile design here */ @media (max-width: 640px) { body { background-color: rgb(209, 197, 187);