cheeks/css-exercises
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

02-flex-header: Added a note, letting users know that matching the font isn't desired

Browse Source
This commit is contained in:
Keshav K 2024-01-20 18:11:25 -08:00
parent b57e48a828
commit aba174459a
2 changed files with 3 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
flex/02-flex-header/README.md
View File

@ -15,4 +15,6 @@ wide:
- Logo is centered vertically and horizontally. - Logo is centered vertically and horizontally.
- list-items are horizontal, and are centered vertically inside the header. - 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. - 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.
- Your solution does not use floats, inline-block, or absolute positioning. - Your solution does not use floats, inline-block, or absolute positioning.
- Note: For this exercise, it's completely acceptable to not match the font-family.

8
flex/02-flex-header/solution/solution.css
View File

@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
.header { .header {
font-family: monospace; font-family: monospace;
background: papayawhip; background: papayawhip;
@ -29,8 +27,6 @@ a {
/* SOLUTION */ /* SOLUTION */
.header { .header {
/* Feel free to not worry too heavily on matching the font */
font-family: 'Courier Prime', monospace;
padding: 8px; padding: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -42,8 +38,4 @@ ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
gap: 8px; gap: 8px;
}
a {
font-weight: 400;
} }