г. Санкт-Петербург
Аа Версия для слабовидящих
г. Санкт-Петербург
8 (812) 409-38-78
  1. Главная
  2. Руководство по стилю
  3. Компоненты

Компоненты

Оформление файлов для скачивания

Свидетельство о присвоении ИНН
PDF 8 Кб Скачать
Показать код 
<div class="document-item">
    <span class="icon-pdf wrapper-icon"></span>
    <div class="inline-block">
        <div class="name"><a href="#" target="_blank">Свидетельство о присвоении ИНН</a></div>
        <div class="descript">
            <span>PDF  8 Кб</span>
            <a href="#" target="_blank">Скачать</a>
        </div>
    </div>
</div>

Варианты отображения изображений

Название изображения
Название изображения

Название изображения
Название изображения
Показать код 
<img src="/include/img/photo_history.jpg" alt="Название изображения" class="img-responsive">
<img src="/include/img/photo_history.jpg" alt="Название изображения" class="img-circle img-responsive">
<img src="/include/img/photo_history.jpg" alt="Название изображения" class="img-rounded img-responsive">
<img src="/include/img/photo_history.jpg" alt="Название изображения" class="img-thumbnail img-responsive">

Изображения с подписью

Денис Маргулин

Денис Маргулин

27.03.2018
Показать код 
<div class="review-item">
    <div class="media">
        <div class="pull-left media-left">
            <img class="media-object img-circle img-responsive" src="/include/img/worker_no92_92.jpg" alt="Денис Маргулин">
        </div>
        <div class="media-body">
            <h4 class="media-heading">Денис Маргулин</h4>
            <div class="media-descr">27.03.2018</div>
        </div>
    </div>
</div>

Первый состав правления
Показать код 
<div class="wrapper-img">
    <img src="/include/img/photo_history.jpg">Первый состав правления
</div>

Список элементов

Автоматизация торговли для розничной сети магазинов Нска
Автоматизация торговли для розничной сети магазинов Нска
Автоматизация торговли для розничной сети магазинов Нска подразумевала под собой комплексное решение задач по оснащению предприятия современным торговым оборудованием и программными инструментами.
Подробнее
Показать код 
<div class="object-list news-block">
    <div class="object-item news-item" id="">
        <div class="media">
            <div class="pull-left media-left">
                <a href="#" class="news-link">
                    <img class="media-object img-responsive" src="/include/img/banner_about.jpg" alt="Автоматизация торговли для розничной сети магазинов Нска">
                </a>
            </div>
            <div class="media-body">
                <a class="media-heading" href="#">Автоматизация торговли для розничной сети магазинов Нска</a>
                <div class="preview-text">
                    Автоматизация торговли для розничной сети магазинов Нска подразумевала под собой комплексное решение задач по оснащению предприятия  современным торговым оборудованием и программными инструментами. <br></div>
                <div class="wrapper-detail-link">
                    <a href="#" class="btn btn-clear detail-link">Подробнее</a>
                </div>
            </div>
        </div>
    </div>
</div>

Плитка элементов

12.12.2017
Реализован крупнейший проект по благоустройству

Благоустройство территории – это совокупность мероприятий, которые призваны сформировать на участке комфортную и привлекательную среду для деятельности.

12.12.2017
Наше участие в выставке-презентации "Наука-2017"

23-24 декабря в Москве состоялась V международная выставка-конференция "Наука-2017".

Показать код 
<div class="news-block">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-xs-6 col-xxs-12">
            <div class="thumbnail news-item">
                <a href='#' class='news-link'>
                    <img class='img-responsive' src="/include/img/news_no450_287.jpg" alt="">
                    <div class="date">12.12.2017</div>
                </a>
                <div class="caption">
                    <a class='news-name' href='#'>Реализован крупнейший проект по благоустройству</a>
                    <p>Благоустройство территории – это совокупность мероприятий, которые призваны сформировать на участке комфортную и привлекательную среду для деятельности.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xs-6 col-xxs-12">
            <div class="thumbnail news-item">
                <a href='#' class='news-link'>
                    <img class='img-responsive' src="/include/img/news_no450_287.jpg" alt="">
                    <div class="date">12.12.2017</div>
                </a>
                <div class="caption">
                    <a class='news-name' href='#'>Наше участие в выставке-презентации "Наука-2017"</a>
                    <p>23-24 декабря в Москве состоялась V международная выставка-конференция "Наука-2017".</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xs-6 col-xxs-12 hidden-sm hidden-xs">
            <div class="thumbnail news-item">
                <a href='#' class='news-link'>
                    <img class='img-responsive' src="/include/img/news_no450_287.jpg" alt="">
                    <div class="date">12.12.2017</div>
                </a>
                <div class="caption">
                    <a class='news-name' href='#'>Приняли участие в международной выставке</a>
                    <p>В период с 1 по 6 марта 2017г года в Нске на территории выставочной площадки России — НННХ прошла X Международная выставка высоких технологий.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Баннер на странице

