Flexbox example Quiz about poultry Which of the following birds can swim? Turkey Pheasant Duck Chicken Next body { font-family: Helvetica

Quiz about poultry

Which of the following birds can swim?

◯ Turkey

◯ Pheasant

◯ Duck

◯ Chicken

body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; min-height: 100vh; }

main { background-color: gray; }

p.question { padding: 20px; }

#answers { margin: 10px; }

div.answer {

}

footer { padding: 10px }

p { color: white;}

button { font-size: x-large; border-radius: 10px; } h1 { padding: 20px; text-align: center; }

7. (30 points) Fill in the flexbox parts of the CSS file for this app so that it produces the flexible layout as shown in the three images below. Notice that that the bubbles to the left of the answers are all aligned vertically, and that the spacing between answers varies as the height of the box changes, and that they are always centered as the width of the box changes. Finally, notice that the footer containing the button is always at the bottom of the Web page The HTML appears below the images, and the CSS, with the flexbox commands missing, on the next page Quiz about poultry Which of the following birds can swim? OTurkey Quiz about poultry Quiz about poultry O Pheasant Which of the tolowing birds can swim? Which of the folowing bieds can swim? ODuck O Turkey O Phessart O Duck O Chicken Turkey O Pheasant O Duck O Chicken O Chicken Next Next Next