DOMUS AREUA

Тестовая верстка

by Aleksey Karagodnikov

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<div class="slider">
    <div class="slider__frames">
        <div class="frame" style="background-image:url('http://domus.i-vi-test.ru/i/slides/1st-slide.jpg');">
            <div class="on-frame">
                <div class="on-frame__title darkgray-theme"> <a class="link" href="#">Гардеробная "Красота-неведома"</a>

                </div>
            </div>
            <!--/.frame-->
        </div>
        <div class="frame" style="background-image:url('http://domus.i-vi-test.ru/i/slides/1st-slide.jpg');">
            <div class="on-frame">
                <div class="on-frame__title darkgray-theme"> <a href="#">Гардеробная "Красота-неведома"</a>

                </div>
            </div>
            <!--/.frame-->
        </div>
        <div class="frame" style="background-image:url('http://domus.i-vi-test.ru/i/slides/1st-slide.jpg');">
            <div class="on-frame">
                <div class="on-frame__title darkgray-theme"> <a href="#">Гардеробная "Красота-неведома"</a>

                </div>
            </div>
            <!--/.frame-->
        </div>
        <div class="frame" style="background-image:url('http://domus.i-vi-test.ru/i/slides/1st-slide.jpg');">
            <div class="on-frame">
                <div class="on-frame__title darkgray-theme"> <a href="#">Гардеробная "Красота-неведома"</a>

                </div>
            </div>
            <!--/.frame-->
        </div>
        <div class="frame" style="background-image:url('http://domus.i-vi-test.ru/i/slides/1st-slide.jpg');">
            <div class="on-frame">
                <div class="on-frame__title darkgray-theme"> <a href="#">Гардеробная "Красота-неведома"</a>

                </div>
            </div>
            <!--/.frame-->
        </div>
        <div class="frame" style="background-image:url('http://domus.i-vi-test.ru/i/slides/1st-slide.jpg');">
            <div...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600&subset=latin,cyrillic);
* {
    box-sizing: border-box;
}
html {
    position: relative;
    min-height: 100%;
    min-width: 960px;
    height: 100%;
}
body {
    color: #727272;
    font-family:'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    margin: 0;
    padding-bottom: 90px;
    height: 100%;
}
a {
    color: #727272;
    text-decoration: none;
}
[class*="with-base"]::before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
[class*="with-base"] > * {
    display: inline-block;
    vertical-align: middle;
}
.no-bullet {
    list-style-type: none;
    padding: 0;
}
.inline-list > li {
    display: inline-block;
}
.darkgray-theme {
    background-color: #444;
    color: #fff;
}
.darkgray-theme .link {
    color: #fff;
}
.darkgray-theme .link:hover {
    color: #ccc;
}
.darkgray-theme .link.current {
    color: #909090;
}
.main-panel {
    position: absolute;
    left: 0;
    bottom: 0;
    min-width: 960px;
    width: 100%;
    height: 90px;
}
.main-panel__container {
    display: table;
    height: 100%;
    margin: 0 auto;
    width: 960px;
}
.main-panel .logo {
    display: table-cell;
    width: 174px;
}
.logo__link, .logo__img {
    display: block;
}
.main-panel .navigation {
    display: table-cell;
}
.menu {
    box-sizing: border-box;
    display: table;
    height: 100%;
    margin: 0;
    padding-left: 20px;
}
.menu .menu__item {
    display: table-cell;
    overflow: hidden;
    padding-left: 20px;
    position: relative;
    text-align: center;
    vertical-align: middle;
}
.menu .menu__item.active-sub::after,
.menu .menu__item > .link.current::after{
    background-image: linear-gradient(180deg, white 50%, transparent 50%);
    border-radius: 50%;
    bottom: -22px; /* Cropping circle to circular sector with 8px height (30px - 22px) */
    content: '';
    display: block;
    height: 30px;
    left: 50%;
   ...