YushengLi/jumice.html

## jumice.html
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
	<style type="text/css">
		.item {
			margin: 10px;
			float: left;
		}

		.box1 {
			width: 960px;
			border: 0px;
			margin: auto;
			margin-top: 20px;
			margin-bottom: 20px;
		}


		.item1-1 {
			/* border: 1px solid #FFF; */
			width: 460px;
			height: 300px;
			background: #FF8;
		}

		.item1-2 {
			/* border: 1px solid #FFF; */
			width: 460px;
			height: 300px;
			background: #FF8;
		}

		.box2 {
			width: 960px;
			border: 0px;
			margin: auto;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.item2-1 {
			border: 0px solid #000;
			width: 300px;
			height: 480px;
			background: #FFCCCC;
			float: left;
		}

		.item2-2 {
			border: 0px solid #000;
			width: 300px;
			height: 480px;
			background: #FFCCCC;
			float: left;
		}

		.item2-3 {
			border: 0px solid #000;
			width: 300px;
			height: 480px;
			background: #FFCCCC;
			float: left;
		}

		.clearfix {
			height: 0px;
			background-color: #0f0;
			clear: both;
		}


		#content {
			width: 400px;
			margin: 20px;
		}

		#content1 {
			width: 250px;
			margin: 10px;
		}
	</style>
</head>

<body>

	<div class="box1">
		<div class="item item1-1">
			<img src="https://api.fnkr.net/testimg/460x300/00CED1/FFF/?text=img+placeholder"></div>
		<div class="item item1-2">
			<div id=content>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nobis, tenetur optio sed dolorem reiciendis, nostrum alias corporis aliquid magni, id nihil incidunt quia. Consectetur officia, accusantium sed quia, possimus reprehenderit atque, excepturi
					porro aspernatur numquam nostrum! Provident iste magnam ipsum possimus doloremque, error, dolore vero quaerat aperiam non fuga quasi consequuntur alias corporis unde in ad vel numquam quo velit illum, dolorum! Pariatur iste, porro natus? Esse id
					sint labore eligendi expedita ipsam tempora quos repellat ad maiores atque sed ducimus, </p>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>

	<div class="box2">
		<div class="item item2-1">
			<img src="https://api.fnkr.net/testimg/300x200/00CED1/FFF/?text=img+placeholder">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui obcaecati illum explicabo quas magni veritatis, ab magnam error nesciunt quidem nemo id, cupiditate quasi temporibus ipsam a, adipisci expedita ut.</p>
			</div>
		</div>
		<div class="item item2-2">
			<img src="https://api.fnkr.net/testimg/300x200/00CED1/FFF/?text=img+placeholder">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui obcaecati illum explicabo quas magni veritatis, ab magnam error nesciunt quidem nemo id, cupiditate quasi temporibus ipsam a, adipisci expedita ut.</p>
			</div>
		</div>
		<div class="item item2-3">
			<img src="https://api.fnkr.net/testimg/300x200/00CED1/FFF/?text=img+placeholder">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui obcaecati illum explicabo quas magni veritatis, ab magnam error nesciunt quidem nemo id, cupiditate quasi temporibus ipsam a, adipisci expedita ut.</p>
			</div>
		</div>


		<div class="clearfix"></div>

	</div>

</body>

</html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
	<style type="text/css">
	.item {
	margin: 10px;
	float: left;
	}

	.box1 {
	width: 960px;
	border: 0px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	}


	.item1-1 {
	/* border: 1px solid #FFF; */
	width: 460px;
	height: 300px;
	background: #FF8;
	}

	.item1-2 {
	/* border: 1px solid #FFF; */
	width: 460px;
	height: 300px;
	background: #FF8;
	}

	.box2 {
	width: 960px;
	border: 0px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	}

	.item2-1 {
	border: 0px solid #000;
	width: 300px;
	height: 480px;
	background: #FFCCCC;
	float: left;
	}

	.item2-2 {
	border: 0px solid #000;
	width: 300px;
	height: 480px;
	background: #FFCCCC;
	float: left;
	}

	.item2-3 {
	border: 0px solid #000;
	width: 300px;
	height: 480px;
	background: #FFCCCC;
	float: left;
	}

	.clearfix {
	height: 0px;
	background-color: #0f0;
	clear: both;
	}


	#content {
	width: 400px;
	margin: 20px;
	}

	#content1 {
	width: 250px;
	margin: 10px;
	}
	</style>
	</head>

	<body>

	<div class="box1">
	<div class="item item1-1">
	<img src="https://api.fnkr.net/testimg/460x300/00CED1/FFF/?text=img+placeholder"></div>
	<div class="item item1-2">
	<div id=content>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nobis, tenetur optio sed dolorem reiciendis, nostrum alias corporis aliquid magni, id nihil incidunt quia. Consectetur officia, accusantium sed quia, possimus reprehenderit atque, excepturi
	porro aspernatur numquam nostrum! Provident iste magnam ipsum possimus doloremque, error, dolore vero quaerat aperiam non fuga quasi consequuntur alias corporis unde in ad vel numquam quo velit illum, dolorum! Pariatur iste, porro natus? Esse id
	sint labore eligendi expedita ipsam tempora quos repellat ad maiores atque sed ducimus, </p>
	</div>
	</div>
	<div class="clearfix"></div>
	</div>

	<div class="box2">
	<div class="item item2-1">
	<img src="https://api.fnkr.net/testimg/300x200/00CED1/FFF/?text=img+placeholder">
	<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui obcaecati illum explicabo quas magni veritatis, ab magnam error nesciunt quidem nemo id, cupiditate quasi temporibus ipsam a, adipisci expedita ut.</p>
	</div>
	</div>
	<div class="item item2-2">
	<img src="https://api.fnkr.net/testimg/300x200/00CED1/FFF/?text=img+placeholder">
	<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui obcaecati illum explicabo quas magni veritatis, ab magnam error nesciunt quidem nemo id, cupiditate quasi temporibus ipsam a, adipisci expedita ut.</p>
	</div>
	</div>
	<div class="item item2-3">
	<img src="https://api.fnkr.net/testimg/300x200/00CED1/FFF/?text=img+placeholder">
	<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui obcaecati illum explicabo quas magni veritatis, ab magnam error nesciunt quidem nemo id, cupiditate quasi temporibus ipsam a, adipisci expedita ut.</p>
	</div>
	</div>


	<div class="clearfix"></div>

	</div>

	</body>

	</html>