From 7cdcdfa85e521068ee0d5053f91507f9025a2160 Mon Sep 17 00:00:00 2001 From: Andy Cockroft Date: Tue, 30 May 2023 14:45:04 +0200 Subject: [PATCH 1/2] responsive web design exercise --- desktop.css | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 3 +++ styles.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 117 insertions(+) create mode 100644 desktop.css create mode 100644 styles.css diff --git a/desktop.css b/desktop.css new file mode 100644 index 0000000..dc88a90 --- /dev/null +++ b/desktop.css @@ -0,0 +1,59 @@ +@media screen and (min-width: 601px) and (max-width: 1100) { +} + +header { + background-color: fuchsia; + text-align: left; + width: clamp(601px, 50%, 1100px); + font-size: clamp(16px, 5vw, 16px); + margin: auto; + font-family: monospace, sans-serif; +} + +ul { + padding-left: 0%; + padding-bottom: 5%; + margin: 0%; +} + +ul > li { + display: flex; + flex-direction: row; + list-style-type: none; + text-align: left; +} + +main { + display: flex; + flex-direction: row; + align-items: center; + background-color: cadetblue; + width: clamp(601px, 50%, 1100px); + font-size: clamp(14px, 5vw, 14px); + margin: auto; + font-family: monospace, sans-serif; +} + +section:first-child { + text-align: left; + margin: 2% 2% 2% 2%; +} + +section:last-child { + text-align: left; + padding-right: 10%; +} + +footer { + background-color: fuchsia; + text-align: center; + width: clamp(601px, 50%, 1100px); + font-size: clamp(14px, 5vw, 14px); + margin: auto; + font-family: monospace, sans-serif; +} +footer > p { + margin: 0; + padding-top: 2%; + padding-bottom: 2%; +} diff --git a/index.html b/index.html index 72b560d..420f1df 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,9 @@ My Personal Web Page + + +
diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..003e2b7 --- /dev/null +++ b/styles.css @@ -0,0 +1,55 @@ +@media screen and (max-width: 600px) { + header { + background-color: fuchsia; + text-align: center; + width: clamp(320px, 50%, 600px); + font-size: clamp(14px, 5vw, 14px); + margin: auto; + font-family: monospace, sans-serif; + } + + ul { + padding-left: 0%; + padding-bottom: 10%; + margin: 0%; + } + + ul > li { + list-style-type: none; + text-align:center + padding-right: 60%; + padding-left: 0%; + } + + main{ + display:flex; + flex-direction: column; + align-items:center; + background-color: cadetblue; + width: clamp(320px, 50%, 600px); + font-size: clamp(14px, 5vw, 14px); + margin: auto; + font-family: monospace, sans-serif; + } + + section:first-child { + text-align: center; + } + + section:last-child { + text-align: center; + } + + footer { + background-color: fuchsia; + text-align: center; + width: clamp(320px, 50%, 600px); + font-size: clamp(14px, 5vw, 14px); + margin: auto; + font-family: monospace, sans-serif; + } + + footer > p { + margin: 0; + } + } \ No newline at end of file From c0e9041e576c5c2f6ca2d1563cbcb5dd04032e6e Mon Sep 17 00:00:00 2001 From: Andy Cockroft Date: Tue, 30 May 2023 15:42:37 +0200 Subject: [PATCH 2/2] update to contact information --- desktop.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/desktop.css b/desktop.css index dc88a90..c527922 100644 --- a/desktop.css +++ b/desktop.css @@ -35,13 +35,12 @@ main { } section:first-child { - text-align: left; - margin: 2% 2% 2% 2%; + flex: auto; } section:last-child { text-align: left; - padding-right: 10%; + padding-right: 20%; } footer {