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 +