punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add header exercise

Browse source
This commit is contained in:
Cody Loyd 2021-08-23 10:43:39 -05:00
parent ef38462a4b
commit 338ee4eb23
5 changed files with 71 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
flex/flex-header/README.md Normal file
View file

@ -0,0 +1,17 @@
# A Basic Header
Use flexbox rules to create this very common webpage header style. The benefit to using flex here is that everything should be _flexible_. Check out the two screenshots below to get an idea for how it should scale with your screen. Besides flex rules, you'll also want to add some rules for margin and padding. (hint: `ul`s have some default margin/padding that you will need to deal with)
## Desired Outcome
narrow:
![narrow](./desired-outcome-narrow.png)
wide:
![wide](./desired-outcome-wide.png)
### Self Check
- There is space between all items and the edge of the header (specific px amount doesn't matter here)
- Logo is centered vertically and horizontally.
- list-items are horizontal, and are centered vertically inside the header
- left-links and right-links are pushed all the way to the left and right, and stay at the edge of the header when the page is resized.
- This exercise does not use floats, inline-block, or absolute positioning.

BIN
flex/flex-header/desired-outcome-narrow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
flex/flex-header/desired-outcome-wide.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

29
flex/flex-header/index.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Header</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="left-links">
<ul>
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
</ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
<ul>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
<li><a href="#">SIX</a></li>
</ul>
</div>
</div>
</body>
</html>

25
flex/flex-header/style.css Normal file
View file

@ -0,0 +1,25 @@
.header {
font-family: monospace;
background: papayawhip;
}
.logo {
font-size: 48px;
font-weight: 900;
color: tomato;
background: white;
padding: 4px 32px;
}
ul {
/* this removes the dots on the list items*/
list-style-type: none;
}
a {
font-size: 22px;
background: white;
padding: 8px;
/* this removes the line under the links */
text-decoration: none;
}