From 92a3188891d9697a32656382275393c41efa149c Mon Sep 17 00:00:00 2001 From: alexanderley Date: Tue, 30 May 2023 14:09:57 +0200 Subject: [PATCH 1/2] first commit --- index.html | 1 + style.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 style.css diff --git a/index.html b/index.html index 72b560d..bc1e9b7 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ My Personal Web Page +
diff --git a/style.css b/style.css new file mode 100644 index 0000000..6085c98 --- /dev/null +++ b/style.css @@ -0,0 +1,65 @@ +* { + box-sizing: border-box; + margin: 0; +} + +body { + font-family: sans-serif; + background-color: grey; + margin: 0; + padding: 0; +} + +p { + margin: 0; + padding: 0; +} + +h2 { + padding: 0; + margin: 0; +} + +ul { + display: flex; + padding-left: 0; +} + +li { + list-style: none; + margin-right: 10px; +} + +a { + text-decoration: none; + color: black; +} + +main { + width: 100%; +} + +section { + display: inline-block; + margin-bottom: 0; + background-color: white; + padding: 20px; + width: 100%; +} + +footer { + margin: 20px 0; +} + +@media (min-width: 600px) { + body { + background-color: red; + } + + section { + box-sizing: border-box; + display: inline-block; + /* max-width: 49%; */ + width: 50%; + } +} From 37292069f970d6d03741cb48561c5d610d048f65 Mon Sep 17 00:00:00 2001 From: alexanderley Date: Tue, 30 May 2023 15:30:45 +0200 Subject: [PATCH 2/2] final version --- style.css | 36 +++++++++++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index 6085c98..985a467 100644 --- a/style.css +++ b/style.css @@ -15,6 +15,10 @@ p { padding: 0; } +h1 { + text-align: center; +} + h2 { padding: 0; margin: 0; @@ -22,12 +26,14 @@ h2 { ul { display: flex; + flex-direction: column; padding-left: 0; } li { list-style: none; margin-right: 10px; + text-align: center; } a { @@ -37,29 +43,53 @@ a { main { width: 100%; + font-size: 0; } +header, section { + padding: 20px; +} + +section { + font-size: 16px; display: inline-block; margin-bottom: 0; background-color: white; - padding: 20px; + width: 100%; } footer { + text-align: center; margin: 20px 0; } @media (min-width: 600px) { - body { - background-color: red; + ul { + /* width: 50%; */ + width: 200px; + /* margin: 0 auto; */ + flex-direction: row; + } + + li { + margin: 0 auto; + } + + h1 { + text-align: left; } section { box-sizing: border-box; display: inline-block; + vertical-align: top; /* max-width: 49%; */ width: 50%; } + + footer { + text-align: left; + } }