ПОЛУЧИТЬ БЕСПЛАТНУЮ ОЦЕНКУ

Крутая HTML5, CSS3, JS верстка для

Photoshop .psd
  • Photoshop .psd
  • Illustrator .ai
  • png, jpeg
HTML & CSS & JS
  • HTML & CSS & JS
  • Email
Примерная стоимость
$90
  • Отправить дизайн
  • Согласовать оплату
  • Получить верстку
  • Поддержка и сопровождение

ВОЗМОЖНОСТИ

НАШИ ПРЕИМУЩЕСТВА

Стандарты кода

Стандарты кода

  • Валидный HTML CSS JS
  • Структурированный код
  • Комментирование кода
  • Pixel Perfect
  • Методология BEM
  • Less, Sass
Поддержка

Поддержка

  • 30 дней бесплатной поддержки
  • Сопровождение и оперативная поддержка вашего проекта, как будто наша команда у вас в офисе!
  • Ведение долгосрочных проектов
Сервис

Сервис

  • Оперативная коммуникация
  • Четкое соблюдение сроков Последние 50 проектов успешно были завершены вовремя!
Бонусы

Бонусы

  • Скидки на последующие заказы
  • Специальные условия для постоянных клиентов

НАШИ РАБОТЫ

/* ... */

<body>

<div class="container">
    <section class="intro">
        <ul class="slider bxslider-home">
	    <li class="slider__slide">
	        <img src="img/img01.jpg" />
		<div class="slider__cnt">
		    <div class="slider__cnt-bg"></div>
		    <div class="slider__holder">
		        <span class="slider__label"><em>эксклюзив</em></span>
			<div class="slider__txt">
			    <h2 class="slider__ttl">gitman vintage + fott</h2>
			    <a href="#" class="slider__btn">Впервые в FOTT. Сделано в Италии.</a>
			</div>
		    </div>
		</div>
	    </li>
	</ul>
    </section>
    <section class="cnt">
     <div class="products__wrap">
        <div class="products">
  	    <a class="product" href="#">
	        <span class="product__photo">
		    <img class="product__img img-lazy" src="img/none.png" data-original="img/img10.jpg" alt=""/>
		</span>
		<span class="product__cnt">
		    <strong class="product__ttl">gitman vintage + fott</strong>
		    <span class="product__txt">Часто путешествующий сотрудник магазина FOTT Павел Осовцов о том, что он берет с собой 	в поездку в Италию.</span>
		    <span class="product__label"><em>эксклюзив</em></span>
		</span>
	    </a>
	    <a class="product product__recom product__mark" href="#">
	        <span class="product__photo">
		    <img class="product__img img-lazy" data-original="img/img13.jpg" src="img/none.png" alt=""/>
		</span>
		<span class="product__cnt">
		    <span class="product__holder">
		        <span class="product__label"><em>наш выбор</em></span>
		        <span class="product__frame"><strong class="product__ttl">summer sale</strong></span>
		        <span class="product__txt">13 синих пиджаков в fott</span>
		    </span>
	        </span>
	    </a>
	    <span class="product product__empty">
	        <span class="product__cnt">
		    <span class="product__label"><em>новые поступления</em></span>
		    <a href="#" class="product__ttl"><em>gitman vintage</em></a>
		    <a href="#"  class="product__ttl"><em>aspesi</em></a>
		    <a href="#"  class="product__ttl"><em>band of outsiders</em></a>
		    <a href="#"  class="product__ttl"><em>onitsuka tiger</em></a>
		    <a href="#"  class="product__ttl"><em>c.p. company</em></a>
		    <a href="#"  class="product__ttl"><em>engineered garments</em></a>
		    <a href="#"  class="product__ttl"><em>nemen</em></a>
		    <strong class="product__ttl">...</strong>
		    <span class="product__desc">
		        <span class="product__txt">на этой неделе</span>
			<span class="product__txt">12 брендов / 319 вещей</span>
		    </span>
		    <span class="product__label product__new"><em>Новинки</em></span>
		</span>
	    </span>
	    <a class="product product__recom" href="#">
	        <span class="product__photo">
		    <img class="product__img img-lazy" data-original="img/img14.jpg" src="img/none.png" alt=""/>
		</span>
		<span class="product__cnt">
		    <span class="product__holder">
		        <span class="product__label"><em>наш выбор</em></span>
			<span class="product__frame"><strong class="product__ttl product__ttl_big">13</strong></span>
			<span class="product__txt">13 синих пиджаков в fott</span>
		    </span>
		</span>
	    </a>
	    <a class="product" href="#">
	        <span class="product__photo">
		    <img class="product__img img-lazy" data-original="img/img15.jpg" src="img/none.png" alt=""/>
  	        </span>
		<span class="product__cnt">
		    <strong class="product__ttl">gitman vintage + fott</strong>
		    <span class="product__txt">Датчане, которые платят налог даже за неэкологичные стройматериалы, думают об окружающей среде и при создании аксессуаров.</span>
		    <span class="product__label"><em>эксклюзив</em></span>
		</span>
	    </a>
	    <a class="product" href="#">
	        <span class="product__photo">
		    <img class="product__img img-lazy" data-original="img/img16.jpg" src="img/none.png" alt=""/>
		</span>
		<span class="product__cnt">
		    <strong class="product__ttl">aspesi</strong>
		    <span class="product__txt">Датчане, которые платят налог даже за неэкологичные стройматериалы, думают об окружающей среде и при создании аксессуаров.</span>
		    <span class="product__label"><em>эксклюзив</em></span>
		</span>
		</a>
		<a class="product" href="#">
		    <span class="product__photo">
		        <img class="product__img img-lazy" data-original="img/img17.jpg" src="img/none.png" alt=""/>
		    </span>
		    <span class="product__cnt">
		        <strong class="product__ttl">mismo</strong>
			<span class="product__txt">Датчане, которые платят налог даже за неэкологичные стройматериалы, думают об окружающей среде и при создании аксессуаров.</span>
			<span class="product__label"><em>эксклюзив</em></span>
		    </span>
		</a>
	     </div>
	 </div>
	 /* ... */
    </div>
</section>
</div>

</body>

</html>
                
/*
----------------------------------------------------------------------------------------------------
[Table of Contents]

1. Base page configuration
2. Elements of interface, Global classes and other blocks
3. Layouts
   3.1 Base layout
4. Blocks
   4.1 Icons                                	| .ico
   4.2 Buttons                             		| .btn
   4.3 Forms                                	| .form
   4.4 Elements                             	|
   	4.4.1 Topbar                            	| .topbar
   	4.4.2 Main menu                         	| .menu
   	4.4.3 Account                           	| .account
   	4.4.4 Intro                             	| .intro
   	4.4.5 Slider                             	| .slider
   	4.4.6 Features                             	| .features
   	4.4.7 Products                             	| .products
   	4.4.8 More box                             	| .more-box
   	4.4.9 Banner                             	| .banner
   	4.4.10 Promo                             	| .promo
   	4.4.11 Features description              	| .features-desc

---------------------------------------------------------------
*/

/*
#########################
[1. Base page configuration]
#########################
*/

body, div, dl, dt, dd, ul, ol, li, form, table, tr, td,
h1, h2, h3, h4, h5, h6, pre, p, span, b, i,
input, textarea, fieldset {
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none;
}
img, fieldset {
    border: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
/*html,body { height:100%;}*/
body {
    font: 12px/16px Georgia, Times, serif;
    color: #414042;
}
body.non-responsive {
    min-width: 980px;
}
input, textarea, select, label {
    font-size: 1em;
    font-family: inherit;
}
input[type="submit"] {
    cursor: pointer;
}
input[type=text],
textarea,
input[type=submit] {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}
input[type="submit"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}
header, footer, article, section, hgroup, nav, figure, aside {
    display: block;
}
figure {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #414042;
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -ms-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
    outline: 0;
}
a:hover {
    color: #939598;
}
a:active {
    outline: 0;
    outline: none;
}
ol {
    margin-left: 20px;
}

/* . . . */

/* ===== 4.4.7 Products ===== */
.products__wrap {
    overflow: hidden;
    position: relative;
    padding-bottom: 45px;
    text-align: center;
}
.jsMoreBox {
    display: none;
}
.jsMoreContainerOpen,
.jsMoreContainerOpen .jsMoreBox {
    display: inline !important;
}
.products {
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0 -10px 0 0;
    text-align: left;
    max-width: 1160px;
}
.product {
    display: inline-block;
    vertical-align: top;
    width: 370px;
    height: 370px;
    margin: 0 7px 31px 6px;
    position: relative;
    text-align: center;
    overflow: hidden;
}
.product:hover {
    color: #6d6e71;
}
.product__photo {
    display: block;
    height: 220px;
    width: 100%;
    overflow: hidden;
    margin: 0 0 19px;
    position: relative;
}
.product__img {
    display: block;
    margin: 0 auto;
    vertical-align: top;
    width: auto;
    height: 100%;
    -webkit-transition: opacity .2s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s;
    -moz-transition: opacity .2s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s;
    -ms-transition: opacity .2s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s;
    -o-transition: opacity .2s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s;
    transition: opacity .2s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s;
}
.product:hover .product__img {
    opacity: 0.7;
    filter: alpha(opacity='70');
}
.product__recom .product__photo {
    margin: 0;
    height: 370px;
}
.product__cnt {
    display: block;
    padding: 0 13px;
}
.product__ttl {
    font-size: 14px;
    line-height: 16px;
    font-family: 'proxima_nova_ltsemibold', Arial, sans-serif;
    font-weight: normal;
    display: block;
    margin-bottom: 13px;
    text-align: center;
    text-transform: uppercase;
}
.product__txt {
    display: inline;
    margin-bottom: 28px;
    padding-bottom: 1px;
}
.product:hover .product__txt {
    border-bottom: 1px solid #ccc;
    padding-bottom: 0;
    color: #999;
    transition: all 0.2s ease-out 0s;
}
.product__label {
    font-size: 7px;
    line-height: 12px;
    font-family: 'proxima_nova_rgbold', Arial, sans-serif;
    display: block;
    text-align: center;
    text-transform: uppercase;
}
.product__usual .product__label {
    width: 100%;
    position: absolute;
    bottom: 0;
}
.product__label em {
    font-style: normal;
    display: inline-block;
    vertical-align: top;
    padding-bottom: 3px;
    border-bottom: 1px solid #bdbec0;
    text-transform: uppercase;
    margin-top: 28px;
}
.product__usual .product__label em {
    margin: 0;
}
.product:hover .product__label em {
    color: #414042;
}
.product__recom .product__cnt {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0;
    color: #fff;
    display: table;
    text-align: center;
}
.product__recom .product__holder {
    position: relative;
    display: table-cell;
    z-index: 2;
    vertical-align: middle;
    width: 100%;
    padding: 40px 0;
}
.product__recom .product__label {
    position: absolute;
    top: -12px;
    width: 100%;
    left: 0;
}
.product__recom .product__label em {
    border-bottom: 1px solid #fff;
    color: #fff !important;
}
.product__recom .product__txt {
    font-size: 11px;
    line-height: 15px;
    font-family: 'proxima_nova_ltsemibold', Arial, sans-serif;
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 19px;
    margin: 0;
    text-transform: uppercase;
}
.product__recom:hover .product__txt {
    text-decoration: none;
    border-bottom: 0;
    padding-bottom: 1px;
    color: #fff;
}
.product__recom .product__ttl {
    font-size: 48px;
    line-height: 57px;
    font-family: 'proxima_nova_rgbold', Arial, sans-serif;
    font-weight: normal;
    margin-bottom: 0;
    padding: 0 10px;
}
.product__recom .product__ttl_big {
    font-size: 242px;
    line-height: 232px;
}
.product__empty .product__cnt {
    height: 327px;
    position: relative;
    padding-bottom: 44px;
}
.product__empty .product__label {
    padding: 14px 0 0;
    font-size: 11px;
    margin-bottom: 18px;
}
.product__empty .product__label em {
    padding-bottom: 23px;
}
.product__empty .product__ttl {
    font-size: 21px;
    line-height: 24px;
    font-family: 'proxima_nova_ltsemibold', Arial, sans-serif;
    margin-bottom: 0;
    color: #151515;
}
.product__empty .product__ttl em {
    font-style: normal;
    padding-bottom: 1px;
}
.product__empty a.product__ttl:hover {
    text-decoration: none;
}
.product__empty a.product__ttl:hover em {
    padding-bottom: 0;
    border-bottom: 1px solid #151515;
}
.product__desc {
    display: block;
    padding-top: 5px;
}
.product__empty .product__txt {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    font-family: 'proxima_nova_ltsemibold', Arial, sans-serif;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
}
.product__empty:hover .product__txt {
    text-decoration: none;
    color: #151515;
    border-bottom: 0;
    padding-bottom: 1px;
}
.product__empty .product__new {
    margin: 0;
    position: absolute;
    width: auto;
    bottom: 4px;
    left: 0;
    right: 0;
    padding: 0;
}
.product__empty .product__new em {
    font-size: 9px;
    font-family: 'proxima_nova_thextrabold', Arial, sans-serif;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #424143;
}
.product_large {
    height: 370px;
    width: 755px;
}
.product_large .product__photo {
    width: 100%;
    height: 100%;
    margin: 0;
}
.product_large .product__cnt {
    color: #fff;
    display: table;
    height: 100%;
    left: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.product_large .product__holder {
    position: relative;
    z-index: 2;
    display: table-cell;
    padding: 40px 0;
    vertical-align: middle;
    width: 100%;
}
.product_large .product__cnt-bg,
.product__recom .product__cnt-bg {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -ms-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -o-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    background: url(img/none.png);
}
.product_large:hover .product__cnt-bg,
.product__recom:hover .product__cnt-bg {
    background: #000;
    opacity: 0.3;
    filter: alpha(opacity='30');
}

.product_large .product__label {
    left: 0;
    position: absolute;
    top: -12px;
    width: 100%;
}
.product_large .product__label em {
    border-color: #fff;
    color: #fff !important;
}
.product_large .product__ttl {
    font-size: 36px;
    font-family: 'proxima_nova_thextrabold', Arial, sans-serif;
    line-height: 36px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.product_large .product__txt {
    font-size: 18px;
    line-height: 20px;
    color: #fff;
}
.product_large:hover .product__txt {
    text-decoration: none;
    border-bottom: 0;
    padding-bottom: 1px;
    color: #fff;
}
.product_large:hover .product__img,
.product__recom:hover .product__img {
    opacity: 1;
    filter: alpha(opacity='100');
}


                
// replace custom forms
var initForms = function() {
    jcf.customForms.replaceAll();
}

function initPage(){
    initOpenClose();
    initBrandPopup();
    initForms();
    initLazyload();
}

// open-close init
function initOpenClose() {
    jQuery('div.open-close').openClose({
        activeClass: 'active',
        opener: '.opener',
        slider: '.slide',
        animSpeed: 400,
        effect: 'slide'
    });
}

function initBrandPopup(){
    $(".brand-list__list li").hover(function(){
        var windowW = (window.innerWidth ? window.innerWidth :    (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth)),
            popupW = $(".brand-list__popup").width(),
            liCoord = $(this).offset().left;

        if (popupW > (windowW - liCoord -150)){
            $(".brand-list__popup").addClass("brand-list__popup_left");
        }
        else {
            $(".brand-list__popup").removeClass("brand-list__popup_left");
        }
    });
}


// Lazy load fo images
var initLazyload = function() {
    $(".img-lazy").lazyload({
        effect: "fadeIn",
        skip_invisible : false
    });
}

$(function(){

    // Detect mobile device
    function detectmob() {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
            || navigator.userAgent.match(/Windows Phone/i)
            ){
            $('.topbar').css('position', 'static');
            $('.head__container').css('padding-top', '0');
            $('.brand-list__popup').css('display', 'none');
            $('#jsFixedAside').addClass('jsFixedAside_mobile');
            $('.jsFixedShare ').addClass('jsFixedShare_mobile');
            return true;
        } else {
            return false;
        }
    }
    detectmob();
    
});

if(window.addEventListener) window.addEventListener('load', initPage, false);
else if(window.attachEvent) window.attachEvent('onload', initPage);