From c8c0fe2611e8c6a9e2b3a1359a54cc2171028d4f Mon Sep 17 00:00:00 2001 From: wtfjeron Date: Mon, 9 Mar 2026 16:51:14 -0400 Subject: [PATCH] Refactor HTML structure and add CSS styles --- index.html | 96 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 87 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 2c88fd8..c40d4d0 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,95 @@ - - - Document - - - + /* Task 3: Universal Box Sizing */ + * { + box-sizing: border-box; + } + + /* Base styles for layout elements */ + header, footer, section, aside, main { + padding: 1em; + } + + header, footer { + color: white; + background-color: #1976D2; + flex-grow: 1; + } + + aside { + display: flex; + flex-direction: column; + justify-content: center; + color: #212121; + background-color: #BBDEFB; + flex-grow: 3; + } + + section { + background-color: #FF4081; + color: white; + flex-grow: 1; + margin: 0.5em; + } + main { + background-color: #2196F3; + color: white; + flex-grow: 7; + } + /* Flexbox layout */ + body { + display: flex; + flex-direction: column; + background-color: #FFFFFF; + height: 100vh; + width: 100vw; + margin: 0; + } + + .row { + display: flex; + flex-direction: row; + flex-grow: 8; + } + + .col { + display: flex; + flex-direction: column; + } + + /* Media query for responsiveness */ + @media screen and (max-width: 600px) { + div.row { + flex-direction: column; + } + } + + + + +

Welcome

- + +
Header
+
+ +
Main
+
+ - \ No newline at end of file +