<!DOCTYPE html>
<html>
<head>
	<title>Recipes - Detail</title>
	<style>

		h1#title{
			font-family: Arial;
			text-align: center;
			font-size: 60px;
		}

		h2{
			font-family:Arial;
			text-align:center;
			font-size:34px;
			margin-top:-20px;
		}

		table{
			width:45%;
			margin-left:auto;
			margin-right:auto;
			margin-bottom:30px;
		}

		table, th, td{
			border: 2px solid black;
			border-collapse: collapse;
			font-family: Arial;
			font-size: 24px;
		}

		th, td{
			padding: 5px;

		}

		tr.r1{
			text-align:center;
			border: 3px solid black;
		}

		tr.r2{
			border: 3px solid black;
		}

	</style>
</head>
<body>
<h1 id='title'>Recipes - Detail <h1>
<h2>(COFFEE CRUMBLE)</h2>

<table>
	<tr class = "r1">
		<th colspan ="2">RECIPE: COFFEE CRUMBLE</th>
	</tr>
	<tr class = "r2">
		<td>plain frozen yogurt</td>
		<td>1</td>
	</tr>
	<tr class = "r2">
		<td>coffee powder</td>
		<td>2</td>
	</tr>	
	<tr class = "r2">
		<td>cashews</td>
		<td>2</td>
	</tr>	
	<tr class = "r2">
		<td>chocolate chips</td>
		<td>2</td>
	</tr>
	<tr class = "r2">
		<td>whipped cream</td>
		<td>1</td>
	</tr>	
</table>


</body>
</html>