HeshamGhoniem2020/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<title>92 Pixels by Hesham Ghoniem</title>
		<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
	</head>
	<body>
		<!-- Header start-->
		<header>
			<!-- Logo image start-->
			<a href="#"><img src="imgs/logo.png" alt="92 Pixels" class="header" /></a>
			<!-- Logo image end-->

			<!-- Social networks start -->
			<ul>
				<li>
					<img src="imgs/twitter.png" alt="Twitter" /><a href="#"><span>Twitter</span></a>
				</li>
				<li>
					<img src="imgs/rss.png" alt="RSS" /><a href="#"><span>RSS</span></a>
				</li>
				<li>
					<img src="imgs/facebook.png" alt="FaceBook" /><a href="#"><span>FaceBook</span></a>
				</li>
			</ul>
			<!-- Social networks end -->
		</header>
		<!-- Header end-->

		<!-- sidebar start-->
		<aside>
			<div>
				<p class="big_side">
					Hi!
					<br />
					I am a Designer
				</p>
				<p class="small_side">
					You can add your own content here
				</p>
			</div>
		</aside>
		<!-- sidebar end -->

		<!-- Navbar start -->
		<nav>
			<table>
				<tr>
					<td><a href="#">
					<div>
						<span>HOME</span>
					</div></a></td>
					<td><a href="#">
					<div>
						<span>PORTFOLIO</span>
					</div></a></td>
					<td><a href="#">
					<div>
						<span>ABOUT</span>
					</div></a></td>
					<td><a href="#">
					<div>
						<span>SERVICES</span>
					</div></a></td>
					<td><a href="#">
					<div>
						<span>CONTACT</span>
					</div></a></td>
				</tr>
			</table>
		</nav>

		<!-- Navbar end -->

		<!-- about & works start -->
		<div class="about_work">

			<!-- About start -->
			<!-- About image start -->
			<div class="about_img">
				<img src="imgs/about.png" />
			</div>
			<!-- About image end -->
			<!-- About content start -->
			<div class="about_content">
				<!-- About word & underline start -->
				<div class="about_word">
					<p>
						About
					</p>
					<hr />
				</div>
				<!-- About word & underline end -->
				<!-- about paragraph start -->
				<div class="about_paragraph">
					<p>
						Back in the day, we never had any new-fangled television or stuff like that to help us get to school;
						we had to walk 30 miles, with our legs tied together -- if we were lucky.
					</p>
					<p>
						I mean, we are a web design studio. Yeah. Back in the day, we never had any new-fangled television
						or stuff like that to help us get to school; we had to walk 30 miles, with our legs tied together
						-- if we were lucky.
					</p>
				</div>
				<!-- about paragraph end -->
			</div>
			<!-- About content end -->
			<!-- About end-->

			<!-- Wroks start -->
			<!-- Works word & underline -->
			<div class="work_word">
				<p>
					Recent Work
				</p>
				<hr />
			</div>
			<!-- Works images -->
			<div class="work_imgs">
				<div>
					<a href="#"><img src="imgs/work-1.png" alt="My works" /></a>
				</div>
				<div>
					<a href="#"><img src="imgs/work-2.png" alt="My works" /></a>
				</div>
				<div>
					<a href="#"><img src="imgs/work-3.png" alt="My works" /></a>
				</div>
				<div>
					<a href="#"><img src="imgs/work-4.png" alt="My works" /></a>
				</div>
				<div>
					<a href="#"><img src="imgs/work-4.png" alt="My works" /></a>
				</div>
				<div>
					<a href="#"><img src="imgs/work-3.png" alt="My works" /></a>
				</div>
				<div>
					<a href="#"><img src="imgs/work-2.png" alt="My works" /></a>
				</div>
				<div>
					<a href="#"><img src="imgs/work-1.png" alt="My works" /></a>
				</div>
			</div>
			<!-- Wroks end -->

			<!-- about & works end -->

		</div>
		<!-- about & works end -->

		<!-- Footer Start -->
		<footer>
			<div class="footer">
				<div>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies lacinia velit,
					eu laoreet velit iaculis accum san. Sed vel arcu mauris. Aenean lobortis laoreet odio,
					et commodo magna placerat vel.
				</div>
				<div>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies lacinia velit,
					eu laoreet velit iaculis accum san. Sed vel arcu mauris. Aenean lobortis laoreet odio,
					et commodo magna placerat vel.
				</div>
			</div>
		</footer>
		<!-- Footer end-->
	</body>
</html>

## introduction
hello
this is my frist psd to HTML&CSS conversion


 psd site
http://www.92pixels.com/psd-of-the-day-simple-website-template/

print screen of psd :
http://s14.postimg.org/7navpfm4x/Simple_Website_Template.jpg

preview :
http://heshamghoniem.eb2a.com/


i hope you review my code & give me your comments to improve my self

## stylesheet.css
/* General site background */
body {
	background: url(../imgs/background.jpg);
	height: 1200px;
}

/* Header styling start */

/* Logo image */
.header {
	height: 47px;
	width: 140px;float;left: ;
	margin: 37px 0px -40px 200px;
}

/* Social networks list item general style */
header li {
	list-style: none;
	display: inline-block;
	font-size: 12px;
	font-family: Arial;
	width: 82px;
}
/* Social networks  unordered list */
header ul {
	float: right;
	margin: 80px 200px 10px;
}
/* Social networks images */
header img {
	height: 25px;
	width: 25px;
}
/*Social networks non-clicked links */
header li a {
	color: #9C9C9C;
	text-decoration: none;
	position: relative;
	top: -8px;
	left: 4px
}
/*Social networks hoverd links */
header li a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #F2F2F2;
}
/* Header styling end */

/* Sidebar styling start */

/* sidebar background */
aside {
	background: url(../imgs/slide.png) no-repeat;
	width: 940px;
	height: 349px;
	margin: auto;
}
/* sidebar text general info */
aside div {
	color: #FEFEFE;
	font-family: Myriad Pro;
	width: 400px;
	position: relative;
	top: 80px;
	right: 58px;
	left: 500px;
}
/* the big paragraph of sidebar */
aside .big_side {
	font-size: 60.1px;
}
/* the small paragraph of sidebar */
aside .small_side {
	font-size: 26px;
	position: relative;
	top: -65px;
}
/* Sidebar styling end */

/* Navbar start */
/* Navbar styling & adjustment */
nav {
	height: 50px;
	width: 940px;
	border: 1px solid #00429B;
	background-color: #006DCA;
	position: absolute;
	left: 205px;
}
/* Navbar tabe column width */
nav td {
	width: 150px;
}
/* tabe column text position adjustment */
nav span {
	position: relative;
	top: 18px;
}
/* tabe column styling */
nav div {
	width: 150px;
	height: 50px;
	text-align: center;
	border-right: 1px solid #005BA9;
	position: relative;
	bottom: 4px;
}
/* tabe column links styling */
nav a {
	color: #FFFFFF;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	font-family: Arial;
}
/* Navbar end */

/* about & works start */

/* background of about & works */
.about_work {
	width: 940px;
	height: 585px;
	background-color: #FFFFFF;
	margin: auto;
	margin-top: 10px;
}

