<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>!!!</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wraper">
<header></header>
<div id="logo"></div><!--logo-->
<nav id="nav">
<ul>
<li><a href="about.html">
<span id="about" >درباره ما</span>
<span id="abouten">About We</span>
</a></li>
<li><a href="">
<span id="price">تعرفه ها</span>
<span id="pricen">price</span>
</a></li>
<li><a href="">
<span id="portfolio">نمونه کارها</span>
<span id="portfolioen">portfolio</span>
</a></li>
<li><a href="">
<span id="services">خدمات</span>
<span id="servicesen">services</span>
</a></li>
<li><a href="contact.html">
<span id="contact">تماس با ما</span>
<span id="contacten">contact we</span>
</a></li>
</ul>
</nav>
</div><!--wraper-->
<footer>
<div id="dot"></div><!--dot-->
<span>...</span>
</footer>
</body>
</html>
@font-face{
font-family:'Far.Two Light';
src:url('font/FarTwoLight.eot?#') format('eot'),
url('font/FarTwoLight.woff') format('woff'),
url('font/FarTwoLight.svg') format('svg'),
url('font/FarTwoLight.ttf') format('truetype')
}
@font-face{
font-family:'Century Gothic';
src:url('font/gomic.eot?#') format('eot'),
url('font/gomic.woff') format('woff'),
url('font/gomic.svg') format('svg'),
url('font/gomic.ttf') format('truetype')
}
*{
text-decoration:none;
margin: 0 auto;
padding: 0;
border: 0;
outline: 0;
direction: rtl;
font-family:"Far.Two Light", "Century Gothic";
}
*::selection {
background-color: rgba(252, 174, 50, 0.8);
color: #FFFFFF;
}
*::-moz-selection {
background-color: rgba(252, 174, 50, 0.8);
color: #FFFFFF;
}
html{
background:url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#wraper{
width:960px;
position: relative;
}
header{
background-color:#17555c;
height:17px;
}
#logo{
background-image:url(img/logo.png);
background-repeat:no-repeat;
height:265px;
width:600px;
margin-top:30px;
}
#logo1{
background-image:url(img/logo.png);
background-repeat:no-repeat;
height:265px;
width:600px;
background-size:200px 88px;
margin: 10px 0 -150px 0;
}
#nav ul{
list-style:none;
}
#nav ul li{
background-image:url(img/circle.png);
width:140px;
height:132px;
display: inline-block;
transition-duration: 0.2s, 0.2s;
transition: all linear 0.2s;
-o-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;
}
#nav1 ul li{
background-image:url(img/circle.png);
display: inline-block;
width:70px;
height:72px;
background-repeat:no-repeat;
transition-duration: 0.2s, 0.2s;
transition: all linear 0.2s;
-o-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;
background-size:66px 70px;
}
#nav1 ul li:nth-child(2){
top:20px;
position:relative;
}
#nav1 ul li:nth-child(4){
top:20px;
position:relative;
}
#nav1 ul li:nth-child(3){
top:40px;
position:relative;
}
#nav1 ul li:hover{
background-image:url(img/li.png);
width:70px;
height:72px;
display: inline-block;
-moz-transition-duration: 0.2s, 0.2s;
-o-transition-duration: 0.2s, 0.2s;
-ms-transition-duration: 0.2s, 0.2s;
-webkit-transition-duration: 0.2s, 0.2s;
}
.active{
background-image:url(img/li.png) !important;
}
#nav1 ul li a {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 15px;
position: relative;
right: 35px;
top: 28px;
}
#nav1{
width: 410px;
position: relative;
right: 35px;
top: -30px;
}
#nav ul li:nth-child(2){
top:30px;
position:relative;
}
#nav ul li:nth-child(4){
top:30px;
position:relative;
}
#nav ul li:nth-child(3){
top:60px;
position:relative;
}
#nav ul li:hover{
background-image:url(img/li.png);
width:140px;
height:132px;
display: inline-block;
-moz-transition-duration: 0.2s, 0.2s;
-o-transition-duration: 0.2s, 0.2s;
-ms-transition-duration: 0.2s, 0.2s;
-webkit-transition-duration: 0.2s, 0.2s;
}
#nav ul li a {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 25px;
position: relative;
right: 35px;
top: 28px;
}
#nav ul li a {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 25px;
position: relative;
right: 35px;
top: 28px;
}
#nav{
width: 740px;
}
#about {
color: #fff;
font-family: "Far.Two Light","Century Gothic";
font-size: 25px;
position: relative;
right: -10px;
}
#abouten {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: -3px;
}
#price {
color: #fff;
font-family: "Far.Two Light","Century Gothic";
font-size: 25px;
position: relative;
right: -15px;
}
#pricen {
color: #fff;
display: block;
font-family: "Far.Two Light","Century Gothic";
font-size: 23px;
position: relative;
right: 5px;
top: -6px;
}
#portfolio {
color: #fff;
font-family: "Far.Two Light","Century Gothic";
font-size: 23px;
position: relative;
right: -23px;
}
#portfolioen {
color: #fff;
display: block;
font-family: "Far.Two Light","Century Gothic";
font-size: 23px;
position: relative;
right: -12px;
top: -6px;
}
#services {
color: #fff;
font-family: "Far.Two Light","Century Gothic";
font-size: 25px;
position: relative;
right: -7px;
}
#servicesen {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: 5px;
}
#about1 {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 12px;
position: relative;
right: -16px;
top: -15px;
}
#abouten1 {
color: #fff;
display: block;
font-family: "Far.Two Light","Century Gothic";
font-size: 11px;
position: relative;
right: -24px;
top: -20px;
}
#price1 {
color: #fff;
font-family: "Far.Two Light","Century Gothic";
font-size: 12px;
position: relative;
right: -21px;
top: -15px;
}
#pricen1 {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 12px;
position: relative;
top: -19px;
display: block;
right: -11px;
}
#portfolio1 {
color: #fff;
font-family: "Far.Two Light","Century Gothic";
font-size: 11px;
position: relative;
right: -24px;
top: -15px;
}
#portfolioen1 {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 12px;
position: relative;
top: -18px;
display: block;
right: -22px;
}
#services1 {
color: #fff;
font-family: "Far.Two Light","Century Gothic";
font-size: 12px;
position: relative;
right: -18px;
top: -16px;
}
#servicesen1 {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 12px;
position: relative;
top: -18px;
display: block;
right: -19px;
}
#contact1 {
color: #fff;
font-family: "Far.Two Light","Century Gothic";
font-size: 12px;
position: relative;
right: -24px;
top: -15px;
}
#contacten1 {
color: #fff;
display: block;
font-family: "Far.Two Light","Century Gothic";
font-size: 9px;
position: relative;
right: -25px;
top: -15px;
}
#contact {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 25px;
position: relative;
right: -21px;
}
#contacten {
color: #fff;
font-family:"Far.Two Light", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: -11px;
}
footer{
background-color:#17555c;
width:100%;
height:30px;
position: absolute;
bottom: 0;
transition-duration: 0.2s, 0.2s;
transition: all linear 0.2s;
-o-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;
overflow:hidden;
}
footer:hover{
background-color:#17555c;
width:100%;
height:80px;
position: absolute;
bottom: 0;
-moz-transition-duration: 0.2s, 0.2s;
-o-transition-duration: 0.2s, 0.2s;
-ms-transition-duration: 0.2s, 0.2s;
-webkit-transition-duration: 0.2s, 0.2s;
}
#dot{
background-image:url(img/dot.png);
width:40px;
height:38px;
margin-top:10px;
transition-duration: 0.2s, 0.2s;
transition: all linear 0.2s;
-o-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;
}
footer span{
color:#FFF;
display: block;
width: 135px;
margin-top:10px;
}
#content{
background-image: url(img/box.png);
width: 700px;
height: 350px;
background-size: 700px 350px;
}
#contect{
background-image: url(img/contect.png);
width: 700px;
height: 545px;
background-size: 700px 545px;
}
#form {
position: relative;
top: 60px;
display: inline-block;
width: 440px;
right: 90px;
margin-top: 15px;
opacity: 0.8;
}
input:-moz-placeholder {
color:rgba(51,51,51,0.3);
padding:0 10px;
}
input::-moz-placeholder {
color:rgba(51,51,51,0.3);
padding:0 10px;
}
input::-webkit-input-placeholder {
color:rgba(51,51,51,0.3);
padding:0 10px;
}
input:-ms-input-placeholder {
color:rgba(51,51,51,0.3);
padding:0 10px;
}
textarea:-moz-placeholder {
color:rgba(51,51,51,0.3);
padding:0 10px;
}
textarea::-moz-placeholder {
color:rgba(51,51,51,0.3);
padding:0 10px;
}
textarea::-webkit-input-placeholder {
color:rgba(51,51,51,0.3);
padding:0 10px;
}
textarea:-ms-input-placeholder {
color:rgba(51,51,51,0.3);
padding:0 10px;
}
#send{
width:100px;
height:100px;
background-color:#096;
color: #fff;
font-size: 20px;
display: inherit;
position: relative;
top:-10px;
background-image:url(img/send.png);
background-repeat: no-repeat;
background-position: 27px 8px;
background-size: 45px;
-webkit-transition: all ease-out 0.5s;
-moz-transition: all ease-out 0.5s;
-ms-transition: all ease-out 0.5s;
-o-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
line-height:8;
}
#send:focus{
background-size: 20px;
background-position: 110px -47px;
}
#send:hover{
box-shadow: inset 0 -40px 0 0 #108f65;
}
#send span{
position: relative;
top: 26px;
}
.name{
width:300px;
height:50px;
border:2px solid #096;
display: inherit;
margin-top: 5px;
font-size: 19px;
padding-right: 10px;
padding-left: 10px;
color:#333;
/*border-radius: 30px;*/
-webkit-transition: all ease-out 0.5s;
-moz-transition: all ease-out 0.5s;
-ms-transition: all ease-out 0.5s;
-o-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
.name:focus{
border:2px solid #e44251;
}
#area{
width:300px;
height:200px;
border:2px solid #096;
display: inherit;
margin-top: 5px;
padding: 10px;
font-size: 17px;
color:#333;
/*border-radius: 30px;*/
-webkit-transition: all ease-out 0.5s;
-moz-transition: all ease-out 0.5s;
-ms-transition: all ease-out 0.5s;
-o-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
#area:focus{
width:300px;
height:200px;
border:2px solid #e44251;
display: inherit;
margin-top: 5px;
padding: 10px;
font-size: 17px;
color:#333;
border-bottom:5px solid #e44251;
}
.info-e{
float: left;
margin-left: 108px;
margin-top: 80px;
}
#content p {
color: #ffffff;
position: relative;
top: 100px;
width: 550px;
}
.site{
background-image: url(img/site.png);
width: 250px;
height: 195px;
background-repeat: no-repeat;
list-style: none;
display: inline-block;
margin-bottom: 20px;
}
.graphic{
background-image: url(img/graphic.png);
width: 250px;
height: 195px;
background-repeat: no-repeat;
list-style: none;
display: inline-block;
margin-bottom: 20px;
}
.multimedia{
background-image: url(img/multimedia.png);
width: 250px;
height: 195px;
background-repeat: no-repeat;
list-style: none;
display: inline-block;
margin-bottom: 20px;
}
.services {
margin: 50px auto;
width: 770px;
}