Показать код 
<div class="banner-page">
	<div class="inline-block block-name">
		<div class="company-name">COMPANY</div>
		<div class="company-slogan">Мы делаем то, что любим</div>
	</div>
	<div class="inline-block block-img">
        <img src="<?=SITE_DIR?>include/img/banner_about.jpg" class="img-responsive">
	</div>
</div>

Вызов модального окна

Показать код 
<a href="#" class="modal-feedback btn btn-full" data-remote="false" data-toggle="modal" data-target="#modalExample">Показать</a>
<div class="modal fade" id="modalExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <div class="modal-name">Заголовок модального окна</div>
            </div>
            <div class="modal-body">
                Язык — это история народа. Язык — это путь цивилизации и культуры. Поэтому-то изучение и сбережение русского языка является не праздным занятием от нечего делать, но насущной необходимостью. 
            </div>
            <div class="modal-footer">
                <div class="text-right text-guide"><small>А.И. Куприн</small></div>
            </div>
        </div>
    </div>
</div>

Список преимуществ

Работаем в различных направлениях
Подробнее >
23
23 года на рынке услуг
Подробнее >
Постоянная динамика роста
Показать код 
<div class="advantages">
    <div class="block-icon-advant">
        <div class="row">
            <div class="col-sm-4 col-xs-6 item">
                <div class="icon-bag icon-color"></div>
                <div class="icon-text">Работаем в различных направлениях</div>
                <a href="#">Подробнее ></a>
            </div>
            <div class="col-sm-4 col-xs-6 item">
                <div class="icon-color">23</div>
                <div class="icon-text">23 года на рынке услуг</div>
                <a href="#">Подробнее ></a>
            </div>
            <div class="col-sm-4 col-xs-6 item">
                <div class="icon-chart icon-color"></div>
                <div class="icon-text">Постоянная динамика роста</div>
            </div>
        </div>
    </div>
</div>

Блок с контактами

Связь
Email comrany@comrany.ru
Телефон +7 (495) 000-00-00
Адрес
Юридический адрес 000000, Москва, ул. Самойловская, д. 12
Фактический адрес 000000, Москва, ул. Самойловская, д. 10
Часы работы с 10 до 20 часов (без выходных)
Показать код 
<div class="contacts-info">
    <div class="table-name">Связь</div>
    <table class="table table-clear table-contact">
        <tr>
            <td><span class="icon-email"></span> Email</td>
            <td><a href='mailto:comrany@comrany.ru'>comrany@comrany.ru</a></td>
        </tr>
        <tr>
            <td><span class="icon-telephone"></span>Телефон</td>
            <td><a href='tel:+74950000000'>+7 (495) 000-00-00</a></td>
        </tr>
    </table>
    <div class="table-name">Адрес</div>
    <table class="table table-clear table-address">
        <tr>
            <td>Юридический адрес</td>
            <td>000000, Москва, ул. Самойловская, д. 12</td>
        </tr>
        <tr>
            <td>Фактический адрес</td>
            <td>000000, Москва, ул. Самойловская, д. 10</td>
        </tr>
        <tr>
            <td>Часы работы</td>
            <td>с 10 до 20 часов (без выходных)</td>
        </tr>
    </table>
</div>

Табы

Битрикс24 — облачный сервис для командной работы, включающий систему управления взаимоотношениями с клиентами (CRM), интранет-портал, чат и менеджер задач; возможно подключение внешних провайдеров телефонии, почтового клиента, системы распознавания лиц и визиток. Разработчик и провайдер– российская компания 1С-Битрикс.

Вам не нужно ничего устанавливать и настраивать. Вы регистрируетесь - и сразу начинаете работать со своим корпоративным порталом.

Способы доставки
  • Доставка курьером
  • Почта России
  • Самовывоз
Способы оплаты
  • Наличные курьеру
  • Наложенный платеж
Показать код 
<div class="wrapper-tab-info tab-light">
    <ul class="nav nav-tabs nav-products">
        <li class="active "><a href="#tab_descr" data-toggle="tab">Описание</a></li>
        <li><a href="#tab_pay" data-toggle="tab">Доставка и оплата</a></li>
        <span class="menu-line" style=""></span>
    </ul>