/* About start */
/* about image border styling */
.about_img {
	width: 178px;
	height: 115px;
	background-color: #ECECEC;
	border: 1px solid #757575;
	float: left;
	position: relative;
	top: 62px;
	left: 40px;
}
/* about image position adjustment*/
.about_img img {
	position: relative;
	left: 10px;
}
/* about content styling */
.about_content {
	width: 680px;
	color: #999999;
	line-height: 19px;
	float: right;
	margin-right: 32px;
	position: relative;
	top: 39px;
}
/* About word styling */
.about_word {
	font-size: 20px;
	font-family: Myriad Pro;
	margin-top: 0px;
	color: #393937;
}
/* About Underline styling */
.about_content hr {
	width: 50px;
	color: #D6D6D6;
	background-color: #D6D6D6;
	position: relative;
	right: 312px;
	bottom: 17px;
}
/* About paragraph styling */
.about_paragraph {
	font-size: 12px;
	font-family: Tahoma;
	position: relative;
	bottom: 12px;
}
/* About 2 paragraphs margin adjustment */
.about_paragraph p {
	margin-top: 0px;
	margin-bottom: 0px;
}
/* About end */

/* Works start */
/* works word styling */
.work_word {
	width: 110px;
	color: #464644;
	position: relative;
	top: 76px;
	left: 40px;
	font-size: 20px;
	font-family: Myriad Pro;
}
/* works underline styling */
.work_word hr {
	margin-top: -20px;
	color: #D6D6D6;
	background-color: #D6D6D6;
}
/* works images overall border */
.work_imgs {
	width: 860px;
	margin: auto;
	position: relative;
	top: 90px;
}
/* work images adjustment */
.work_imgs div {
	width: 177px;
	display: inline-block;
	margin-right: 35px;
	margin-bottom: 30px;
}

/* Wroks end */

/* Footer start */
footer {
	width: 940px;
	height: 100px;
	border: 1px solid #303030;
	background-color: #303030;
	margin: auto;
	border-radius: 5px;
}
.footer {
	margin-top: 25px;
	margin-left: 40px;
	height: 50px;
}
.footer div {
	font-size: 12px;
	font-family: Arial;
	color: #898989;
	display: inline-block;
	width: 390px;
}

.footer div:last-child {
	margin-left: 90px;
}

