From dbc730716a9f4ad8adf9a576d117b8978ba59b74 Mon Sep 17 00:00:00 2001 From: AlmightyMiau Date: Thu, 6 Feb 2025 22:31:17 -0800 Subject: Set up Flex containers and fit header with Flex Added .section class to all 4 sections. Added #links to header links span. Made new area in styles.css for aranging items. --- index.html | 10 +++++----- styles.css | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 90106ff..6296588 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,11 @@ Document -
+
-
+

Some random information

@@ -63,7 +63,7 @@
-
+

This is an inspiring quote, or a testimonial from a customer. Maybe it's just filling up space, or maybe @@ -74,7 +74,7 @@ -Thor, God of Thunder

-
+

diff --git a/styles.css b/styles.css index 8a2db50..521a7d8 100644 --- a/styles.css +++ b/styles.css @@ -4,6 +4,40 @@ margin: 0px; } +/* Arrangement of items */ +.section { + display: flex; + justify-content: center; +} +#top { /* Container for Top section */ + flex-direction: column; + align-items: center; +} +#header { /* Container for Logo and Links */ + width: 75%; + margin-top: 2%; + display: flex; + flex-direction: row; + justify-content: space-between; +} +#logo { + flex: auto; + min-width: 60px; + min-height: 60px; +} +#links { /* Container for the header links */ + display: flex; + justify-content: space-between; + flex-wrap: nowrap; +} +#links a { + padding: 4px 10px; + flex: auto; + min-width: 60px; + min-height: 60px; +} + +/* Style of items */ #top { background-color: #1F2937; color: #F9FAF8; -- cgit v1.2.3