Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Техномарт</title>
​
</head>
<body>
    <header class="main-header">
            <div class="header-top">
                <div class="container">
                    <div class="header-logo">
                        Техномарт
                    </div>
                    <div class="header-search">
                        <input type="search" name="search">
                    </div>
                    <div class="header-bookmarks">
                        Закладки: 0
                    </div>
                    <div class="header-basket">
                        Корзина: 0
                    </div>
                    <button>Оформить заказ</button>
                </div>
            </div>
            <div class="container">
                <div class="header-description">
                    Интернет-магазин
                    строительных материалов
                    и инструментов для ремонта
                </div>
                <div class="header-contacts">
                    <span class="header-number">+7 (812) 555-05-55</span>
                    <span class="header-adress">г. Санкт-Петербург, ул. Б. Конюшенная, д. 19/8</span>
                </div>
                <a href="#" class="login">Войти</a>
                <a href="#"  class="singup">Регистрация</a>
            </div>
            <nav class="main-navigation">
                <ul>
                    <li>Главная</li>
                    <li>Компания</li>
                    <li>Каталог</li>
                    <li>Новости</li>
                    <li>Спецпредложения</li>
                    <li>Доставка</li>
                    <li>Контакты</li>
                </ul>
            </nav>
    </header>
    <main>
        <section class="range">
            <div class="range-item">
                <h3 class="range-item-title">Материалы</h3>
                <a href="" class="item-btn">На любой вкус</a>
            </div>
            <div class="range-item">
                <h3 class="range-item-title">Инструмент</h3>
                <a href="" class="item-btn">На все случаи</a>
            </div>
            <div class="range-item">
                <h3 class="range-item-title">Техника</h3>
                <a href="" class="item-btn">Для стройки</a>
            </div>
            <div class="range-slider">
                <div class="slider-transparent">
                    <h2>Перфораторы</h2>
                    <p>Настоящие мужские игрушки</p>
                </div>
                <a href="#" class="slider-btn btn-red">Открыть каталог</a>
            </div>
            <div class="range-item">
                <h3 class="range-item-title">Скидки 50%</h3>
                <a href="" class="item-btn">На 350 товаров</a>
            </div>
            <div class="range-item">
                <h3 class="range-item-title">Доставка</h3>
                <a href="" class="item-btn">Бесплатно</a>
            </div>
        </section>
        <section class="product-one">
            <header class="product-header">
                <span class="product-title">Популярные товары:</span>
                <a href="#" class="product-more btn-red">Все популярные товары</a>
            </header>
            <div class="product-popular">
                <article class="product-popular-item">
                    <img src="" width="" height="" alt="">
                    <b></b>
                    <span class="last-price"></span>
                    <button class="price-btn"></button>
                </article>
                <article class="product-popular-item">
                    <img src="" width="" height="" alt="">
                    <b></b>
                    <span class="last-price"></span>
                    <button class="price-btn"></button>
                </article>
                <article class="product-popular-item">
                    <img src="" width="" height="" alt="">
                    <b></b>
                    <span class="last-price"></span>
                    <button class="price-btn"></button>
                </article>
                <article class="product-popular-item">
                    <img src="" width="" height="" alt="">
                    <b></b>
                    <span class="last-price"></span>
                    <button class="price-btn"></button>
                </article>
            </div>
        </section>
        <section class="product-two">
            <header class="product-header">
                <span class="product-title">Популярные производители:</span>
                <a href="#" class="product-more btn-red">Все производители</a>
            </header>
            <div class="product-popular">
                <article class="product-popular-item">
                    <img src="" width="" height="" alt="">
                    
                </article>
                <article class="product-popular-item">
                    <img src="" width="" height="" alt="">
                    
                </article>
                <article class="product-popular-item">
                    <img src="" width="" height="" alt="">
                    
                </article>
                <article class="product-popular-item">
                    <img src="" width="" height="" alt="">
                    
                </article>
            </div>
        </section>
        <section class="servises">
            <div class="servises-header"> 
                <h2 class="services-title">Сервисы</h2>
                <p>Хороший интернет-магазин отличается от плохого не только ценами!
                    Мы стараемся изо всех сил, чтобы сделать ваши покупки приятными.
                </p>
            </div>
            <div class="servises-delivery1">
                <ul>
                    <li>Доставка</li>
                    <li>Гарантия</li>
                    <li>Кредит</li>
                </ul>
            </div>
            <div class="servises-delivery2">
                <h2>Доставка</h2>
                <p>Мы с удовольствием доставим ваш товар прямо 
                    к вашему подъезду совершенно бесплатно!
                    Ведь мы неплохо заработаем, 
                    поднимая его на ваш на этаж!</p>
            </div>
        </section>
        <section class="block-info">
            <div class="block-info-left">
                <h2>Компания "Техномарт"</h2>
                <p>Настоящий мужской шоппинг начинается здесь! Огромный выбор товаров для ремонта и строительства не оставит равнодушными любителей сэкномить на гастарбайтерах.</p>
                <p>Мы можем доставить ваш товар в самые отдаленные точки России!
                    Техномарт работает со многими транспортными компаниями: </p>
                <ul>
                    <li>Деловые линии</li>
                    <li>Автотрейдинг</li>
                    <li>ЖелДорЭкспедиция</li>
                </ul>
                <a href="#" class="block-info-btn btn-red">Подробнее о компании</a>
            </div>
            <div class="block-info-right">
                <h2>Контакты</h2>
                <p>Вы можете забрать товар сами, 
                    заехав в наш офис:</p>
                <div class="main-map">
                    <img src="" width="" height="" alt="">
                </div>
                <a href="#" class="block-info-btn btn-red">Заблудились? Напишите нам!</a>
            </div>
        </section>
    </main>
    <footer class="main-footer">
        <section class="footer-top">
        <div class="footer-logo">Техномарт</div>
        <ul>
            <li>Компания</li>
            <li>Новости</li>
            <li>Каталог</li>
            <li>Доставка</li>
            <li>Контакты</li>
        </ul>
        </section>
        <section class="footer-middle">
        <div class="footer-adress">Техномарт</div>
        <ul>
            <li>Материалы</li>
            <li>Техника</li>
            <li>Инструмент</li>
            <li>Спецпредложения</li>
        </ul>
        </section>
        <section class="footer-bottom">
        <div class="footer-contacts">
            г. Санкт-Петербург, ул. Б. Конюшенная, д. 19/8
            +7 (812) 555-05-55
        </div>
        <div class="footer-social">
            <a href="#" class="footer-social-vk vk">ВК</a>
            <a href="#" class="footer-social-fb fb">ФБ</a>
            <a href="#" class="footer-social-inst inst">ИНСТ</a>
        </div>
        <address class="footer-copyright">
            <p>Обратная связь:<span class="footer-copyright-yellow">mail@htmlacademy.ru</span></p>
            <p>Разработано - <span class="footer-copyright-yellow">htmlacademy.ru</span></p>
        </address>
        </section>
    </footer>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers