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; + } +}