<html> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=d
ID: 3719753 • Letter: #
Question
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Flexbox example</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
<header>
<h1>Quiz about poultry</h1>
</header>
<main>
<p class="question">Which of the following birds can swim?</p>
<div id="answers">
<div class="answer"><p>◯ Turkey</p></div>
<div class="answer"><p>◯ Pheasant</p></div>
<div class="answer"><p>◯ Duck</p></div>
<div class="answer"><p>◯ Chicken</p></div>
</div>
</main>
<footer><button id="nextButton">Next</button></footer>
</body>
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;
}
Explanation / Answer
Please find the CSS below.
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
min-height: 100vh;
}
main {
background-color: gray;
width: 50%;
margin: 0 auto;
}
p.question {
padding: 20px;
text-align: center;
}
#answers {
margin: 10px;
margin-left: 300px;
padding-bottom: 20px;
}
div.answer {
padding-top: 20px;
}
footer {
padding: 10px;
text-align: center;
position:absolute;
bottom:0;
right: 50%;
}
p { color: white;}
button {
font-size: x-large;
border-radius: 10px;
background-color: #CFCECD;
}
h1 {
padding: 20px;
text-align: center;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.