About

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 class="current"><a href="about.html">درباره ما</a></li>
							<li><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>
					<p>
						لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به متن می‌باشد آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند تا مرحله طراحی و صفحه‌بندی را به پایان برند.
					</p>
					<p class="dark">
						لورم...

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;
 ...