Chris
Well-Known Member
- Регистрация
- 23.04.2012
- Сообщения
- 68
Код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" type="text/html" charset="utf-8" />
<link rel="stylesheet" href="CSS/style.css" type="text/css">
<link rel="stylesheet" href="CSS/reset.css" type="text/css">
<title>Империя Комфорта</title>
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="header">
<div id="phone">
<a href="index.html"><img src="images/logo.png" width="415" height="111"></a>
<p>
+7 (928) 374-57-95<br>
+7 (961) 464-57-78
</p>
</div>
<div id="circle">
<img src="images/circle.png" width="87" height="25">
<a href="address.html">Контакты</a>
</div>
</div>
<div id="content">
<div id="left">
<div id="slide">
<img src="images/img-1.png" width="508" height="217">
</div>
<div id="box">
<div id="first" class="profile">
<img src="images/kbe.png" width="191" height="88">
<div>
<h3>Профиль КBЕ Энджин</h3>
<ul>
<li>Окна "КBЕ Энджин" долговечны</li>
<li>Прекрасно сохраняют тепло</li>
<li>Не пропускает уличные копоть и пыль</li>
<li>Система уплотнений в двух плоскостях исключает продувание</li>
<li>Эксплуатационные расходы на ПВХ окна - низкие: их не надо ремонтировать и перекрашивать</li>
</ul>
</div>
</div>
<div class="profile">
<img src="images/montblanc.png" width="191" height="88">
<div>
<h3>Профиль Montblanc</h3>
<ul>
<li>Сохраняет неизменность форм, белизну и другие физико-механические характеристики</li>
<li>Выдерживает перепады температуры -60°С - +50°С</li>
<li>Устойчив к слабым кислым и щелочным растворам</li>
<li>Не подвергается воздействию бактерий и микроорганизмов.</li>
<li>Не боится влаги и легко моется обычными неабразивными средствами.</li>
</ul>
</div>
</div>
<div class="profile">
<img src="images/Novotex.png" width="191" height="88">
<div>
<h3>Профиль Novotex</h3>
<ul>
<li>Главным достоинством разработанной системы профилей является ее адаптированность именно к российским условиям эксплуатации.</li>
</ul>
</div>
</div>
</div>
</div>
<div id="right">
<ul>
<li><a href="windows.html">Пластиковые окна</a></li>
<li><a href="doors.html">Двери</a></li>
<li><a href="#">Стеклопакеты</a></li>
<li><a href="#">Кондиционеры</a></li>
<li><a href="tile.html">Тротуарная плитка</a></li>
<li><a href="shutter_systems.html">Ролставни</a></li>
<li class="no_ind"><a href="Aluminium_design.html">Светопрозрачные <span>аллюминиевые конструкции</span></a></li>
<li class="no_ind"><a href="Aluminium_construction.html">Фасадные <span>аллюминиевые конструкции Алюмакс</span></a></li>
</ul>
</div>
</div>
<div id="bg"></div>
<div id="footer">
<p id="left_par">ммм</p>
<p>Звоните: <br>
+7 (928) 374-57-95<br>
+7 (961) 464-57-78
</p>
</div>
</div>
</div>
</body>
</html>
Код:
body{
background:#ed1c24;
}
#wrapper{
margin:0;
overflow:hidden;
background:#ed1c24;
}
#main{
background:url(../images/bg.png) no-repeat;
width:780px;
margin:auto;
overflow:hidden;
}
#main_1{
width:780px;
margin:auto;
overflow:hidden;
}
#header{
width:780px;
height:110px;
margin: 0 0 20px;
font-family:Tahoma, Geneva, sans-serif;
position:relative;
}
#phone{
margin:0;
width:530px;
}
#phone img{
margin:0 0 0 50px;
float:left;
}
#phone p{
position:absolute;
margin:10px 0 0 340px;
color:#fff;
}
#circle{
margin:20px 0 0 100px;
width:210px;
float:left;
}
#circle img{
float:left;
}
#circle a{
width:60px;
height:15px;
text-decoration:none;
color:#fff;
font-size:14px;
text-shadow:2px -2px 2px #000;
display:block;
margin:3px 0 0 100px;
}
#content{
margin:0;
width:780px;
}
#top, #bottom{
font-family:"Myriad Pro", Helvetica, Arial, sans-serif;
font-size:26px;
color:#fff;
}
#top{
background:url(../images/strip.png) no-repeat;
}
#top p{
padding:20px 0 0;
}
#top span, #bottom span{
text-decoration:underline;
font-size:18px;
}
#bottom{
background:url(../images/strip.png) no-repeat 0 bottom;
margin:50px 0;
padding:0 0 30px;
}
#bottom img{
margin:30px 0 0;
}
#slide img{
margin:0 0 0 40px;
}
#left{
width:580px;
float:left;
background:url(../images/strip-vert.png) no-repeat 545px 400px;
padding:0 0 50px;
}
#left h3{
font-family:"Myriad Pro", Helvetica, Arial, sans-serif;
font-size:22px;
text-shadow:2px 2px 2px #000;
font-weight:normal;
color:#ededed;
margin:0 0 10px 0;
padding:0 0 0 9px;
}
#box{
width:510px;
margin:15px;
}
#first{
background:none;
}
.profile{
padding:25px 0 20px;
background:url(../images/strip.png) no-repeat;
}
.profile img{
float:left;
width:191px;
}
.profile div{
margin:0 0 0 210px;
}
.profile ul{
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
color:#f1d0d3;
}
.profile li{
margin:7px 0;
background:url(../images/marker.gif) no-repeat 0 4px;
padding:0 0 0 10px;
}
#right{
margin:0 0 0 550px;
padding:0 0 0 10px;
width:200px;
font-family:"Myriad Pro", Helvetica, Arial, sans-serif;
font-size:16px;
}
#right ul{
width:200px;
margin:0 0 100px;
}
#right li{
background:url(../images/button.png) no-repeat;
width:198px;
height:36px;
margin:5px 0;
padding:9px 0 0 20px;
}
#right .no_ind{
padding:3px 0 0 20px;
margin:0 0 10px 0;
}
#right a{
color:#fff;
text-decoration:none;
display:block;
width:198px;
height:36px;
}
#right span{
font-size:12px;
}
#bg{
background:url(../images/workers.png) no-repeat left top;
width:780px;
height:213px;
margin:200px 0 0;
}
#footer{
background:url(../images/tube.png) no-repeat 440px 0;
width:780px;
height:90px;
}
#footer p{
float:left;
font-family:Tahoma, Geneva, sans-serif;
}
#footer span{
text-transform:uppercase;
}
#left_par{
margin:0 90px 0 130px;
}Второй снимок показывает как уехало меню и вместе с ним фон #bg он отдельным дивом идет.
Буду очень признателен за помощь!
