Last active
May 13, 2017 13:05
-
-
Save ruchej/afe9e308c03c28752921bfafb8337b6e to your computer and use it in GitHub Desktop.
Test maket
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ru"> | |
<head> | |
<link rel="stylesheet" href="main.css" /> | |
<link rel="icon" type="image/x-icon" href="icon/favicon.ico"> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> | |
<meta charset="utf-8"> | |
<title>Мебель класс 31</title> | |
</head> | |
<body> | |
<div class="block main_block"> | |
<header class="block"> | |
<img class="block header_logo" src="icon/logo.svg" alt="Логотип"> | |
<img class="block header_slogan" src="icon/slogan.svg" alt="Мебель класс. Индивидуально Торчески"> | |
<div class="block adres"> | |
<p>(4722) 37-47-86</p> | |
<p>8-904-533-88-68</p> | |
<p>г.Белгород,</p> | |
<p>ул.Конева 21б</p> | |
</div> | |
</header> | |
<nav> | |
<ul class="menu"> | |
<li><a href="#">Главная</a></li> | |
<li><a href="#">Каталог</a> | |
<ul> | |
<li><a href="#">Кухни</a> | |
<ul> | |
<li><a href="#">Пластик</a></li> | |
<li><a href="#">Шпон</a></li> | |
<li><a href="#">Эмаль</a></li> | |
</ul> | |
</li> | |
<li><a href="#">Шкафы-купе</a></li> | |
<li><a href="#">Шкафы</a></li> | |
<li><a href="#">Прихожие</a></li> | |
</ul> | |
</li> | |
<li><a href="#">Материалы</a></li> | |
<li><a href="#">Интересное</a></li> | |
<li><a href="#">О нас</a></li> | |
</ul> | |
</nav> | |
<main class="block"> | |
Главный блок | |
</main> | |
</div> | |
<footer class="block"> | |
Подвал | |
</footer> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.block { | |
/*border: 1px dotted #000000;*/ | |
} | |
* { | |
font-family: 'Open Sans', sans-serif; | |
box-sizing: border-box; | |
} | |
/* СТРАНИЦА */ | |
html { | |
height: 100%; | |
background-image: url(img/background-2.png); | |
background-position: center; | |
} | |
/* ТЕЛО */ | |
body { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
/* ГЛАВНЫЙ БЛОК main */ | |
.main_block { | |
width: 960px; | |
min-height: 100%; | |
margin: 0 auto; | |
padding: 3px; | |
margin-bottom: -150px; | |
background: rgba(255,255,255,0.7); | |
-webkit-transition: all 0.8s ease-in-out; | |
} | |
/* ШАПКА */ | |
header { | |
height: 130px; | |
width: 100%; | |
overflow: hidden; | |
} | |
.header_logo { | |
width: 110px; | |
height: 110px; | |
margin: 5px; | |
} | |
.header_slogan { | |
width: 380px; | |
vertical-align: top; | |
margin: 5px 5px 5px 0; | |
} | |
.adres { | |
width: 140px; | |
font-size: 18px; | |
line-height: 0.4; | |
float: right; | |
color: #3F5F94; | |
} | |
/* МЕНЮ */ | |
.menu, .menu ul { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
text-transform: uppercase; | |
} | |
.menu { | |
width: 100%; | |
height: 30px; | |
margin: 0 auto 5px; | |
background: #3F5F94; | |
} | |
.menu { | |
zoom: 1; | |
} | |
.menu:before, .menu:after { | |
content: ""; | |
display: table; | |
} | |
.menu:after { | |
content: "0"; | |
height: 50px; | |
display: block; | |
clear: both; | |
} | |
.menu li { | |
float: left; | |
position: relative; | |
} | |
.menu a { | |
float: left; | |
padding: 4px 20px; | |
color: #fff; | |
text-decoration: none; | |
} | |
.menu li:hover > ul { | |
opacity: 1; | |
visibility: visible; | |
margin: 0; | |
} | |
.menu > li:hover > a { | |
/* color: #3F5F94; | |
background: #E9EFF8;*/ | |
border-bottom: 3px solid #FF7400; | |
zoom: 1.2; | |
} | |
.menu ul { | |
margin: 20px 0 0 0; | |
position: absolute; | |
opacity: 0; | |
visibility: hidden; | |
left: 0; | |
top: 32px; | |
z-index: 1; | |
background: #3F5F94; | |
transition: all .2s ease-in-out; | |
} | |
.menu ul ul { | |
top: 0; | |
left: 153px; | |
margin: 0 0 0 20px; | |
} | |
.menu ul li { | |
float: none; | |
display: block; | |
-moz-box-shadow: 0 1px 0 #263C61, 0 2px 0 #fff; | |
-webkit-box-shadow: 0 1px 0 #263C61, 0 2px 0 #fff; | |
box-shadow: 0 1px 0 #263C61, 0 2px 0 #fff; | |
} | |
.menu ul a { | |
padding: 5px; | |
width: 150px; | |
display: block; | |
float: none; | |
} | |
.menu ul a:hover { | |
background: #FF7400; | |
} | |
.menu ul li:first-child > a:after { | |
content: " "; | |
position: absolute; | |
left: 40px; | |
top: -6px; | |
border-left: 6px solid transparent; | |
border-right: 6px solid transparent; | |
border-bottom: 6px solid #3F5F94; | |
} | |
.menu ul li:first-child > a:hover:after { | |
border-bottom: 6px solid #FF7400; | |
color: #000; | |
} | |
.menu ul ul li:first-child a:after { | |
left: -6px; | |
top: 50%; | |
margin-top: -6px; | |
border-left: 0; | |
border-bottom: 6px solid transparent; | |
border-top: 6px solid transparent; | |
border-right: 6px solid #3F5F94; | |
} | |
.menu ul ul li:first-child a:hover:after { | |
border-right: 6px solid #FF7400; | |
border-bottom-color: transparent; | |
} | |
/* ОБЩЕЕ */ | |
.clearfix:before, | |
.clearfix:after { | |
content: " "; | |
display: table; | |
} | |
.clearfix:after { | |
clear: both; | |
} | |
.clearfix { | |
*zoom: 1; | |
} | |
main { | |
display: block; | |
} | |
footer { | |
width: 960px; | |
margin: 0 auto; | |
height: 150px; | |
background-color: #3F5F94; | |
-webkit-transition: all 0.8s ease-in-out; | |
} | |
/*Адаптация макета*/ | |
@media screen and (max-width: 960px) { | |
.main_block, footer { | |
width: 100%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment