Fluid Layout Foundations

Steps

2/11 done
1.

The hero band at the top of the page still has no artwork sitting behind it.

Head into layout.css and drop the address below onto the .band class as a cover-sized backdrop image:

https://cdn.glassfern.dev/tracks/layout-2/unit-3/gullwood/img/counter.png
2.

The links running across the top of the page sit far too close together.

Give the nav list items 0.6rem of padding above and below, and 1.4rem on the left and right.

3.

The bean drawing under the hero band is scaled far too large.

Press Shift + Ctrl + M to switch tab-focus on or off. Press fn + F2 for the full shortcut list. To have any highlighted line explained for you, press Cmd + Shift + J

48.tiles,
49.visit {
50 margin: 3em auto;
51 }
52
53.detail {
54 display: flex;
55 align-items: flex-start;
56 padding: 0 1.5rem;
57 }
58
59.detail img {
60 width: 12%;
61 height: 12%;
62
63 }
64
65.badge {
66 background-color: Tomato;
67 height: 18rem;
68 padding: 0 1.5rem;
69 color: white;
70 display: flex;
http://localhost:4173/
Warm daylight in a small coffee bar, photo by Jeff Sheldon on StockSnap, CC0 1.0
Gullwood Coffee

Patience is most of what goes into the cup.

We buy straight from growers whose farms we have walked, then take our time over the roast. Every batch is cupped twice before it reaches the counter, which is why a bag tastes the same in March as it does in November.

Gullwood Coffee is a certified fair-weight roaster, and every