diff options
| author | AlmightyMiau <almightymeow612@gmail.com> | 2025-02-06 22:31:17 -0800 |
|---|---|---|
| committer | AlmightyMiau <almightymeow612@gmail.com> | 2025-02-06 22:31:17 -0800 |
| commit | dbc730716a9f4ad8adf9a576d117b8978ba59b74 (patch) | |
| tree | ac675254e80e63199028091e77c886fdf100c611 | |
| parent | dbe51793ab920b9eff75f5fe4b5afda6f93fb6f8 (diff) | |
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.
| -rw-r--r-- | index.html | 10 | ||||
| -rw-r--r-- | styles.css | 34 |
2 files changed, 39 insertions, 5 deletions
@@ -8,11 +8,11 @@ <title>Document</title> </head> <body> - <div id="top"> + <div id="top" class="section"> <!--Header--> <div id="header"> <span id="logo">Header Logo</span> - <span> + <span id="links"> <a>header link one</a> <a>header link two</a> <a>header link three</a> @@ -34,7 +34,7 @@ <img> </div> </div> - <div id="info"> + <div id="info" class="section"> <h2> Some random information </h2> @@ -63,7 +63,7 @@ </h6> </div> </div> - <div id="quote"> + <div id="quote" class="section"> <p> 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 </h3> </div> - <div id="bottom"> + <div id="bottom" class="section"> <div id="call-to-action"> <p> <h3> @@ -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; |