Приложение
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Index</title>
<!--~~~~~~~ styles ~~~~~~~-->
<link rel="stylesheet" href="css/style.css">
<link id="size-stylesheet" rel="stylesheet" href="#">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrap">
<!--~~~~~~~ begin header ~~~~~~~-->
<header class="head">
<span class="logo"><img src="i/Lider-furniture-company.png" width="200" height="77" alt="Lider furniture company"></span>
<nav class="main_menu">
<ul>
<li><a href="news.html" title="Новости">Новости</a></li>
<li><a href="catalogue.html" title="Каталог">Каталог</a></li>
<li><a href="projects.html" title="Проекты">Проекты</a></li>
<li><a href="price.html" title="Прайсы">Прайсы</a></li>
<li><a href="contactus.html" title="Контакты">Контакты</a></li>
</ul>
</nav>
</header>
<section class="up" id="up">
<img src="i/Lider-furniture-company.png" width="150" height="58" alt="Lider furniture company">
<a href="#" id="toup"><span>наверх</span> ↑</a>
</section>
<!--~~~~~~~ end header ~~~~~~~-->
<div class="main_img">
<div class="mi_slides" id="mi_slides">
<img src="i/slides/1.jpg" alt="">
<img src="i/slides/2.jpg" alt="">
<img src="i/slides/3.jpg" alt="">
</div>
<a class="mi_left" id="mi_left" href="#"><img src="i/arrow_left.png" width="50" height="100" alt="Сюда"></a>
<a class="mi_right" id="mi_right" href="#"><img src="i/arrow_right.png" width="50" height="100" alt="Туда"></a>
<img class="white_mask" src="i/mask.png" alt="">
<img class="shadow_top" src="i/shadow_top.png" alt="">
<img class="shadow_bottom" src="i/shadow_bottom.png" alt="">
</div>
<!--~~~~~~~ begin middle ~~~~~~~-->
<section class="middle">
<h1><b>Мы делаем мебель</b></h1>
<p> Мебельная компания «Лидер» предлагает Вашему вниманию широкий ассортимент мебели собственного производства:
- кухни;
- шкафы купе;
- гардеробные комнаты;
- детские;
- спальни;
- кабинеты;
- офисная мебель;
- гостинечные номера;
- стойки-ресепшн;
- мягкая мебель;
- мебель для баров и ресторанов;
Мы предлагаем комплексное обслуживание по производству и проектированию мебели по индивидуальным заказам с соблюдением пожеланий и вкусовых предпочтений клиентов.
Ценовые категории предлагаемой продукции различны: от мебели эконом-класса до эксклюзивных изделий.
Мы работаем как с отечественными производителями материалов и комплектующих, так и с известными Итальянскими, Немецкими производителями, чем и обусловлено разнообразие предлагаемого товара и его ценовых категорий.
Широкий ассортимент и постоянный контроль качества, является основными принципами нашей работы!
Так же компания занимается поставками мебели из Италии, Турции и Китая! </p>
<p><a class="more" id="more" href="#"><b>Немного подробнее</b></a></p>
</section>
<!--~~~~~~~ end middle ~~~~~~~-->
</div>
<!--~~~~~~~ begin footer ~~~~~~~-->
<footer class="foot">
<div class="foot_in">
<p>© 2013 <b>Мебельная компания «Лидер» Мостовой Аркадий</b></p>
</div>
</footer>
<!--~~~~~~~ end footer ~~~~~~~-->
<div class="mask" id="mask"></div>
</body>
</html>
Style.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a, input, textarea, img { outline: none; }
/*//////////////////////////////////////////////////////////////////////////////*/
html { height: 100%; margin: 0 auto; max-width: 1700px; }
body { background: #fff; color: #464646; font-family: 'PT Sans', Tahoma, sans-serif; font-size: 18px; height: 100%; position: relative; }
.wrap { min-height: 100%; padding-top: 43px; position: relative; }
/*//////////////////////////////////////////////////////////////////////////////*/
/*header part*/
.head { margin: 0 auto; max-width: 1500px; overflow: hidden; padding: 0 100px; z-index: 2; }
.logo { border: none !important; float: left; }
a.logo:hover { opacity: 0.7; }
.main_menu { float: left; padding: 40px 0 5px; }
.main_menu ul { display: inline; }
.main_menu li { display: inline; margin-left: 50px; }
.main_menu a { font-size: 18px; line-height: 26px; }
.main_menu a.active { border: none !important; color: #f7941e !important; cursor: default; font-weight: bold; }
.up { background: #fff; display: none; left: 0; opacity: 0.8; padding: 10px 100px; position: fixed; right: 0; top: 0; z-index: 99; }
.up a { border: none !important; font-size: 14px; margin-left: 50px; position: relative; top: -3px; }
.up a:hover { border-bottom: 1px dashed red; }
.up a span { border-bottom: 1px dashed #0055cc; }
.up a:hover span { border-bottom: 1px dashed red; }
/*//////////////////////////////////////////////////////////////////////////////*/
/*middle part*/
.middle { margin: 0 auto; max-width: 1500px; padding: 0 100px 100px; }
.middle p { line-height: 24px; margin-top: 20px; text-align: justify; }
.more { border-bottom: 1px dashed #464646; color: #464646; }
.more:hover { border-bottom: 1px dashed red; }
.middle h1 { font-size: 24px; }
.selection { font-size: 18px; margin-top: 30px !important; }
.selection a { border-bottom: 1px dashed #0055cc; line-height: 24px; }
.selection a:hover { border-bottom: 1px dashed red; }
.selection .active { border: none !important; color: #464646; cursor: default; font-weight: bold; }
#tabs article { display: none; }
#tabs article#catalogue { display: block; }
.catalogue a { border: none !important; display: inline-block; font-size: 14px; margin: 37px 0 20px 0; padding: 0 15px 3px 0; vertical-align: top; width: 340px; }
.catalogue a img { margin-bottom: 10px; }
.catalogue a span { border-bottom: 1px solid #0055cc; line-height: 18px; }
.catalogue a:hover span { border-bottom: 1px solid red; }
.for_projects { overflow: hidden; }
.projects { margin-left: -100px; }
.projects a { border: none !important; display: inline-block; font-size: 14px; margin: 37px 0 20px 100px; vertical-align: top; width: 350px; }
.projects a img { margin-bottom: 10px; }
.projects a span { border-bottom: 1px dashed #0055cc; line-height: 18px; }
.projects a:hover span { border-bottom: 1px dashed red; }
.for_objects { overflow: hidden; }
.objects { margin-left: -50px; }
.objects a { border: none !important; display: inline-block; font-size: 14px; margin: 40px 0 0 50px; vertical-align: top; }
.objects a img { margin-bottom: 10px; }
.objects a span { border-bottom: 1px dashed #0055cc; line-height: 18px; }
.objects a:hover span { border-bottom: 1px dashed red; }
.back_to { font-size: 14px; margin-left: -18px; }
.back_to a { border: none !important; }
.back_to a span { border-bottom: 1px solid #0055cc; line-height: 18px; }
.back_to a:hover span { border-bottom: 1px solid red; color: red; }
.for_catalog_in { overflow: hidden; }
.catalog_in { font-size: 14px; margin-left: -100px; overflow: hidden; }
.catalog_in article { display: inline-block; margin: 60px 0 0 100px; }
.catalog_in article a { border: none; }
.catalog_in article a img { margin-bottom: 10px; }
.catalog_in article a span { border-bottom: 1px solid #0055cc; line-height: 18px; }
.catalog_in article a:hover span { border-bottom: 1px solid red; }
.catalog_in article p { margin-top: 10px; }
.one_good { margin: 50px auto 0; max-width: 1140px; }
.one_good article { padding-bottom: 50px; }
.for_price { overflow: hidden; }
.price { margin-left: -90px; overflow: hidden; padding-bottom: 70px; }
.price article { float: left; margin-left: 90px; padding-top: 40px; }
.price article h3 { line-height: 24px; margin-bottom: 13px; }
.price article a { font-size: 18px; line-height: 28px; }
.map { margin: 25px auto 0; max-width: 1000px; }
.tel { overflow: hidden; }
.tel b { display: block; float: left; margin-right: 5px; }
.tel span { display: block; overflow: hidden; }
.news {}
.news article { margin-top: 30px; overflow: hidden; }
.news article > span { display: block; float: left; font-size: 14px; line-height: 22px; width: 100px; }
.news article > div { overflow: hidden; }
.pages { margin-top: 30px; }
.pages a { border: none !important; font-size: 14px; line-height: 24px; }
.pages a.pages_back { margin-left: -18px; }
.pages a span { border-bottom: 1px dashed #0055cc; }
.pages a:hover span { border-bottom: 1px dashed red; }
.one_news {}
.one_news article > span { font-size: 14px; }
.managers { padding-bottom: 40px; }
.managers article { display: inline-block; margin-top: 40px; text-align: center; width: 250px; }
.managers article p { font-size: 14px; line-height: 18px; margin-top: 15px; text-align: center; }
.main_img { padding-top: 50px; position: relative; z-index: 1; }
.mi_slides { left: 0; position: absolute; top: 50px; width: 10% !important; }
.mi_slides img { height: 10% !important; width: 10% !important; }
.white_mask { height: auto !important; width: 100% !important; }
.shadow_top { height: 15px; left: 0; position: absolute; top: 50px; width: 100%; z-index: 999; }
.shadow_bottom { height: 15px; left: 0; position: absolute; bottom: 1px; width: 100%; z-index: 999; *bottom: 3px; }
.mi_left { border: none !important; left: 0; margin-top: -30px; opacity: 0.5; position: absolute; top: 50%; z-index: 99; }
.mi_left:hover { opacity: 0.8; }
.mi_right { border: none !important; right: 0; margin-top: -30px; opacity: 0.5; position: absolute; top: 50%; z-index: 99; }
.mi_right:hover { opacity: 0.8; }
.popup { left: 100px; position: absolute; right: 100px; top: 75px; z-index: 3; }
.popup_content { background: #fff; padding: 50px 50px; margin: 0 auto; max-width: 1000px; }
.popup_content h2 {}
.for_close { position: relative; }
.close { border-bottom: 1px dashed #464646; color: #464646; font-size: 14px; line-height: 18px; position: absolute; right: 0; top: -35px; }
.close:hover { border-bottom: 1px dashed red; }
/*//////////////////////////////////////////////////////////////////////////////*/
/*footer part*/
.foot { border-top: 1px solid #898989; font-size: 14px; height: 51px; margin: -75px 0 0; padding-top: 23px; position: relative; }
.foot_in { color: #363636; margin: 0 auto; max-width: 1500px; overflow: hidden; padding: 0 100px; }
.foot_in dl { background: url(../i/odnastudia.png) 0 0 no-repeat; float: right; min-height: 39px; padding-left: 45px; }
.foot_in dl dd { margin-left: -7px; }
.made_by { border-bottom: 1px solid #363636; color: #363636; }
.foot_in p { float: left; padding-top: 14px; }
/*//////////////////////////////////////////////////////////////////////////////*/
/*another part*/
h1 { font-size: 18px; margin-top: 50px; }
h2 { font-size: 24px; line-height: 30px; }
h3 { font-size: 18px; }
h4 {}
h5 {}
h6 {}
b, strong { font-weight: bold; }
i { font-style: italic; }
.hidden { display: none; }
.clear { clear: both; }
.mask { background: #959595; background: url(../i/mask_grey.png) 0 0 repeat; background: rgba(149,149,149,0.85); display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 2; }
/*//////////////////////////////////////////////////////////////////////////////*/
/*href's*/
a { border-bottom: 1px solid #0055cc; color: #0055cc; text-decoration: none; }
a:hover { border-bottom: 1px solid red; color: red; }
/*//////////////////////////////////////////////////////////////////////////////*/
/*modify these values to change the size of the stage or the thumbs */
.pika-stage{
width:100%;
height:auto; }
.pika-stage a { border-bottom: none; }
.pika-stage img { vertical-align: top; width: 100%; }
.pika-thumbs {}
.pika-thumbs li {
width: 150px;
height:100px;
}
.pikachoose-whiteout{
position:relative;
width: 100%;
top:0;
margin:0 auto;
padding-bottom: 30px;
}
.pika-stage{}
.pika-stage .pika-aniwrap{
position: absolute;
top: 0;
left: 0;
z-index:9;}
.pika-stage, .pika-thumbs li, .pika-stage .caption{
position: relative;
}
.pika-thumbs li{}
.pika-stage .caption { font-size: 24px; line-height: 36px; margin-top: 30px; }
.pika-stage .caption a{}
.pika-imgnav { display: block !important; opacity: 1 !important; }
.pika-imgnav a { background: #b9b9b9; background: url(../i/arrow_bg.png) 0 0 repeat; background: rgba(185,185,185,0.5); border: none !important; color: #5c5c5c; cursor: pointer; font-size: 62px; font-weight: bold; height: 100px; line-height: 100px; margin: -100px 0 0; position: absolute; text-align: center; top: 50%; width: 50px; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }
.one_good .pika-imgnav a { margin-top: -50px; }
.pika-imgnav .next:hover, .pika-imgnav .previous:hover { background: #e3e3e3; background: url(../i/arrow_bg_a.png) 0 0 repeat; background: rgba(227,227,227,0.8); color: #2d2d2d; }
.pika-imgnav .previous { left: 0; }
.pika-imgnav .next { right: 0; }
.pika-imgnav .play{display: none;}
.pika-thumbs li{
float:left;
margin-right: 35px;
overflow:hidden;
}
.pika-thumbs li .clip{
position:relative;
height:100%;
overflow: hidden;}
.pika-thumbs li .clip img{
cursor: pointer;}
.pika-textnav{display:none;}
.pika-counter{display:none;}
.jcarousel-clip-horizontal{
width:100%;
overflow: hidden;
margin-top: 45px;
left:0;
}
.jcarousel-container{
position:relative;
width:100%;
height:100px;
z-index:10;
top:0;
left:0;}
.jcarousel-prev,.jcarousel-next{
background: #b9b9b9; background: url(../i/arrow_bg.png) 0 0 repeat; background: rgba(185,185,185,0.5); border: none !important; color: #5c5c5c; cursor: pointer; font-weight: bold; position: absolute; text-align: center; top: 50%; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;
font-size: 32px; height: 50px; line-height: 50px; margin: -25px 0 0; width: 25px;
}
.jcarousel-prev:hover, .jcarousel-next:hover { background: #e3e3e3; background: url(../i/arrow_bg_a.png) 0 0 repeat; background: rgba(227,227,227,0.8); color: #2d2d2d; }
.jcarousel-prev-disabled:hover, .jcarousel-next-disabled:hover, .jcarousel-next-disabled, .jcarousel-prev-disabled{
filter:alpha(opacity=30);
opacity:0.3;}
.jcarousel-prev{ left: 0; }
.jcarousel-next { right: 0; }