From 857c07d30e6705ef7c9c1dbcffe51f5aef4fefb9 Mon Sep 17 00:00:00 2001 From: felixrueckl Date: Tue, 30 May 2023 15:35:30 +0200 Subject: [PATCH 1/2] Added the changes according to the README.md --- index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 72b560d..24ff571 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,9 @@ + My Personal Web Page +
@@ -16,7 +18,7 @@

Welcome to My Personal Web Page

-

About Me

+

About Me

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor diam vel eros aliquam, vitae consequat tellus lacinia. Donec convallis @@ -24,7 +26,7 @@

About Me

-

Contact Information

+

Contact Information

Email: info@example.com

Phone: 123-456-7890

From d48288d61cabc4756e2974a1ea7c3f145bd40c74 Mon Sep 17 00:00:00 2001 From: felixrueckl Date: Tue, 30 May 2023 15:43:58 +0200 Subject: [PATCH 2/2] Addes the CSS file --- index.html | 2 +- styles.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 24ff571..669d5c2 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + My Personal Web Page diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..bffb508 --- /dev/null +++ b/styles.css @@ -0,0 +1,70 @@ +body { + color: black; + font-size: 16; + font-style: normal; +} + +@media (max-width: 600px) { + * { + text-align: center; + font-size: 4vh; + } +} + +header { + background-color: blue; +} + +@media (max-width: 600px) { + h1 { + font-size: 1.5rem; + } +} + +nav { + background-color: lightblue; +} + +@media (max-width: 600px) { + nav { + font-size: 8vw; + } +} + +main { + border: #a9a9a9; + border-style: solid; + border-width: 1px; +} + +@media (min-width: 601px) { + main { + background-color: bisque; + } +} + +section { + background-color: bisque; +} + +@media (min-width: 601px) { + section { + display: inline-block; + height: 45%; + width: 45%; + text-align: center; + } +} + +footer { + background-color: pink; +} + +@media (max-width: 600px) { + footer { + height: clamp(14px, 1.5vw, 18px); + width: calc(100% / 1.2); + padding-left: 14%; + padding-right: auto; + } +}