mzibari/CSS file

## CSS file
*{
    text-align: center;
    font-family: 'Anton', sans-serif;
    font-size: 30px;
}

body{
    /*background-image: url("https://cdn.stocksnap.io/img-thumbs/960w/ANC5ACJ7V0.jpg");*/
    background-repeat: repeat;
}
h1{
    font-size: 38px;
}

.main-div{

    padding: 5%;
}
.button{
    border-radius: 5px;
    padding-left: 12px;
    padding-right: 12px;
}


.opaque-background{
    background: rgba(44, 37, 37, 0.7);
    color: rgb(228, 228, 228);
    border-radius: 6px;
    margin-left: 10%;
    margin-right: 10%;
}

.progress{
    margin-bottom: 10px;
}

.result{
    font-size: 20px;
    color: rgb(153, 153, 153);
}

.hide, .tablet, .desktop{
    display: none;
}

.questions{
    border: none;
}

.questions *{
    display: flex;
    margin-top: 10px;

}


@media screen and (min-width: 480px){
    .mobile{
        display: none;
    }

    .tablet{
        display: flex;
        justify-content: center;
    }
}


@media screen and (min-width: 768px){
    .tablet{
        display: none;
    }

    .desktop{
        display: flex;
        justify-content: center;
    }
}

## HTML answer-page
<!DOCTYPE html>
<html lang="en">

<head>
    <title>10 Trick Questions</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="HTML, CSS Quiz">
    <link href="index.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="#">
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>


<body>
    <header>
        <h1 class="opaque-background">10 Trick Questions</h1>
    </header>
    <div class="progress opaque-background">
        <div class="mobile result">Q: 1/10 S: 0/10</div>
        <div class="tablet result">Question: 1/10 Score: 0/10</div>
        <div class="desktop result">Question: 1/10 Score: 0 correct, 0 incorrect</div>
    </div>
    <main>
        <div class="opaque-background main-div">
            <section>
                <div class="answer">
                    <span class="explination">You're answer was incorrect.</span>
                    <p>Explination: A man is only born once, therefore only have one birthday, correct answer is 1</p>
                    <form action="result-page.html" method="get">
                        <button type="submit" class="button next">Next</button>
                    </form>
                </div>
            </section>
        </div>
    </main>
</body>

</html>

## HTML index
<!DOCTYPE html>
<html lang="en">

<head>
    <title>10 Trick Questions</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="HTML, CSS Quiz">
    <link href="index.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="#">
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>


<body>
    <header>
        <h1 class="opaque-background">10 Trick Questions</h1>
    </header>
    <div class="progress opaque-background hide">
        <div class="mobile result">Q: 1/10 S: 0/10</div>
        <div class="tablet result">Question: 1/10 Score: 0/10</div>
        <div class="desktop result">Question: 1/10 Score: 0 correct, 0 incorrect</div>
    </div>
    <main>
        <div class="opaque-background main-div">
            <section>
                <p>Do you think you have what it takes to answer all questions correctly?</p>
                <form action="questions-page.html" method="get">
                <button type="submit" formaction="questions-page.html" class="button start">Start</button>
                </form>
            </section>
        </div>
    </main>
</body>

</html>

## HTML questions-page
<!DOCTYPE html>
<html lang="en">

<head>
    <title>10 Trick Questions</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="HTML, CSS Quiz">
    <link href="index.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="#">
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>


<body>
    <header>
        <h1 class="opaque-background">10 Trick Questions</h1>
    </header>
    <div class="progress opaque-background">
        <div class="mobile result">Q: 1/10 S: 0/10</div>
        <div class="tablet result">Question: 1/10 Score: 0/10</div>
        <div class="desktop result">Question: 1/10 Score: 0 correct, 0 incorrect</div>
    </div>
    <main>
        <div class="opaque-background main-div">
            <section>
                <form action="answer-page.html" method="get">
                    <p class="question">How many birthdays does the average man have?</p>
                    <fieldset class="questions">
                        <legend class="choices"></legend>
                        <label for="ans-1"><input type="radio" name="options" id="ans-1" value="Answer 1">25</label>
                        <label for="ans-2"><input type="radio" name="options" id="ans-2" value="Answer 2">40</label>
                        <label for="ans-3"><input type="radio" name="options" id="ans-3" value="Answer 3">60</label>
                        <label for="ans-4"><input type="radio" name="options" id="ans-4" value="Answer 4">1</label>
                        <button type="submit" class="button check">Check</button>
                    </fieldset>
                </form>
            </section>
        </div>
    </main>
</body>

</html>

## HTML result-page
<!DOCTYPE html>
<html lang="en">

<head>
    <title>10 Trick Questions</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="HTML, CSS Quiz">
    <link href="index.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="#">
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>


<body>
    <header>
        <h1 class="opaque-background">10 Trick Questions</h1>
    </header>
    <main>
        <div class="opaque-background main-div">
            <section>
                <div class="results">
                    <p class=" result-score">You answered 90% of the questions correctly</p>
                    <form action="index.html" method="get">
                        <button type="submit" class="button retake">Retake Quiz</button>
                    </form>
                </div>
            </section>
        </div>
    </main>
</body>

</html>

## Questions
1. How many birthdays does the average man have?
	A. 25
	B. 40
	C. 60
	D. 1
Explination: a man is only born once, therefore only have one birthday. Answer is D

2. Some months have 31 days, how many have 28 days?
	A. 1
	B. 0
	C. 6
	D. 12
Explination: Every month has at least 28 days. Answer is D

3. If there are 3 apples and you take 2, how many do you have?
	A. 3
	B. 2
	C. 0
	D. 1
Explination: You only took 2. Answer is B

4. A doctor gives you 3 pills telling you to take 1 every half an hour, how long will the pills last?
	A. 30 minutes
	B. 60 minutes
	C. 90 minutes
	D. 0 minutes
