Text Styles
Implementing the Content Section
There are two aspect or "styles concerns" at play here: the alignment of the content, and the typography treatment.
๐จโ๐ผ Make the logo,
h1 and paragraph look just like the mobile design in Figma.Layout
๐จ Center the three elements horizontally and give their container a max-width of
md.๐ฆ The max-width container technically only becomes apparent at the
md breakpoint on the design, but adding it here exposes subtle things about centering our text content, so we're adding it early.๐ฐ You probably want to use ๐ Grid or ๐ Flexbox to achieve this centering.
๐ฐ You may still need to center the text-alignment itself with
text-center.Font size and spacing
๐จ Apply the correct font size, weight and spacing to the
h1, based on Figma.๐จ Apply the correct text color and decoration to the link, based on Figma.
Don't worry about the hover state for now. We'll take care of these later in the workshop, in the Interaction section.