</div>
<div class="tab-content tab-content-product">
    <div class="tab-pane fade  in active " id="tab_descr">
        <p>Битрикс24 — облачный сервис для командной работы, включающий систему управления взаимоотношениями с клиентами (CRM), интранет-портал, чат и менеджер задач; возможно подключение внешних провайдеров телефонии, почтового клиента, системы распознавания лиц и визиток. Разработчик и провайдер– российская компания 1С-Битрикс.</p>
        <p>Вам не нужно ничего устанавливать и настраивать. Вы регистрируетесь - и сразу начинаете работать со своим корпоративным порталом. </p>
    </div>
    <div class="tab-pane fade " id="tab_pay">
        <div class="info-name">Способы доставки</div>
        <ul>
            <li>Доставка курьером</li>
            <li>Почта России</li>
            <li>Самовывоз</li>
        </ul>
        <div class="info-name">Способы оплаты</div>
        <ul>
            <li>Наличные курьеру</li>
            <li>Наложенный платеж</li>
        </ul>
    </div>
</div>

Пагинация

Показать код 
<div class="wrapper-pagination">
    <ul class="pagination">
        <li class="active"><span class="">1</span></li>
        <li><a href="#" class="">2</a></li>
        <li><a href="#" class="">3</a></li>
        <li><a href="#" class="">4</a></li>
        <li><a href="#" class="">5</a></li>
    </ul>
</div>

Стикеры

Default Primary Success Info Warning Danger
Показать код 
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Аккордеон, вариант 1


Показать код 
<div class="panel-group panel-faq panel-clear" id="accordion">
	<div class="panel panel-default" id="">
		<div class="panel-heading">
			<div class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse_1" class="collapsed" aria-expanded="false">
					<div class="panel-head-icon"><span class="icon-add"></span></div>
					<div class="panel-head-name">
						<div class="job-name"><span>Вопрос 1.</span> Какой порядок заключения договора?</div>
                        <div class="job-descr">Зарплата по результатам собеседования, опыт работы: 1-3 года, образование: высшее, полная занятость, полный день</div>
					</div>
				</a>
			</div>
		</div>
		<div id="collapse_1" class="panel-collapse collapse" aria-expanded="false">
			<div class="panel-body">
				<div class="head-name">Ответ</div>
				Вы связываетесь с нами любым удобным для Вас способом: звонок по телефону, заявка на сайте либо можете оставить свой номер, и мы перезвоним.<br>
Затем мы бесплатно изучим спорную ситуацию, посмотрим документы, оценим перспективы.<br>
После мы направим коммерческое предложение с предварительными условиями работы по Вашему вопросу: объем услуг, их стоимость и срок их оказания.<br>
Если Вы соглашаетесь, то условия из коммерческого предложения переходят в договор оказания услуг.<br>
			</div>
		</div>
	</div>
	<div class="panel panel-default" id="">
		<div class="panel-heading">
			<div class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse_2" class="collapsed" aria-expanded="false">
					<div class="panel-head-icon"><span class="icon-add"></span></div>
					<div class="panel-head-name">
						<div class="job-name"><span>Вопрос 2.</span> Вы работаете в регионах РФ?</div>
					</div>
				</a>
			</div>
		</div>
		<div id="collapse_2" class="panel-collapse collapse" aria-expanded="false">
			<div class="panel-body">
				<div class="head-name">Ответ</div>
				Да, работаем. Группа компаний «COMPANY» имеет обширную сеть своих представителей по всей стране – от Калининграда до Хабаровска.<br>
Более подробная информация представлена в разделе «Контакты» на нашем сайте.
			</div>
		</div>
	</div>
	<div class="panel panel-default" id="">
		<div class="panel-heading">
			<div class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse_3" class="collapsed" aria-expanded="false">
					<div class="panel-head-icon"><span class="icon-add"></span></div>
					<div class="panel-head-name">
						<div class="job-name"><span>Вопрос 3.</span> Цена продукта на сайте указана с учетом НДС?</div>
					</div>
				</a>
			</div>
		</div>
		<div id="collapse_3" class="panel-collapse collapse" aria-expanded="false">
			<div class="panel-body">
				<div class="head-name">Ответ</div>
				Да, конечно, налог НДС включен в стоимость продаваемой продукции, если у вас есть вопросы или вы не являетесь плательщиком НДС, обратитесь за консультацией к вашему персональному менеджеру или в бухгалтерию нашей компании.</div>
		</div>
	</div>
</div>

Аккордеон, вариант 2

Показать код 
<div class="panel-group panel-faq panel-light" id="accordion">
    <div class="panel panel-default" id="">
		<div class="panel-heading">
			<div class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse_65" class="collapsed" aria-expanded="false">
					<div class="panel-head-icon"><span class="icon-add"></span></div>
					<div class="panel-head-name">Какой порядок заключения договора?</div>
				</a>
			</div>
		</div>
		<div id="collapse_65" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
			<div class="panel-body">
				Вы связываетесь с нами любым удобным для Вас способом: звонок по телефону, заявка на сайте либо можете оставить свой номер, и мы перезвоним.<br>