Explination: You start by taking one right away, then take the second one after 30 minutes, then the last one after another 30 minutes. Answer is B

5. A farmer has 17 sheep, all but nine died, how many are left?
	A. 8
	B. 0
	C. 17
	D. 9
Explination: All but nine died, meaning 9 have not died. Answer is D

6. You're participating in a race, you overtook the second person, what position are you in?
	A. 1st
	B. 3rd
	C. 2nd
	D. 4th
Explination: The second person is in the 2nd place, you pass them and your position becomes 2nd. Answer is C

7. How many 2 cent stamps are in a dozen?
	A. 24
	B. 6
	C. 12
	D. 0
Explination: A dozen is 12. Answer is C

8. Mary's father has 5 daughters, Nana, Nene, Nini, Nono. What's the name of the 5th daughter?
	A. Nunu
	B. Nina
	C. Mary
	D. Alice
Explination: It's MARY's father. Answwer is C

9. How many animals of each sex did Moses take on the ark?
	A. 1
	B. 0
	C. 2
	D. None of the above
Explination: Moses didn't take any animals on the ark, Noah did. Answer is B

10. If a train is traveling south, which way is the smoke going?
	A. South
	B. North
	C. East
	D. The direction the wind is blowing
Explination: It doesn't matter which direction the train is heading, The wind will determine that. Answer is D
	*{
	text-align: center;
	font-family: 'Anton', sans-serif;
	font-size: 30px;
	}

	body{
	/background-image: url("https://cdn.stocksnap.io/img-thumbs/960w/ANC5ACJ7V0.jpg");/
	background-repeat: repeat;
	}
	h1{
	font-size: 38px;
	}

	.main-div{

	padding: 5%;
	}
	.button{
	border-radius: 5px;
	padding-left: 12px;
	padding-right: 12px;
	}


	.opaque-background{
	background: rgba(44, 37, 37, 0.7);
	color: rgb(228, 228, 228);
	border-radius: 6px;
	margin-left: 10%;
	margin-right: 10%;
	}

	.progress{
	margin-bottom: 10px;
	}

	.result{
	font-size: 20px;
	color: rgb(153, 153, 153);
	}

	.hide, .tablet, .desktop{
	display: none;
	}

	.questions{
	border: none;
	}

	.questions *{
	display: flex;
	margin-top: 10px;

	}


	@media screen and (min-width: 480px){
	.mobile{
	display: none;
	}

	.tablet{
	display: flex;
	justify-content: center;
	}
	}


	@media screen and (min-width: 768px){
	.tablet{
	display: none;
	}

	.desktop{
	display: flex;
	justify-content: center;
	}
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>10 Trick Questions</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="description" content="HTML, CSS Quiz">
	<link href="index.css" rel="stylesheet" type="text/css">
	<link rel="shortcut icon" href="#">
	<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
	</head>


	<body>
	<header>
	<h1 class="opaque-background">10 Trick Questions</h1>
	</header>
	<div class="progress opaque-background">
	<div class="mobile result">Q: 1/10 S: 0/10</div>
	<div class="tablet result">Question: 1/10 Score: 0/10</div>
	<div class="desktop result">Question: 1/10 Score: 0 correct, 0 incorrect</div>
	</div>
	<main>
	<div class="opaque-background main-div">
	<section>
	<div class="answer">
	<span class="explination">You're answer was incorrect.</span>
	<p>Explination: A man is only born once, therefore only have one birthday, correct answer is 1</p>
	<form action="result-page.html" method="get">
	<button type="submit" class="button next">Next</button>
	</form>
	</div>
	</section>
	</div>
	</main>
	</body>

	</html>
	1. How many birthdays does the average man have?
	A. 25
	B. 40
	C. 60
	D. 1
	Explination: a man is only born once, therefore only have one birthday. Answer is D

	2. Some months have 31 days, how many have 28 days?
	A. 1
	B. 0
	C. 6
	D. 12
	Explination: Every month has at least 28 days. Answer is D

	3. If there are 3 apples and you take 2, how many do you have?
	A. 3
	B. 2
	C. 0
	D. 1
	Explination: You only took 2. Answer is B

	4. A doctor gives you 3 pills telling you to take 1 every half an hour, how long will the pills last?
	A. 30 minutes
	B. 60 minutes
	C. 90 minutes
	D. 0 minutes
	Explination: You start by taking one right away, then take the second one after 30 minutes, then the last one after another 30 minutes. Answer is B

	5. A farmer has 17 sheep, all but nine died, how many are left?
	A. 8
	B. 0
	C. 17
	D. 9
	Explination: All but nine died, meaning 9 have not died. Answer is D

	6. You're participating in a race, you overtook the second person, what position are you in?
	A. 1st
	B. 3rd
	C. 2nd
	D. 4th
	Explination: The second person is in the 2nd place, you pass them and your position becomes 2nd. Answer is C

	7. How many 2 cent stamps are in a dozen?
	A. 24
	B. 6
	C. 12
	D. 0
	Explination: A dozen is 12. Answer is C

	8. Mary's father has 5 daughters, Nana, Nene, Nini, Nono. What's the name of the 5th daughter?
	A. Nunu
	B. Nina
	C. Mary
	D. Alice
	Explination: It's MARY's father. Answwer is C

	9. How many animals of each sex did Moses take on the ark?
	A. 1
	B. 0
	C. 2
	D. None of the above
	Explination: Moses didn't take any animals on the ark, Noah did. Answer is B

	10. If a train is traveling south, which way is the smoke going?
	A. South
	B. North
	C. East
	D. The direction the wind is blowing
	Explination: It doesn't matter which direction the train is heading, The wind will determine that. Answer is D