From f91d5fcf0245e4cdfea8c1a12fb099ac4a935dba Mon Sep 17 00:00:00 2001 From: Aykut Kav Date: Tue, 30 May 2023 14:38:16 +0200 Subject: [PATCH] Done ! --- index.html | 14 ++++++---- style.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 87 insertions(+), 5 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 72b560d..bd98a12 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,15 @@ - + - My Personal Web Page + + + + Document +
-

Welcome to My Personal Web Page

+

Welcome to My Personal Web Page

-
+

About Me

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor @@ -23,7 +27,7 @@

About Me

magna leo.

-
+

Contact Information

Email: info@example.com

Phone: 123-456-7890

diff --git a/style.css b/style.css new file mode 100644 index 0000000..5755c78 --- /dev/null +++ b/style.css @@ -0,0 +1,78 @@ +/* Laptop display */ +@media only screen and (max-width: 600px) { + header { + text-align: center; + } +} + +@media only screen and (max-width: 602px) { + body { + background-color: lightgray; + font-size: 0.9rem; + } + + .section--1 { + background-color: white; + } + + header { + text-align: center; + } + + header li { + list-style-type: none; + } + + header li a { + text-decoration: none; + color: black; + } + + main { + display: flex; + flex-direction: column; + } +} + +/* Desktop display */ +@media only screen and (min-width: 602px) { + body { + background-color: lightgray; + /* font-size: 16px; */ + font-size: calc(20px - 4px); + } + + .section--1 { + background-color: white; + } + + .header { + text-align: left; + } + + header li { + list-style-type: none; + } + + header li a { + text-decoration: none; + color: black; + } + + main { + display: flex; + flex-direction: row; + } + + footer { + text-align: center; + } + + nav ul { + display: flex; + flex-direction: row; + } + nav ul li { + margin: 1rem; + } +}