SlowCode
جمعه 11 مهر 1393, 17:41 عصر
واسه من که کار میکنه:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
*{
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;
}
header{
background-color:#17555c;
height:17px;
}
#logo{
background-image:url(../img/logo.png);
background-repeat:no-repeat;
height:265px;
width:600px;
margin-top:30px;
}
#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;
}
#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: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
right: 35px;
top: 28px;
}
#nav ul li a {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
right: 35px;
top: 28px;
}
#nav{
width: 740px;
}
#about {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
}
#abouten {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: -3px;
}
#price {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
}
#pricen {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: 14px;
}
#portfolio {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
right: -15px;
}
#portfolioen {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
}
#services {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
right: 4px;
}
#servicesen {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: 5px;
}
#contact {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
right: -11px;
}
#contacten {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: -11px;
}
footer{
background-color:#17555c;
width:960px;
height:50px;
bottom:0;
position: absolute;
}
</style>
</head>
<body>
<div id="wraper">
<header></header>
<div id="logo"></div><!--logo-->
<nav id="nav">
<ul>
<li><a href="">
<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="">
<span id="contact">تماس با ما</span>
<span id="contacten">contact we</span>
</a></li>
</ul>
</nav>
<footer></footer>
</div><!--wraper-->
</body>
</html>