Services

by Saeed Fazlollahzadeh

HTML

<!DOCTYPE html>
<html dir="rtl">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<meta name="author" content="Saeed Fazlollahzadeh">
		<meta name="keywords" content="ویبولتین,تیم ویبولتینی ها, انجمن ویبولتین">
		<link rel="stylesheet" href="css/css.css">
		<title>خدمات</title>
	</head>
	<body>
		<header>
			<div class="container">
				<div id="branding">
					<h1><span class="highlight">سعید</span> فضل اله زاده</h1>
				</div>
					<nav>
						<ul>
							<li><a href="home.html">خانه</a></li>
							<li><a href="about.html">درباره ما</a></li>
							<li class="current"><a href="services.html">خدمات</a></li>
						</ul>
			</div>
		</header>

		<section id="newsletter">
			<div class="container">
				<h1>مشترک خبرنامه ما شوید</h1>
				<form>
					<input type="email" placeholder=" ایمیل خود را بنویسید...">
					<button type="submit" class="email_button">مشترک شوید</button>
				</form>
			</div>
		</section>

		<section id="main">
			<div class="container">
				<article id="maincol">
					<h1 class="pagetitle">خدمات</h1>
					<ul id="services">
						<li>
							<h3>طراحی سایت</h3>
							<p>
								لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
							</p>
							<p>
								قیمت: از 1 میلیون تومان به بالا
							</p>
						</li>
						<li>
							<h3>نگهداری سایت</h3>
							<p>
								لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
							</p>
							<p>
								قیمت: از 1 میلیون تومان به بالا
							</p>
						</li>
						<li>
							<h3>میزبانی وب</h3>
							<p>
								لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
							</p>
							<p>
								قیمت: از 1 میلیون تومان به بالا
							</p>
						</li>
					</ul>
				</article>

				<aside id="sidebar">
					<div...

CSS

body {
  font-family: IranSansWeb;
  line-height: 1.5;
  background-color: #f4f4f4;
  padding: 0;
  margin: 0;
}

/*Global CSS*/
.container {
  width: 90%;
  margin-right: auto;
  overflow: hidden;

}

ul {
  margin: 0;
  padding: 0;
}

.email_button {
  height: 36px;
  background: #e8491d;
  border: none;
  padding-left: 20px;
  padding-right: 20px;
  color: #ffffff;
  font-family: IranSansWeb;
}

.dark {
  padding: 15px;
  background: #35424a;
  color: #ffffff;
  margin-top: 10px;
  margin-bottom: 10px;
}

/*Header*/
header {
  background: #35424a;
  color: #ffffff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;
}

header a{
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
}

header li{
  float: right;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: right;
}

header #branding h1{
  margin: 0;
}

header nav {
  float: left;
  margin-left: 100px;
  margin-top: 13px;
}

header .highlight, header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}

/* Showcase */
#showcase {
  min-height: 380px;
  background-image: url('../img/2.jpg');
  background-repeat: repeat;
  text-align: center;
  color: #ffffff;
}

#showcase h1{
  margin-top: 100px;
  margin-bottom: 10px;
  font-size: 55px;
  margin-left: 20%;
}

#showcase p {
  font-size: 20px;
  margin-left: 20%;
}

/*Newsletter*/
#newsletter {
  padding: 15px;
  color: #ffffff;
  background: #35424a;
}

#newsletter h1 {
  float:right;
}

#newsletter form {
  float: right;
  margin-top: 20px;
  margin-right: 12px;
}

#newsletter input[type="email"] {
  padding: 4px;
  height: 15px;
  width: 250px;
  font-family: IranSansWeb;
}

/* Boxes */
#boxes {
  margin-top: 20px;
}

#boxes .box {
  float: right;
  width: 30%;
  padding: 10px;
  text-align: center;
}

#boxes .box img {
  width: 100px;
  /*height: 90px;*/
}

/* Sidebar */
aside#sidebar {
  float: left;
  width: 30%;
  margin-top: 10px;
 ...