Inspiration

Promote the use of masks during COVID-19 pandemic. The varying efficacy of different types of masks. Keeping the public informed on how they can protect themselves

What it does

Provides the different levels of protection of four types of face masks. Show reference images of each type of face mask.

How we built it

Used CSS grid to format the webpage and


and 's to separate grids. Employed CSS classes and IDs to format the text and color of the page.

Challenges we ran into

Wanted to position images and text side by side symmetrically despite length of text and size of image while being able to center titles above images and text. Tried flexbox however grid was more efficient.

Accomplishments that we're proud of

Proud of use of whitespace and grid to attain symmetry in webpage as well as navy color theme.

Built With

Share this project:

Updates