Затем мы бесплатно изучим спорную ситуацию, посмотрим документы, оценим перспективы.<br>
После мы направим коммерческое предложение с предварительными условиями работы по Вашему вопросу: объем услуг, их стоимость и срок их оказания.<br>
Если Вы соглашаетесь, то условия из коммерческого предложения переходят в договор оказания услуг.<br>
			</div>
		</div>
    </div>
    <div class="panel panel-default" id="">
		<div class="panel-heading">
			<div class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse_63" class="collapsed" aria-expanded="false">
					<div class="panel-head-icon"><span class="icon-add"></span></div>
					<div class="panel-head-name">Вы работаете в регионах РФ?</div>
				</a>
			</div>
		</div>
		<div id="collapse_63" class="panel-collapse collapse" aria-expanded="false">
			<div class="panel-body">
				Да, работаем. Группа компаний «COMPANY» имеет обширную сеть своих представителей по всей стране – от Калининграда до Хабаровска.<br>
Более подробная информация представлена в разделе «Контакты» на нашем сайте.
			</div>
		</div>
	</div>
	<div class="panel panel-default" id="">
		<div class="panel-heading">
			<div class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse_62" class="collapsed" aria-expanded="false">
					<div class="panel-head-icon"><span class="icon-add"></span></div>
					<div class="panel-head-name">Цена продукта на сайте указана с учетом НДС?</div>
				</a>
			</div>
		</div>
		<div id="collapse_62" class="panel-collapse collapse" aria-expanded="false">
			<div class="panel-body">
				Да, конечно, налог НДС включен в стоимость продаваемой продукции, если у вас есть вопросы или вы не являетесь плательщиком НДС, обратитесь за консультацией к вашему персональному менеджеру или в бухгалтерию нашей компании.
			</div>
		</div>
	</div>
</div>

Хронология

  • 1999 год
    Дата основании компании
    Иван Иванов совместно с Петром Петровым основывают компанию "COMPANY"
  • 2001 год
    Коллектив компании составляет 20 человек.
    Создана проектная группа, которая совместно с инженерами и рабочими вела разработку и внедрение производственных новаций.
  • 2006 год
    В штате уже 400 сотрудников.
    Мы провели первый крупнейший федеральный семинар
  • 2008 год
    За время существования COMPANY штат сотрудников превысил 500 человек. Наши сотрудники – это команда квалифицированных специалистов, которые являются профессионалами в своей области, имеют большой опыт и каждый день работают на развитие компании.
Показать код 
<ul class="timeline">
	<li>
		<div class="timeline-badge"></div>
		<div class="timeline-wrapper">
			<div class="timeline-panel">
				<div class="timeline-heading">
					<span class="big">1999</span> 
					<span class="small">год</span>
				</div>
				<div class="timeline-body"><b>Дата основании компании</b><br>Иван Иванов совместно с Петром Петровым основывают компанию "COMPANY"
				</div>
			</div>
		</div>
	</li>
	<li>
		<div class="timeline-badge"></div>
		<div class="timeline-wrapper">
			<div class="timeline-panel">
				<div class="timeline-heading">
					<span class="big">2001</span> 
					<span class="small">год</span>
				</div>
				<div class="timeline-body">Коллектив компании составляет 20 человек.<br>Создана проектная группа, которая совместно с инженерами и рабочими вела разработку и внедрение производственных новаций.</div>
			</div>
		</div>
	</li>
	<li>
		<div class="timeline-badge"></div>
		<div class="timeline-wrapper">
			<div class="timeline-panel">
				<div class="timeline-heading">
					<span class="big">2006</span> 
					<span class="small">год</span>
				</div>
				<div class="timeline-body">В штате уже 400 сотрудников.<br>Мы провели первый крупнейший федеральный семинар</div>
			</div>
		</div>
	</li>
	<li>
		<div class="timeline-badge"></div>
		<div class="timeline-wrapper">
			<div class="timeline-panel">
				<div class="timeline-heading">
					<span class="big">2008</span> 
					<span class="small">год</span>
				</div>
				<div class="timeline-body">За время существования COMPANY штат сотрудников превысил 500 человек. Наши сотрудники – это команда квалифицированных специалистов, которые являются профессионалами в своей области, имеют большой опыт и каждый день работают на развитие компании.</div>
			</div>
		</div>
	</li>
</ul>

Набор изображений-заглушек


  • 270 × 209
    /include/img/contact_no.jpg
  • 580 × 325
    /include/img/banner_page.jpg
  • 450 × 287
    /include/img/news_no.jpg
  • 270 × 355
    /include/img/worker_no.jpg
  • 300 × 295
    /include/img/section_no.png
  • 570 × 570
    /include/img/product_no.png