wingchan852 / sp23-cse110-lab3

Lab 2 - Starter

My website link: https://wingchan852.github.io/sp23-cse110-lab3/

sp23-cse110-lab3's Issues

[feature] layouts

specifications

flexbox

• apply flex to the display property
• Must have more than two children within the element that is using flexbox. Must use minimum three of the flexbox related attributes

grid

• apply grid to the display property
• Must have more than two children within the element that is using the grid. Must use a minimum of three of the grid related attributes

[feature] Responsive design

specifications

Responsiveness

• At least one query based on the screen width

[feature] Box Model

specifications

Margin

• Long (margin-top, margin-bottom, margin-left, margin-right)
• Short (margin: )
• Auto margins: margin: auto

Padding

• Long (padding-top, padding-bottom, padding-left, padding-right)
• Short (padding: )

Borders

• border-style
• border-color
• border-width
• border-radius

[feature]Styling

specifications

Text

• color
• text-decoration
• text-align

Sizing

• height
• width
• max-width
• min-width

Position

• 2 of the following values: static, relative, fixed, absolute, sticky
• Apply these values to the position property

Display

• Experiment with these values: none, block, inline-block, inline. Include at least two of them in your page.
• Apply these values to the display property

Pseudo-class

• :active
• :hover

Color

• background color

[feature] Fonts

specifications

Fonts

• Include and use a 3rd party font