/* Footer end */
	<!DOCTYPE html>
	<html>
	<head>
	<title>92 Pixels by Hesham Ghoniem</title>
	<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
	</head>
	<body>
	<!-- Header start-->
	<header>
	<!-- Logo image start-->
	<a href="#"><img src="imgs/logo.png" alt="92 Pixels" class="header" /></a>
	<!-- Logo image end-->

	<!-- Social networks start -->
	<ul>
	<li>
	<img src="imgs/twitter.png" alt="Twitter" /><a href="#"><span>Twitter</span></a>
	</li>
	<li>
	<img src="imgs/rss.png" alt="RSS" /><a href="#"><span>RSS</span></a>
	</li>
	<li>
	<img src="imgs/facebook.png" alt="FaceBook" /><a href="#"><span>FaceBook</span></a>
	</li>
	</ul>
	<!-- Social networks end -->
	</header>
	<!-- Header end-->

	<!-- sidebar start-->
	<aside>
	<div>
	<p class="big_side">
	Hi!
	<br />
	I am a Designer
	</p>
	<p class="small_side">
	You can add your own content here
	</p>
	</div>
	</aside>
	<!-- sidebar end -->

	<!-- Navbar start -->
	<nav>
	<table>
	<tr>
	<td><a href="#">
	<div>
	<span>HOME</span>
	</div></a></td>
	<td><a href="#">
	<div>
	<span>PORTFOLIO</span>
	</div></a></td>
	<td><a href="#">
	<div>
	<span>ABOUT</span>
	</div></a></td>
	<td><a href="#">
	<div>
	<span>SERVICES</span>
	</div></a></td>
	<td><a href="#">
	<div>
	<span>CONTACT</span>
	</div></a></td>
	</tr>
	</table>
	</nav>

	<!-- Navbar end -->

	<!-- about & works start -->
	<div class="about_work">

	<!-- About start -->
	<!-- About image start -->
	<div class="about_img">
	<img src="imgs/about.png" />
	</div>
	<!-- About image end -->
	<!-- About content start -->
	<div class="about_content">
	<!-- About word & underline start -->
	<div class="about_word">
	<p>
	About
	</p>
	<hr />
	</div>
	<!-- About word & underline end -->
	<!-- about paragraph start -->
	<div class="about_paragraph">
	<p>
	Back in the day, we never had any new-fangled television or stuff like that to help us get to school;
	we had to walk 30 miles, with our legs tied together -- if we were lucky.
	</p>
	<p>
	I mean, we are a web design studio. Yeah. Back in the day, we never had any new-fangled television
	or stuff like that to help us get to school; we had to walk 30 miles, with our legs tied together
	-- if we were lucky.
	</p>
	</div>
	<!-- about paragraph end -->
	</div>
	<!-- About content end -->
	<!-- About end-->

	<!-- Wroks start -->
	<!-- Works word & underline -->
	<div class="work_word">
	<p>
	Recent Work
	</p>
	<hr />
	</div>
	<!-- Works images -->
	<div class="work_imgs">
	<div>
	<a href="#"><img src="imgs/work-1.png" alt="My works" /></a>
	</div>
	<div>
	<a href="#"><img src="imgs/work-2.png" alt="My works" /></a>
	</div>
	<div>
	<a href="#"><img src="imgs/work-3.png" alt="My works" /></a>
	</div>
	<div>
	<a href="#"><img src="imgs/work-4.png" alt="My works" /></a>
	</div>
	<div>
	<a href="#"><img src="imgs/work-4.png" alt="My works" /></a>
	</div>
	<div>
	<a href="#"><img src="imgs/work-3.png" alt="My works" /></a>
	</div>
	<div>
	<a href="#"><img src="imgs/work-2.png" alt="My works" /></a>
	</div>
	<div>
	<a href="#"><img src="imgs/work-1.png" alt="My works" /></a>
	</div>
	</div>
	<!-- Wroks end -->

	<!-- about & works end -->

	</div>
	<!-- about & works end -->

	<!-- Footer Start -->
	<footer>
	<div class="footer">
	<div>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies lacinia velit,
	eu laoreet velit iaculis accum san. Sed vel arcu mauris. Aenean lobortis laoreet odio,
	et commodo magna placerat vel.
	</div>
	<div>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies lacinia velit,
	eu laoreet velit iaculis accum san. Sed vel arcu mauris. Aenean lobortis laoreet odio,
	et commodo magna placerat vel.
	</div>
	</div>
	</footer>
	<!-- Footer end-->
	</body>
	</html>
	hello
	this is my frist psd to HTML&CSS conversion


	psd site
	http://www.92pixels.com/psd-of-the-day-simple-website-template/

	print screen of psd :
	http://s14.postimg.org/7navpfm4x/Simple_Website_Template.jpg

	preview :
	http://heshamghoniem.eb2a.com/


	i hope you review my code & give me your comments to improve my self
	/* General site background */
	body {
	background: url(../imgs/background.jpg);
	height: 1200px;
	}

	/* Header styling start */

	/* Logo image */
	.header {
	height: 47px;
	width: 140px;float;left: ;
	margin: 37px 0px -40px 200px;
	}

	/* Social networks list item general style */
	header li {
	list-style: none;
	display: inline-block;
	font-size: 12px;
	font-family: Arial;
	width: 82px;
	}
	/* Social networks unordered list */
	header ul {
	float: right;
	margin: 80px 200px 10px;
	}
	/* Social networks images */
	header img {
	height: 25px;
	width: 25px;
	}
	/Social networks non-clicked links /
	header li a {
	color: #9C9C9C;
	text-decoration: none;
	position: relative;
	top: -8px;
	left: 4px
	}
	/Social networks hoverd links /
	header li a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #F2F2F2;
	}
	/* Header styling end */

	/* Sidebar styling start */

	/* sidebar background */
	aside {
	background: url(../imgs/slide.png) no-repeat;
	width: 940px;
	height: 349px;
	margin: auto;
	}
	/* sidebar text general info */
	aside div {
	color: #FEFEFE;
	font-family: Myriad Pro;
	width: 400px;
	position: relative;
	top: 80px;
	right: 58px;
	left: 500px;
	}
	/* the big paragraph of sidebar */
	aside .big_side {
	font-size: 60.1px;
	}
	/* the small paragraph of sidebar */
	aside .small_side {
	font-size: 26px;
	position: relative;
	top: -65px;
	}
	/* Sidebar styling end */

	/* Navbar start */
	/* Navbar styling & adjustment */
	nav {
	height: 50px;
	width: 940px;
	border: 1px solid #00429B;
	background-color: #006DCA;
	position: absolute;
	left: 205px;
	}
	/* Navbar tabe column width */
	nav td {
	width: 150px;
	}
	/* tabe column text position adjustment */
	nav span {
	position: relative;
	top: 18px;
	}
	/* tabe column styling */
	nav div {
	width: 150px;
	height: 50px;
	text-align: center;
	border-right: 1px solid #005BA9;
	position: relative;
	bottom: 4px;
	}
	/* tabe column links styling */
	nav a {
	color: #FFFFFF;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	font-family: Arial;
	}
	/* Navbar end */

	/* about & works start */

	/* background of about & works */
	.about_work {
	width: 940px;
	height: 585px;
	background-color: #FFFFFF;
	margin: auto;
	margin-top: 10px;
	}

	/* About start */
	/* about image border styling */
	.about_img {
	width: 178px;
	height: 115px;
	background-color: #ECECEC;
	border: 1px solid #757575;
	float: left;
	position: relative;
	top: 62px;
	left: 40px;
	}
	/* about image position adjustment*/
	.about_img img {
	position: relative;
	left: 10px;
	}
	/* about content styling */
	.about_content {
	width: 680px;
	color: #999999;
	line-height: 19px;
	float: right;
	margin-right: 32px;
	position: relative;
	top: 39px;
	}
	/* About word styling */
	.about_word {
	font-size: 20px;
	font-family: Myriad Pro;
	margin-top: 0px;
	color: #393937;
	}
	/* About Underline styling */
	.about_content hr {
	width: 50px;
	color: #D6D6D6;
	background-color: #D6D6D6;
	position: relative;
	right: 312px;
	bottom: 17px;
	}
	/* About paragraph styling */
	.about_paragraph {
	font-size: 12px;
	font-family: Tahoma;
	position: relative;
	bottom: 12px;
	}
	/* About 2 paragraphs margin adjustment */
	.about_paragraph p {
	margin-top: 0px;
	margin-bottom: 0px;
	}
	/* About end */

	/* Works start */
	/* works word styling */
	.work_word {
	width: 110px;
	color: #464644;
	position: relative;
	top: 76px;
	left: 40px;
	font-size: 20px;
	font-family: Myriad Pro;
	}
	/* works underline styling */
	.work_word hr {
	margin-top: -20px;
	color: #D6D6D6;
	background-color: #D6D6D6;
	}
	/* works images overall border */
	.work_imgs {
	width: 860px;
	margin: auto;
	position: relative;
	top: 90px;
	}
	/* work images adjustment */
	.work_imgs div {
	width: 177px;
	display: inline-block;
	margin-right: 35px;
	margin-bottom: 30px;
	}

	/* Wroks end */

	/* Footer start */
	footer {
	width: 940px;
	height: 100px;
	border: 1px solid #303030;
	background-color: #303030;
	margin: auto;
	border-radius: 5px;
	}
	.footer {
	margin-top: 25px;
	margin-left: 40px;
	height: 50px;
	}
	.footer div {
	font-size: 12px;
	font-family: Arial;
	color: #898989;
	display: inline-block;
	width: 390px;
	}

	.footer div:last-child {
	margin-left: 90px;
	}

	/* Footer end */