HeshamGhoniem2020/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
		<title>Hesham Ghoniem</title>
		<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8"/>
	</head>
	<body>
		<div class="main">
			<article class="article">
				<a href="#"><img src="imgs/laravel-bundles.jpg" alt="Build Your First Admin Bundle for Laravel" /></a>
				<div class="body">
					<ul>
						<li>
							<a href="#">Tutorials</a>
						</li>
						<li>
							<a href="#">PHP</a>
						</li>
					</ul>
					<a href="#"><h1>Build Your First Admin Bundle for Laravel</h1></a>
					<p class="post_info">
						<a href="#">Stephen Radford</a> on Jan 7th 2013 <a href="#">38 Comments</a>
					</p>
					<div class="post_intro">
						<p>
							It's hard to deny the fact that the PHP community is excited for Laravel 4.
							Among other things, the framework leverages the power of Composer, which means it's able to utilize any
							package or script from Packagist.
						</p>
						<p>
							In the meantime, Laravel offers "Bundles", which allow us to modularize code for use in future projects.
							The bundle directory is full of excellent scripts and packages that you can use in your applications.
							In this lesson, I’ll show you how to build one from scratch!
						</p>
					</div>
					<a href="#" class="continue">Continue</a>
				</div>
			</article>
		</div>
	</body>
</html>

## stylesheet.css
body {
	background-color: #F2F2F2;
}
.main {
	width: 660px;
	height: 460px;
	margin: auto;
	border: 1.5px solid white;
	background-color: #FFFFFF;
}
.article {
	width: 600px;
	height: 400px;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	background-color: #FFFFFF;
}

article img {
	width: 200px;
	height: 200px;
	float: left;
	margin-right: 30px;
}

.body {
	float: right;
	width: 370px;
}

article li {
	list-style: none;
	display: inline;
}

article ul {
	padding-left: 0px;
	margin-top: 0px;
}

article li:after {
	content: '\\'; margin : 2px;
	color: #999;
}

article li:last-child:after {
	content: none;
}

article h1 {
	color: black;
	font-size: 34px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	margin: -10px 0px;
}

a {
	text-decoration: none;
}

a h1:hover {
	background-color: #F3F3F3;
}
li a:hover, .continue:hover {
	color: #1F7970;
}

li a, .post_info {
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
}

li a, .continue {
	color: #41a096;
	font-size: 14px;
}

p {
	color: #616161;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 21px;
}

.post_info {
	background-color: #F3F3F3;
	float: left;
}

.post_info a {
	color: #616161;
}

.post_info a:hover {
	color: black;
}

.post_intro {
	clear: both;
}

.continue {
	float: right;
	text-decoration: underline;
}

.continue:before {
	content: '(';
}

.continue:after {
	content: ')';
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title>Hesham Ghoniem</title>
	<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8"/>
	</head>
	<body>
	<div class="main">
	<article class="article">
	<a href="#"><img src="imgs/laravel-bundles.jpg" alt="Build Your First Admin Bundle for Laravel" /></a>
	<div class="body">
	<ul>
	<li>
	<a href="#">Tutorials</a>
	</li>
	<li>
	<a href="#">PHP</a>
	</li>
	</ul>
	<a href="#"><h1>Build Your First Admin Bundle for Laravel</h1></a>
	<p class="post_info">
	<a href="#">Stephen Radford</a> on Jan 7th 2013 <a href="#">38 Comments</a>
	</p>
	<div class="post_intro">
	<p>
	It's hard to deny the fact that the PHP community is excited for Laravel 4.
	Among other things, the framework leverages the power of Composer, which means it's able to utilize any
	package or script from Packagist.
	</p>
	<p>
	In the meantime, Laravel offers "Bundles", which allow us to modularize code for use in future projects.
	The bundle directory is full of excellent scripts and packages that you can use in your applications.
	In this lesson, I’ll show you how to build one from scratch!
	</p>
	</div>
	<a href="#" class="continue">Continue</a>
	</div>
	</article>
	</div>
	</body>
	</html>
	body {
	background-color: #F2F2F2;
	}
	.main {
	width: 660px;
	height: 460px;
	margin: auto;
	border: 1.5px solid white;
	background-color: #FFFFFF;
	}
	.article {
	width: 600px;
	height: 400px;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	background-color: #FFFFFF;
	}

	article img {
	width: 200px;
	height: 200px;
	float: left;
	margin-right: 30px;
	}

	.body {
	float: right;
	width: 370px;
	}

	article li {
	list-style: none;
	display: inline;
	}

	article ul {
	padding-left: 0px;
	margin-top: 0px;
	}

	article li:after {
	content: '\\'; margin : 2px;
	color: #999;
	}

	article li:last-child:after {
	content: none;
	}

	article h1 {
	color: black;
	font-size: 34px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	margin: -10px 0px;
	}

	a {
	text-decoration: none;
	}

	a h1:hover {
	background-color: #F3F3F3;
	}
	li a:hover, .continue:hover {
	color: #1F7970;
	}

	li a, .post_info {
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
	}

	li a, .continue {
	color: #41a096;
	font-size: 14px;
	}

	p {
	color: #616161;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 21px;
	}

	.post_info {
	background-color: #F3F3F3;
	float: left;
	}

	.post_info a {
	color: #616161;
	}

	.post_info a:hover {
	color: black;
	}

	.post_intro {
	clear: both;
	}

	.continue {
	float: right;
	text-decoration: underline;
	}

	.continue:before {
	content: '(';
	}

	.continue:after {
	content: ')';
	}