From e7d29f6c031ff37bce02a2bbfa47da0202b78152 Mon Sep 17 00:00:00 2001 From: robopecha Date: Tue, 30 May 2023 13:19:45 +0200 Subject: [PATCH] responsiveness --- index.html | 4 +++- styles.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 72b560d..c74d527 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,8 @@ My Personal Web Page + +
@@ -23,7 +25,7 @@

About Me

magna leo.

-
+

Contact Information

Email: info@example.com

Phone: 123-456-7890

diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..49e0001 --- /dev/null +++ b/styles.css @@ -0,0 +1,60 @@ +@media screen and (max-width: 600px) { + body { + background: red; + } + + header { + background: rgb(252, 34, 212); + } + li a { + color: yellow; + } +} + +@media screen and (min-width: 601px) { + body { + background: yellow; + } + + header { + background: orange; + } +} + +body { + text-align: center; + font-family: Menlo; +} + +h1 { + font-size: 5vw; + padding: 10px; +} + +li { + font-size: 2.5vw; +} + +a { + text-decoration: none; +} + +h2 { + font-size: 3vw; +} + +ul { + list-style: none; + padding-left: 0; + padding-bottom: 20px; +} + +section { + margin: 50px; +} + +header { + width: clamp(200px, 99%, 2000px); + font-size: clamp(24px, 5.2vw, 48px); + margin: 0 auto; +}