viz 2.6

In this example below you will see how to do a viz 2.6 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by barnaul-online, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright barnaul-online ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>viz 2.6</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- <!DOCTYPE html> -->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>index 4.2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<head>
  <meta charset="UTF-8">
  <title>Визитница - Барнаул онлайн</title>
    <meta name="author" content="barnaul.online"> <!--  Имя автора документа.  -->
<meta name="description" content="Хороший повод создать свою визитку"> <!--  Описание текущего документа.(в поисковеке под загаловком)  -->
  <meta name="keywords" content="визитница, эхо-репитер, радио-микс, услуги, установка, создание, Барнаул, заказать, найти организацию "> <!--   Список ключевых слов, встречающихся на странице. -->
    <link rel="shortcut icon" type="image/x-icon" href="http://evrostd.ru/bitrix/templates/electro/images/favicon.ico.ico">
  <link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111"> 
 <meta name="viewport" content="width=device-width"><!--адаптация для мобил-->  
</head>
<!--▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒-->
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js" type="text/javascript"></script><!-- логика cat -->
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'><!-- иконки fa -->
<link rel="stylesheet" href="https://i.icomoon.io/public/234ccb3045/Lineariconsall/style.css"><!-- иконки icon -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script><!-- логика кнопак бок.меню-->
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script><!-- логика кнопак бок.меню-->

  
 
<div class="page tabs" >

  <span class="menu_toggle">
    <i class="menu_open fa fa-bars fa-lg"><!-- icon-menu  --></i>
    <i class="menu_close fa fa-times fa-lg"></i> 
  </span>
  
<div class="bigBox str-close"> 
  <ul class="menu_items navigation" >
<!--     <li class="active" ><a class='str-close' href="#" id="str1"><i class="icon icon-bubble-question fa-2x"></i> смысол размещения</a></li> -->
    <li class="filter iso"> 
      <button class="active-filter" data-filter="all"><div class="x2 icon-select"></div>ВСЕ</button>
    <button data-filter="cat1" data-child=".iso-sub-1"><div class="x2 icon-dinner2"></div>ПОЕСТЬ</button>
    <button data-filter="cat2" data-child=".iso-sub-2"><div class="x2 icon-briefcase"></div>ТУРИЗМ</button>
    <button data-filter="cat3" data-child=".iso-sub-3"><div class="x2 icon-car2"></div>АВТО</button>
    <button data-filter="cat4" data-child=".iso-sub-4"><div class="x2 icon-ping-pong"></div>ДОСУГ</button>
    <button data-filter="cat5" data-child=".iso-sub-5"><div class="x2 icon-home5"></div>ДЛЯ ДОМА</button>
    <button data-filter="cat6" data-child=".iso-sub-6"><div class="x2 icon-cart"></div>МАГАЗИНЫ</button>
    <button data-filter="cat7" data-child=".iso-sub-7"><div class="x2 icon-users"></div>ОБЩЕСТВО</button></li>
<!--     <li><a  class='str-close' href="#"><i class="icon icon-new-tab fa-2x"></i> мы создаём сайты</a></li> -->
  </ul>
<!-- icon-new-tab -->
  <main class="content_nabok">
    <div class="content_inner">
 <center>    <img  alt="barnaui.online" style=" width:250px; height:54px; float:center; margin: 3em 0; "
           src="http://barnaul.online/img/logo_barnaul_bel.svg"></center> 
      
<!--✪✪✪✪✪✪✪✪✪✪[ ФИЛЬТР ВИЗИТОК ]✪✪✪✪✪✪✪✪✪✪-->
 <!--   <div class="filter iso-sub-1">
    <a href="#" data-filter="cat1">ВСЕ ТОВАРЫ</a>
    <a href="#" data-filter="cat11">cat11</a>
    <a href="#" data-filter="cat12">cat12</a>
  </div>
  <div class="filter iso-sub-3">
    <a href="#" data-filter="cat2">ВСЕ УСЛУГИ</a>
    <a href="#" data-filter="cat21">ТРАНСПОРТНЫЕ ПЕРЕВОЗКИ</a>
    <a href="#" data-filter="cat22">cat22</a>
  </div>   -->


<!--✪✪✪✪✪✪✪✪✪✪[ ПРИВЕТСТВИЕ НАД ВИЗИТКАМИ ]✪✪✪✪✪✪✪✪✪✪-->  
  <a href="all"  id="str-prevet-rezult" class="privet" data-filter="all">
    <canvas class="strel-1"id="" width="450" height="150" style="position: absolute; z-index: 11; margin: -45px 0px 0px -25px;">
</canvas> <p style="line-height: 17px; color:#eb7e14; position:absolute; z-index:10; margin: 60px 0px 0px 200px;/* ↕ 0 0 ↔ */ transform:rotate(5deg);"> ЗДЕСЬ МЕНЮ САЙТА  </p>
    <canvas class="strel-2"id="" width="450" height="450" style="position: absolute; z-index: 11; margin: -10px 0px 0px -130px;/* ↕ 0 0 ↔ */">
</canvas> <p style="line-height: 17px; color:#eb7e14; position:absolute; z-index:10; margin: 380px 0px 0px 5px;/* ↕ 0 0 ↔ */transform:rotate(-4deg);"> ВЫБЕРИТЕ КАТЕГОРИЮ ПОИСКА </p>  
   
 <figure>  <fig2></fig2><fig3></fig3>
    <fig4>
<canvas class="strel-3"id="" width="450" height="450" style="z-index: 15; margin: 200px -100px;/* ↕ ↔ */"> 
</canvas> <p style="line-height: 17px; color:#eb7e14;  z-index:10; margin: -500px 100px;/* ↕ ↔ */transform:rotate(3deg);"> ВЫБЕРИТЕ ИНТЕРЕСУЮЩУЮ ВАС ВИЗИТКУ </p> </fig4>
    
    
    <img src="https://i1.wp.com/xn----7sbajzfbakh2epf6d3d.xn--p1ai/wp-content/uploads/2015/02/vizitka-s-fonom-djins.jpg1">
   
   </figure>     
    </a>

  
 <div class="container ">
   
<!--================================================-->   
<article class="">  
			<a href="#" data-cat="news" data-state="vic" style=" background-color:#333; border:2px solid #fff;" >
         <span class="icon icon-plus-circle fa-5x "style="width:208px; height:60px;display: block; margin: 50px 85px; color:#888;"></span><i style=" height:30px; margin: 0px 0px 0px 20px; color:#888;font-size:13px" >ДОБАВИТЬ ВАШУ ВИЗИТКУ</i></a>
			<div> 
<!--         <a href="http://barnaul.online" target="_blank">barnaul.online
</a> -->
				<i>выберите тарифный план для расположения вашей визитки в нашей визитнице ... имейте в виду, что визитка без сайта: НЕ РАЗМЕЩАЕТСЯ ! </i> 
   <div class="tarif">
  
<div class="plan"><!-- ТАРИФ 1 --> <header>
      <h3 class="plan-title">Хочу визитку</h3><div class="plan-cost"><br><span class="plan-price">300</span><br>
      <span class="plan-type">руб.</span></div> </header>
    <ul class="plan-features">
      <li title="Вы пресылаете фото своей визитки нам по почте">Ваша визитка </li>
      <li title="Мы у себя размещаем Вашу информацию, с уже созданным Вами сайтом, с уже заригестрированным Вами доменом (за домен плотите регистратору)">Ваш сайт и домен </li>
      <li title="В течении 1...2 дней мы размещаем ваши контактные данные, в нашей визитнице">Размещаем на 1 месяц</li>
      <li  title="Наша рекламма на вашем сайте отсутствует">Ваш сайт без рекламмы </li>
      <li>Размещение роботом</li>
      <li>Без обратной связи</li>
    </ul>  <div class="plan-select"><a href="">Подробней на нашем форуме</a></div>
  </div>
  
<div class="plan"><!-- ТАРИФ 2 --> <header>
      <h3 class="plan-title">Хочу домен</h3><div class="plan-cost"><br><span class="plan-price">2 000</span><br>
      <span class="plan-type">руб.</span></div> </header>
    <ul class="plan-features">
      <li title="Вы пресылаете фото своей визитки нам по почте">Ваша визитка</li>
      <li title="Мы у себя размещаем Ваш, уже готовый сайт и даём ему домен 3-го уровня (например bisness.barnaul.online, где 'bisness' это ваше имя-домен)">Ваш сайт, наш домен</li>
      <li title="В течении 1...2 дней мы размещаем ваши контактные данные, в нашей визитнице">Размещаем на 12 месяцев</li>
      <li  title="На вашем сайте размещается 'мини-визитница' с визитками и\или наша небольшая рекламма">На сайте есть наша рекламма </li>
      <li>Размещение роботом</li>
      <li title="Ваши клиенты могут оставить или прочитать, публичную информацию о(для) вашей компании">Обратная связь через форум</li>
    </ul>  <div class="plan-select"><a href="">Подробней на нашем форуме</a></div>
  </div>
 
  <div class="plan"> <!-- ТАРИФ 3 --> <header>
      <h3 class="plan-title">Хочу сайт</h3><div class="plan-cost"><span class="plan-type">от</span><br><span class="plan-price">5 000</span><br>
      <span class="plan-type">руб.</span></div> </header>
    <ul class="plan-features">
      <li title="Вы пресылаете фото своей визитки нам по почте">Ваша визитка</li>
      <li title="Мы полностью создаём для вас простой, одностроничный сайт (сайт-визитку, лэндинг и т.д.) с минимумом лишней информации">Наш простой сайт и домен </li>
      <li  title="В течении 2...10 дней мы создаём сайт и размещаем ваши контактные данные, в нашей визитнице">Размещаем на 12 месяцев</li>
      <li  title="На вашем сайте размещается 'мини-визитница' с визитками и\или наша небольшая рекламма">Есть наша рекламма </li>
      <li>Задействован 1 веб-дизайнер</li>
      <li title="Ваши клиенты могут оставить или прочитать, публичную информацию о(для) вашей компании на форуме, либо связаться с вами по рации">Форум + радио-позывной</li>
    </ul>  <div class="plan-select"><a href="">Подробней на нашем форуме</a></div>
  </div>
  
  <div class="plan featured"><!-- ТАРИФ 4 --> <header>
      <h3 class="plan-title">Хочу всё</h3><div class="plan-cost"><span class="plan-type">от</span><br><span class="plan-price">10 000</span><br>
      <span class="plan-type">руб.</span></div> </header>
    <ul class="plan-features">
      <li title="Создаём дизайн визитки и размещаем в нашей визитнице">Делаем визитку</li>
      <li title="Мы полностью создаём для вас одностроничный сайт (сайт-визитку, лэндинг и т.д.) с минимумом лишней информации">Наш продуманный сайт и домен </li>
      <li  title="В течении 5...20 дней мы создаём сайт и размещаем ваши контактные данные, в нашей визитнице">Размещаем на 12 месяцев</li>
      <li>Рекламма по вашему желанию </li>
      <li>Трудятся веб-разработчики</li>
      <li title="Обратная связь через форум, и на ваше авто клеим наклейку с вашим радио-ником связи (Си-Би 22 канал FM) для удобной связи с вами.">форум + клеим позывной</li>
    </ul>  <div class="plan-select"><a href="">Подробней на нашем форуме</a></div>
  </div> 
    
  <div class="plan"><!-- ТАРИФ 5 --> <header>
      <h3 class="plan-title">Хочу всех</h3><div class="plan-cost"><span class="plan-type">от</span><br><span class="plan-price">25 000</span><br>
      <span class="plan-type">руб.</span></div> </header>
    <ul class="plan-features">
      <li title="Создаём дизайн визитки, размещаем в нашей визитнице и тиражируем на бумаге">Делаем и печатаем визитки</li>
      <li  title="Мы полностью создаём для вас сложный сайт продаж(интернет-магазин,  т.д.)">Наш сайт продаж и наш домен </li>
      <li title="В течении 15...30 дней мы создаём сайт и размещаем ваши контактные данные, в нашей визитнице">Размещаем на 12 месяцев</li>
      <li>Рекламма по вашему желанию </li>
      <li>В деле все наши специалисты</li>
      <li title="На ваше авто усанавливаем Си-Би мини-транслятор и клеим наклейку с вашим радио-ником связи (подробней на сайте 22.barnaul.online) так-же имеется пост посвещённый вашей организации,на нашем форуме.">Рация и позывной в подарок</li> 
    </ul>  <div class="plan-select"><a href="">Подробней на нашем форуме</a></div>
   </div>
 </div>
</div>
</article>
   
<!--✪✪✪✪✪✪✪✪✪✪[ ВИЗИТКИ ]✪✪✪✪✪✪✪✪✪✪-->     
		<article class="">
			<a href="#" data-cat="columns" data-state="nat">
        <img src="http://barnaul.online/img/vis300x172.png"><i>музыка + визитница + радио связь</i><b>Барнаул.ОНЛАЙН</b></a>
			<div> <div class="details"> <div class="bio">
    				<p>УДОБНАЯ ВИЗИТНИЦА В КАЖДОМ КАРМАНЕ
Все сталкивались с ситуацией, когда нужно срочно вызвать такси или мастера, заказать продукты птания, а под рукой нет контактных данных, приходилось тратить время на поиск информации и набор набор номера - barnaul.online лешон всех этих недостатков, достаточно зайти в нужную категорию и кликнуть по визитке.
</p><p>
ЭФФЕКТИВНЫЙ СПОСОБ ПРИВЛЕЧЕНИЯ КЛИЕНТОВ
Приемущества системы очевидны: отсутствуют затраты на расходные материалы, визитка не портится со временем, не теряется, как это бывает с бумажными аналогами. О ваших товарах и услугах узнаёт неограниченное число потенциальных клиентов. Визитка на barnaul.online доступна в любое время дня и ночи.
</p><p>
ПРОДВИГАЙ БИЗНЕС В СЕТИ
Сайт-визитка - небольшой информационный сайт, который позволит опубликовать информацию о компании, контактные данные, подробности об услугах и ценах, фотографии с примерами выполненных работ. Используйте интернет не только как способ общения, поиска информации, но и как средство для привлечения новых клиентов и деловых партнеров. Сайт- визитка - это хороший старт, поддержка для малого  и среднего бизнеса</p>
<br><a href="http://barnaul.online" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div>
        
    		  <div class="social"> <b>Контакты:</b> 
				   <ul> 
             <li> <a class="kontakt-sin icon-telephone" href="tel:+73852250569">тел. 25-05-69</a> </li>
             <li> <a class="kontakt-gol icon-antenna" href="mailto:cifrodom@mail.ru">барон (позывной на 22FM Си-Би)</a> </li>
				     <li> <a class="kontakt-zel icon-envelope" href="mailto:webmaster@barnaul.online">webmaster@barnaul.online</a> </li>
             <li> <a class="kontakt-orz icon-link2" href="http://barnaul.online" target="_blank">barnaul.online</a> </li>  
				   </ul> 
				  </div>
				</div>
			</div> 
		</article>
<!--================================================--> 
   <!--================================================--> 
   <!--================================================   
		<article class="cat1 cat7 cat4 cat21 ">
			<a href="#" data-cat="features" data-state="vic">
        <img src="http://radio.barnaul.online/vizitka.jpg"><i>живая радио связь Барнаула</i><b>Радио-микс в дом и авто</b></a>
			<div> <div class="details"> <div class="bio">
    				<p>Очередной проект от barnaul.online, позволяющий быть в курсе происходящего в городе, слушая при этом качественную, подобранную именно для вас, лутшими ди-джеями страны музыку.</p>
        <p>Просто включите наш радио-микс и слушайте информацию о дорогах и пробках, авариях, опасностях, засадах полиции, цены на заправках и прочих событиях, от других водителей города. Кроме того, вы можете общаться о чём угодно и с кем угодно, используя для передачи вашей речи в эфир нашего радио-микса , си-би рацию или приложение для смартфонов Zello.</p>
        <p>( Инструкцию по подключению читайте на нашем сайте. )</p>
<br><a href="http://radio.barnaul.online" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div> <div class="social"> <b>Контакты:</b>
				   <ul> 
             <li> <a class="kontakt-sin icon-telephone" href="#">тел. 25-05-69</a> </li>
				     <li> <a class="kontakt-zel icon-envelope" href="#">radio @ barnaul.online</a> </li>
				     <li> <a class="kontakt-orz icon-link2" href="http://radio.barnaul.online" target="_blank">radio.barnaul.online</a> </li>
				   </ul>
				  </div>
				</div>
			</div>
		</article>-->
<!--================================================cifrodom-->   
		<article class="cat5">
			<a href="#" data-cat="columns" data-state="nat">
        <img src="http://cifrodom.barnaul.online/vizitka.jpg"><i>Группа специалистов</i><b>Цифровой ДОМ</b></a>
			<div> <div class="details"><div class="bio">
       <video autoplay loop muted style=" position: relative;padding:0;margin:-25px 0;" > 
			        	<source src="http://cifrodom.barnaul.online/mult.mov" type="video/mp4"/></video>
      <br/>
    				<p> Мы осуществляем ремонт и установку коллективных и индивидуальных антенн, для приёма 15...20...150 и более ТВ каналов как с абонентской, так и без абонентской платы (эфирные-аналоговые 15 каналов, эфирные-цифровые 20 каналов и т.д.), а также любых спутниковых комплектов ( например: Триколор, НТВ+, Телекарта, МТС, Хот-Бирд, Ямал и т.д.). </p><p>Для Вас подборём и установим антенну и оборудование радио-связи (рации Си-Би, LPD, VHF и др...) или доступа в интернет (Спутниковые, Мобильные 3G\4G(LTE), Wi-Fi, Wi-Max и др..).</p><p>Нами проектируются и монтируются, малые и большие сети видеонаблюдения, как для дачи, дома, квартиры, так и для промышленных обьектов, складов, оффисов, что способствует развитию вашего бизнеса. Обиспечивается система удалённого (с мобильных устройств) просмотра, прослушивания и управления через интернет.</p><p> При необходимости наши мастера смонтируют систему контроля доступа к обьекту, любой сложности ( электро-замки, домофоны, видео-домофоны, шлакбаумы, эл.варота и т.д.).</p>
<br><a href="http://cifrodom.barnaul.online" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div> <div class="social"> <b>Контакты:</b>
				   <ul> 
             <li> <a class="kontakt-sin icon-telephone" href="tel:+73852250569">тел. 25-05-69</a> </li>
				     <li> <a class="kontakt-gol icon-antenna" href="mailto:cifrodom@mail.ru">цифродом (позывной на 22FM Си-Би)</a> </li>
             <li> <a class="kontakt-zel icon-envelope" href="mailto:cifrodom@mail.ru">cifrodom@mail.ru</a> </li>
             <li> <a class="kontakt-zlt icon-bubble" href="https://barnaul-online.wixsite.com/forum/forum/vizitnica-barnaul-online/sayt-montazhnikov-cifrovoy-dom">cifrodom (на нашем форуме)</a> </li>
				     <li> <a class="kontakt-orz icon-link2" href="http://cifrodom.barnaul.online" target="_blank">cifrodom.barnaul.online</a> </li>
				   </ul>
				  </div>
				</div>
			</div>
		</article>
<!--================================================ ARK-Barnaul -->   
		<article class="cat3 cat7">
			<a href="#" data-cat="features" data-state="vic">
        <img src="http://ark.barnaul.online/vizitka.jpg"><i>Эхо-репитер (повторитель) для раций</i><b>АРК Барнаул</b></a>
			<div> <div class="details"> <div class="bio">
    				<p>Форум от АРК "Барнаул", то-есть создателей эхо-репитеров 11 канала (сетка С) для автамобильных Си-Би раций, и 69 канала (субтон 123) для переносных LPD рацийрадиостанций.</p>
        <p>АРК "Барнаул" был основан инициативной группой форумчан drom.ru 7 ноября 2010 года, главной целью развития канала является сводки о дорожной обстановке в г.Барнауле, информационная поддержка, помощь при экстренных ситуациях на дорогах, популяризация гражданского диапазона и самое главное сплочение корреспондентов в дружественный коллектив.</p>
        <p>!!! Категорически запрещается использовать репитер в коммерческих целях. !!!</p>
<br><a href="http://ark.barnaul.online"  target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div> <div class="social"> <b>Контакты:</b>
				   <ul> 
				     <li> <a class="kontakt-zel icon-envelope" href="mailto:ark@barnaul.online">ark @ barnaul.online</a> </li>
				     <li> <a class="kontakt-orz icon-link2" href="http://ark.barnaul.online" target="_blank">ark.barnaul.online</a> </li>
				   </ul>
				  </div>
				</div>
			</div>
		</article>
<!--================================================ simbezlimit -->   
		<article class="cat3 cat5">
			<a href="#" data-cat="columns" data-state="nat">
        <img src="http://simbezlimit.barnaul.online/vizitka.jpg"><i>4G без ограничений по трафику и месту</i><b>Инет без всяких НЕТ!</b></a>
			<div> <div class="details"> <div class="bio">
    				<p>● Качай что угодно и сколько угодно, без ограничений по трафику<br/>● Всегда с тобой, в любом регионе России<br/>● Пользуйся интернетом дома, в машине, на даче, на работе ...<br/>● Пользуйся на смартфоне, и раздавай с него-же безлимитный интернет по Wi-Fi<br/>● Переставь SIM-карту в другое устройство (телефон, планшет, USB-модем) и интернет уже там!<br/></p><p>Закажите в нашем онлайн-магазине, себе безлимитную, непубличную сим карту Билайн или Мегафон для интернет связи 4G(LTE).</p><p>Здесь предоставляются "реальные" тарифы (сим-карты) - безлимитного интернет для планшета, модема, роутера (в авто, на дачу, в офис или для дома) по всей России, без каких-либо ограничений.</p><p>Техническая поддержка данных сим-карт с эксклюзивными интернет тарифами, осуществляется операторами так же как и по обычным тарифам.</p>
<br><a href="http://simbezlimit.barnaul.online" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div> <div class="social"> <b>Контакты:</b>
				   <ul>  
             <li> <a class="kontakt-sin icon-telephone" href="tel:+73852250569">тел. 25-05-69</a> </li>
				     <li> <a class="kontakt-zel icon-envelope" href="mailto:cifrodom@mail.ru">cifrodom@mail.ru</a> </li>
				     <li> <a class="kontakt-orz icon-link2" href="http://simbezlimit.barnaul.online" target="_blank">simbezlimit.barnaul.online</a> </li>
				   </ul>
				  </div>
				</div>
			</div>
		</article>

 <!--================================================gladim   
			<article class="cat5">
			<a href="#" data-cat="columns" data-state="nat">
        <img src="http://gladim.barnaul.online/vizitka.jpg"><i>встроенные, удобно-складывающие</i><b>Гладильные доски</b></a>
			<div> <div class="details"> <div class="bio">
    				<p>В типовых квартирах крайне мало свободного места, и хранить гладильные доски неудобно. Их нужно либо каждый раз раскладывать, либо оставлять на месте, тем самым, отдавая много полезного пространства..</p><p>В таких случаях находкой для хозяйки , является "встроенная гладильная доска", у нас они производятся в разном исполнении и у каждого вида есть свои особенности, свои плюсы и минусы. Однако самым популярным видом является скрытая "откидная доска". Она удобна в эксплуатации, гармонично смотрится в интерьере, не занимает много места, ее удобно складывать. </p><p>Скрытые откидные доски, как правило, закрыты зеркалом. Оно отодвигается в сторону, а в нише расположена гладильная доска с механизмом. На месте зеркала могут стоять и другие предметы, например, картины или просто стенка. .</p>
<br><a href="http://gladim.barnaul.online" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div>
    		  <div class="social"> <b>Контакты:</b> 
				   <ul>  
             <li> <a class="kontakt-sin icon-telephone" href="tel:+79132474047">тел. +7-913-247-4047</a> </li>
				     <li> <a class="kontakt-zel icon-envelope" href="mailto:gladim@barnaul.online">gladim@barnaul.online</a> </li>
				     <li> <a class="kontakt-orz icon-link2" href="http://gladim.barnaul.online" target="_blank">gladim.barnaul.online</a> </li>
				   </ul>
				  </div>
				</div>
			</div>
		</article>-->
   
 <!--================================================Облепиха--> 
	<article class="cat1 cat2 cat6"> 
			<a href="#" data-cat="columns" data-state="nat">
        <img src="http://oblepiha.barnaul.online/vizitka.jpg"><i>Придорожный гостиничный комплекс</i><b>Облепиха</b></a>
			<div> <div class="details"> <div class="bio">
    				<p>Приглашаем Вас в придорожный гостиничный комплекс "Облепиха", открытый в январе 2014 г. Мы расположены на 212 км. Чуйского тракта, на федеральной трассе Р256 (М52), в 2 км. от г. Новоалтайска и в 15 км. от г. Барнаула (развязка Барнаул-Бийск). Наша основная задача - обеспечить Вам комфортный отдых во время автопутешествия по дорогам Алтайского края. </p><p> В «Облепихе» Вы гарантированно можете рассчитывать на высококачественное обслуживание: комфортный гостиничный номер, со всеми удобствами, вкусную и разнообразную кухню и широкий комплекс других услуг, необходимых в дороге.</p>
<br><a  href="http://облепиха22.рф/" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div>
    		  <div class="social"> <b>Контакты:</b>
				   <ul>  
             <li> <a class="kontakt-sin icon-telephone" href="tel:+73853245559">тел. +7 (3853) 24-55-59</a> </li>
             <li> <a class="kontakt-sin icon-telephone" href="tel:+79069435500">тел. +7 906-943-55-00</a> </li>
				     <li> <a class="kontakt-zel icon-envelope" href="mailto:info@облепиха22.рф">info@облепиха22.рф</a> </li>
				     <li class="a"> <a class="kontakt-orz icon-link2" href="http://облепиха22.рф/" target="_blank">облепиха22.рф</a> </li> 
				   </ul>
				  </div> 
				</div>
			</div>
		</article>
 <!--================================================Моя Camry   
     <article class="cat3 cat6">
			<a href="#" data-cat="columns" data-state="nat">
        <img src="http://camry.barnaul.online/vizitka.jpg"><i>запчасти на TOYOTA</i><b>Моя Camry</b></a>
			<div> <div class="details"> <div class="bio">
    				<p>здесь содержится текст с информацией о фирме, здесь содержится текст с информацией о фирме, здесь содержится текст с информацией о фирме, здесь содержится текст с информацией о фирме, здесь содержится текст с информацией о фирме, здесь содержится текст с информацией о фирме </p><p> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст  текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
<br><a href="XXXX.barnaul.online" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div>
    		  <div class="social"> <b>Контакты:</b>   
				   <ul>  
             <li> <a class="kontakt-sin icon-telephone" href="tel:+79132474047">тел. +7-960-944-6888</a> </li>
             <li> <a class="kontakt-sin icon-telephone" href="tel:+79132474047">тел. +7-902-998-6676</a> </li>
             <li> <a class="kontakt-sin icon-telephone" href="tel:+79132474047">тел. +7-(3852)-696-676</a> </li>
             <li> <a class="kontakt-gol icon-antenna" href="">МОЯ-КАМРИ (позывной на 22FM Си-Би)</a> </li>
             <li> <a class="kontakt-zel icon-envelope" href="mailto:XXXX@barnaul.online">camry@barnaul.online</a> </li>
             <li> <a class="kontakt-zlt icon-bubble" href="">camry (на нашем форуме)</a> </li>
				     <li> <a class="kontakt-orz icon-link2" href="XXXX.barnaul.online" target="_blank">camry.barnaul.online</a> </li>
				   </ul>
				  </div>
				</div>
			</div>
		</article> --> 
  <!--================================================Vпрокатe -->   
     <article class="cat2 cat3">
			<a href="#" data-cat="columns" data-state="nat">
        <img src="http://vprokate.barnaul.online/vizitka.jpg"><i>ПРОКАТ КРЕПЛЕНИЙ НА АВТО</i><b>Vпрокате</b></a>
			<div> <div class="details"> <div class="bio">
    				<p> ПРОКАТ КРЕПЛЕНИЙ ,АРЕНДА БАГАЖНИКОВ ДЛЯ ПЕРЕВОЗКИ ЛЫЖ , СНОУБОРДОВ , ВЕЛОСИПЕДОВ, ЛОДАК. </p><p> КРЕПЛЕНИЯ-ПРИЩЕПКИ и РЕЙЛИНГИ на ВОДОСТОК И НЕ ТОЛЬКО ПРАКТИЧЕСКИ НА ВСЕ МАРКИ АВТО!</p><p> Мы заключили договор с местными прокатами лыж и бордов , теперь не нужно пихать и утрамбовывать инвентарь, поставил на крышу крепы (прищепки) закинул и покатил отдыхать!!!!</p>
<br><a href="http://vprokate.barnaul.online" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div>
    		  <div class="social"> <b>Контакты:</b>   
				   <ul>  
             <li> <a class="kontakt-sin icon-telephone" href="tel:+79132141131">тел. +7-913-214-11-31</a> </li>
<!--<li> <a class="kontakt-gol icon-antenna" href="">МОЯ-КАМРИ (позывной на 22FM Си-Би)</a> </li> -->
             <li> <a class="kontakt-zel icon-envelope" href="mailto:alex.opt777@mail.ru">alex.opt777@mail.ru</a> </li>
             <li> <a class="kontakt-zlt icon-bubble" href="https://barnaul-online.wixsite.com/forum/forum/vizitnica-barnaul-online/sayt-prokata-krepleniy-na-avto-vprokate">Vпрокате (на нашем форуме)</a> </li>
				     <li> <a class="kontakt-orz icon-link2" href="http://vprokate.barnaul.online" target="_blank">vprokate.barnaul.online</a> </li>
				   </ul>
				  </div>
				</div>
			</div>
		</article>   
  <!--================================================BarneoFM-->  
<article class="cat4 cat7">
			<a href="#" data-cat="columns" data-state="nat">
        <img src="http://barneofm.barnaul.online/vizitka.jpg"><i>4 онлайн-радиостанций Барнаула</i><b>Barneo FM</b></a>
			<div> <div class="details"> <div class="bio">
    				<p>Barneo FM — это первая танцевальная радиостанция города Барнаула. В эфире самые топовые хиты и горячие новинки различных клубных направлений. Аудитория радиостанции: более шестидесяти стран и двухсот городов, и с каждым днём география радиостанции только увеличивается! </p> 
<p>Наша станция работает со многими талантливыми иностранными и российскими музыкантами!</p> 
<p>Цель Barneo FM — нести заряд позитива , радости в ритме танца!</p> 
<p>Чтобы разбавить музыкальные вкусы аудитории, Barneo FM с 2015 года создает дополнительные онлайн потоки, на данный момент это 4 радио-станции :</p>
<p> ● Barneo FM History — это любимые танцевальные хиты из восьмидесятых, девяностых и нулевых. На «History» , МЫ вспоминаем, лучшие и знаменательные события города Барнаула</p>
<p> ● Auto Bass Fm — единственная авто-музыкальная радиостанция «для любителей прокачать басами тачку»</p>  
<p> ● Radio Enigma-лёгкая и расслабляющая музыка. Окунись в море релакса вместе с Radio Enigma!</p>
<p> ● Barneo FM History — это любимые танцевальные хиты из восьмидесятых, девяностых и нулевых. На «History» , МЫ вспоминаем, лучшие и знаменательные события города Барнаула</p>
<br><a href="http://barneofm.ru" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div>
    		  <div class="social"> <b>Контакты:</b> 
				   <ul>  
             <li> <a class="kontakt-sin icon-telephone" href="tel:+79969513941">тел. +7-996-951-3941</a> </li> 
<!--              <li> <a class="kontakt-gol icon-antenna" href="">ХХХХ (позывной на 22FM Си-Би)</a> </li> -->
             <li> <a class="kontakt-zel icon-envelope" href="mailto:mail@barneofm.ru">mail@barneofm.ru</a> </li>
             <li> <a class="kontakt-zlt icon-bubble" href="">barneofm (на нашем форуме)</a> </li>
				     <li> <a class="kontakt-orz icon-link2" href="http://barneofm.ru" target="_blank">barneofm.ru</a> </li>
				   </ul>
<p>В данный момент, в связи с техническими проблемами несовместимости серверного оборудования, вещание аудио потока в эфире barnaul.online? ВРЕМЕННО ПРИОСТАНОВЛЕНО!</p>
				  </div>
				</div>
			</div>
		</article>
   <!--================================================otogrev -->   
     <article class="cat3">
			<a href="#" data-cat="columns" data-state="nat">
        <img src="http://otogrev.barnaul.online/vizitka.jpg"><i>SPA услуги для вашего авто</i><b>Отогрев пушкой</b></a>
			<div> <div class="details"> <div class="bio"><p> Мы не занимаемся поиском проблем, "почему не заводится замёрзший двигатель" ... залитые свечи, замёрзший датчик или компьютер, замёрзло втягивающее реле стартера, топливо-провод и т.д. Мы просто это всё отогреваем до приемлемой рабочей температуры! И спокойно заводим Вашу машину, не насилуя её!
</p>
<br><a href="http://otogrev.barnaul.online" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div>
    		  <div class="social"> <b>Контакты:</b>   
				   <ul>  
             <li> <a class="kontakt-sin icon-telephone" href="tel:+79609470577">тел. +7-960 947-05-77</a> </li>
<!--              <li> <a class="kontakt-gol icon-antenna" href="">МОЯ-КАМРИ (позывной на 22FM Си-Би)</a> </li> -->
             <li> <a class="kontakt-zel icon-envelope" href="mailto:otogrev@barnaul.online">otogrev@barnaul.online</a> </li>
             <li> <a class="kontakt-zlt icon-bubble" href="https://barnaul-online.wixsite.com/forum/forum/vizitnica-barnaul-online/sayt-reanimatorov-zamyorzshego-avto-otogrev-barnaul-online">Отогрев (на нашем форуме)</a> </li>
				     <li> <a class="kontakt-orz icon-link2" href="http://otogrev.barnaul.online" target="_blank">otogrev.barnaul.online</a> </li>
				   </ul>
				  </div>
				</div>
			</div>
		</article>     
<!--================================================ cathouse --> 
 <article class="cat7"> <a href="#" data-cat="columns" data-state="nat"> <img src="http://cathouse.barnaul.online/vizitka.jpg"><i>Спасение бездомных животных</i>
<b>Кошкин Дом</b>
</a> <div> <div class="details"> <div class="bio"> <p>Наша группа создана для помощи бездомным кошкам, попавшим в беду. Для тех от кого отказались, кого предали и обрекли на страдания. Наша задача проста и понятна. Спасти животное, вылечить и найти новый дом.</p> <br>
<a href="http://cathouse.barnaul.online" target="blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div> <div class="social"> <b>Контакты:</b> <ul>
<li> <a class="kontakt-sin icon-telephone" href="tel:+79095035924">тел. +7-909-503-5924</a> </li> 
<li> <a class="kontakt-gol icon-antenna" href="">Кошкин дом (позывной на 22FM Си-Би)</a> </li> 
<li> <a class="kontakt-zel icon-envelope" href="mailto:cathouse@barnaul.online">cathouse@barnaul.online</a> </li> 
<li> <a class="kontakt-zlt icon-bubble" href="https://barnaul-online.wixsite.com/forum/forum/vizitnica-barnaul-online/sayt-volontyorov-koshkin-dom">cathouse (на нашем форуме)</a> </li> 
<li> <a class="kontakt-orz icon-link2" href="http://cathouse.barnaul.online" target="blank">cathouse.barnaul.online</a> </li> </ul> </div> </div> </div> </article>
<!--================================================-->  
<!-- 	<article class="cat2">
			<a href="#" data-cat="columns" data-state="nat">
        <img src="http://XXXX.barnaul.online/vizitka.jpg"><i>лозунг или описание в 2х словах</i><b>Заголовок</b></a>
			<div> <div class="details"> <div class="bio">
    				<p>здесь содержится текст с информацией о фирме, здесь содержится текст с информацией о фирме, здесь содержится текст с информацией о фирме, здесь содержится текст с информацией о фирме, здесь содержится текст с информацией о фирме, здесь содержится текст с информацией о фирме </p><p> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст  текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
<br><a href="XXXX.barnaul.online" target="_blank"> <site class="icon-mouse-left"></site>подробней на нашем сайте</a></div>
    		  <div class="social"> <b>Контакты:</b> 
				   <ul>  
             <li> <a class="kontakt-sin icon-telephone" href="tel:+79132474047">тел. +7-ХХХ-XXX-XXXX</a> </li> 
             <li> <a class="kontakt-gol icon-antenna" href="">ХХХХ (позывной на 22FM Си-Би)</a> </li>
             <li> <a class="kontakt-zel icon-envelope" href="mailto:XXXX@barnaul.online">XXXX@barnaul.online</a> </li>
             <li> <a class="kontakt-zlt icon-bubble" href="">ХХХХ (на нашем форуме)</a> </li>
				     <li> <a class="kontakt-orz icon-link2" href="XXXX.barnaul.online" target="_blank">XXXX.barnaul.online</a> </li>
				   </ul>
				  </div>
				</div>
			</div>
		</article> -->
   
  </div>
      </div>
    </div>
 
 <!--КОНЕЦ  ВИЗИТКИ -->  
  </main> 
</div>
<!-- ✪✪✪✪✪✪✪✪✪✪[ СОДЕРЖИМОЕ МЕНЮ ]✪✪✪✪✪✪✪✪✪✪ -->
<div >
  <iframe id="str1-rezult" src='https://codepen.io/barnaul-online/debug/OxjXVL' style=' height: 800px;width: 70%; margin-left: 350px; margin-top:-10%; border:none;' scrolling="no"></iframe>
    <iframe id="str2-rezult" src='https://s.codepen.io/barnaul-online/debug/ZXJWRO/yYAyLDPKdnVr' style=' height: 800px;width: 70%; margin-left: 350px; margin-top:-10%; border:none;' scrolling="no"></iframe>
</div>
  
    <script  src="js/index.js"></script>




</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/barnaul-online/viz-26-KQLXKM */
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif; } 

* { -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif; } 
body {  background: #333;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #212121;
  text-align: left;
/*     padding: 20px;   */
  display: block;
  max-width: 2000px;
  position: relative; } 
h1 { padding-bottom: 15px;
  border-bottom: 1px solid #ddd; }
.right { float: right; /* Выравнивание по правому краю */}
.center { float: center; /* Выравнивание по центру */}
/*======================== БОКОВОЕ МЕНЮ ========================*/
 * { box-sizing: border-box; } 

.page { height: 100%; }

.content_nabok { 
  height: 200%;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  background-color: #333;}  

/* .content_inner {
  height: 50%;
  overflow-y: auto;
   } */
/* basically all styling from now on */
.menu_toggle { z-index: 900; 
  position: fixed;
  top: 0; left: 0;
  display: block;
  cursor: pointer;
  width: 100px; height: 80px;
  background-color: #00A8FF;/*цвет полукруга под гамбургером  #72B7E1*/
  border-bottom-right-radius: 100%; }
.menu_toggle:active i { opacity: 0.8; }
.menu_toggle i { color: #f0f0f0; }
.menu_toggle .menu_open, .menu_toggle .menu_close { 
  position: absolute;
  top: 50%;  left: 50%;
  margin-top: -15px;  margin-left: -12px;
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1); }
.menu_toggle .menu_open { -webkit-transform-origin: -100px -100px;
          transform-origin: -100px -100px; }
.menu_toggle .menu_close {  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  -webkit-transform-origin: -100px -160px;
          transform-origin: -100px -160px; } 
.menu_items { position: fixed; 
  top: 150px; left: -30px;/*  рассположение выповших кнопак фильтрации */
  list-style-type: none;
  margin: 0; 
  padding: 0; }
 .menu_items{visibility:hidden; position: absolute; }/*  двигаем влево развёрнутые кнопки меню с их текстом */

.menu_items li { height: 60px; margin-bottom: 30px;
          -webkit-transform: translateX(-430px);/*  прячем влево свёрнутые кнопки меню с их текстом */
          transform: translateX(-430px); 
  -webkit-transition: -webkit-transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
  transition: -webkit-transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1); }
.menu_items li:nth-child(2) { margin-left: 40px; }
.menu_items li:nth-child(3) { margin-left: 80px; }
.menu_items button { visibility:visible; 
  display: block;  /*   вастраиваем кнопки фильтрации вертикально */
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #a4a4a4;
  -webkit-transition: color .2s;
  transition: color .2s; }
.menu_items button .icon { position: relative;
  display: inline-block;
  margin-right: 25px;
  color: #f0f0f0; }
.menu_items button .icon:after { position: absolute; visibility:visible;
  top: 50%; left: 50%;
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  margin-left: -33px;
  margin-top: -32px;
  border-radius: 100%;
  border: 2px solid #f0f0f0;
  -webkit-transition: border-color .2s;
  transition: border-color .2s; }
.menu_items button:hover { color: #f0f0f0; }
.menu_items button:hover .icon:after { border-color: #00A8FF; }/* круг кнопки */
.menu_items button:active .icon { color: #00A8FF; }/* иконка кнопки */
 /* Let's open up the menu */
.content_inner { height: 100%; } 
.shazam .content_nabok { /* визитки набок */
  position: fixed;
  -webkit-transform: rotate(-30deg); transform: rotate(-30deg); 
}
.shazam .menu_open { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); }
.shazam .menu_close { -webkit-transform: rotate(0); transform: rotate(0); }
.shazam .menu_items li {
  -webkit-transform: translateX(0); transform: translateX(0);
  -webkit-transition: -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.shazam .menu_items li:nth-child(2) { -webkit-transition-delay: .47s; transition-delay: .47s; }
.shazam .menu_items li:nth-child(3) { -webkit-transition-delay: .48s;  transition-delay: .48s; } 






/*======================== ПРИВЕТСТВИЕ НАД ВИЗИТКАМИ ========================*/
 .privet { z-index: 1;
position: absolute;
top: 0;  } 
/*======================== ПРИВЕТСТВИЕ ВИЗИТКА========================*/
.privet-viz { z-index: 1;
position: relative;
top: 0;  }
.privet-nadviz { z-index: 1;
position: relative;
top: 0;  } 
figure {
    display: block; /* Блочный элемент */
    width: 95%; /* Ширина */ height: 90%;
    float: left; /* Блоки выстраиваются по горизонтали */ }
fig2 { display: block; /* Блочный элемент */
    width: 80%; /* Ширина */ height: 130px;
    float: left; /* Блоки выстраиваются по горизонтали */  } 
fig3 { display: block; /* Блочный элемент */
    width: 319px; /* Ширина */ height: 350px;
    float: left; /* Блоки выстраиваются по горизонтали */  }
fig4 { display: block; /* Блочный элемент */
    width: 320px; /* Ширина */ height: 350px;
    float: left; /* Блоки выстраиваются по горизонтали */ }

/*======================== ВИЗИТКИ ========================*/
.container { position: absolute;  } 
p {  margin: 1em 0; } 
/* Top City Filter */
.filter { position: relative; margin: -20px 40px 40px 40px; z-index: 18;}
button  { /*меню сортировки*/
    padding: 5px 12px;/*высота и ширина кнопки*/
  border: 1px solid #cacaca;
  color: #666666;/*цв.текста без навидения*/
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 300; 
  border-radius: 0;
   background: none;
  text-decoration: none;}
button:hover, {   background-color: #55acee;
  border-color: #55acee;/*цв.бардюра при навидении*/
  color: #fff222; /*цв.текста при навидении*/
  border-radius: 0;/*угол при навидении*/} 
.filter a {/*субменю сортировки*/
  font-size: 12px;
  color: #999; }
.filter .x2 {/*субменю сортировки*/
 padding: 8px 0; 
font-size: 22px; }
.filter p {/*субменю сортировки*/
 padding: -10px 0; 
font-size: 22px; }
.filter a:hover, .filter a.active-filter { color: #fff; } 
/* Boxes */
a { color: #f27d00; text-decoration: none; } 

article {/*содержание*/ 
  display: inline;
  float: left;
  width: 250px;
  margin: 0 10px 15px;/* Отступы вокруг*/ }
article a { display: block;
  padding: 0 10px 8px; 
  background: #fff;
  overflow: hidden;
  color: #f27d00;
  text-decoration: none; }
article a:hover img {  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  opacity: 0.8; }
article img {/* картинка визитки */
  width: 250px;/* ширина */
  height: auto;
  margin: 0 -10px 10px; /* отступы вокруг*/}
article i { /* слэнг визитки */
  font-style: normal;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
  display: block;
  margin: 0 0 5px; }
article b { /* Заголовок визитки */
  font-weight: normal;
  font-size: 18px;
  color: #121212;
  padding-bottom: 10px; }
article.current { /* продолжение визитки смыкание с окном*/
  margin-bottom: -20px; 
  border-bottom: 20px solid #fff; }
article div { display: none; } 
.content { clear: both;
  background: #fff;
  padding: 0 20px;
  margin: 0 10px 0;
  position: relative;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease; }
.content.open {/* окно описания */
  max-height: 1700px;
  padding: 20px;/* бардюр-отступ в окне*/
  margin: 0 10px 15px;/* бардюр-отступ за окном */
  opacity: 1; }
.content a { float: right;
  font-size: 13px;
  line-height: 15px; }
.content i { font-style: normal;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 11px;
  color: #f27d00; }
.content img, .content video {  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 20px; }
.content b { font-weight: normal;
  font-size: 30px;
  color: #121212;
  margin: 18px 0;
  display: block; } 
site {  font-size: 24px;
  margin: -16px -25px;  
  display: block;  }
.details {  width: 100%;float: rigt; }
.details .bio {  width: 61.8%;
  float: left;
  padding-right: 20px; }
@media (max-width: 728px) {
  .details .bio { width: 100%; } }
.details .social { width: 38.2%; 
  float: left;
  margin: 1em 0; }
@media (max-width: 728px) {
  .details .social { width: 100%; } }
.details .social b { margin: 0;
  font-size: 20px;
  line-height: 20px; }
.details .social ul { list-style: none;
  margin: 0;
  padding: 15px 0 0; }
.details .social ul li { display: block;
  text-align: left;
  border-bottom: 1px solid #fff; }
.details .social ul li a { 
  position: relative;
  background: #efefef;
  float: none;
  text-align: left;
  display: block;
  padding: 10px 0 10px 70px;
  font-size: 0.8em;
  text-transform: uppercase;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear; }
/* КНОПКИ КОНТАКТОВ В ВИЗИТКЕ */
.details .social ul li a.kontakt-sin {  border-left: 5px solid #3b5998;}
.details .social ul li a.kontakt-sin:before { color: #3b5998; }
.details .social ul li a.kontakt-gol { border-left: 5px solid #00acee; }
.details .social ul li a.kontakt-gol:before { color: #00acee; }
.details .social ul li a.kontakt-zel { border-left: 5px solid #2bd037; }
.details .social ul li a.kontakt-zel:before { color: #2bd037; }
.details .social ul li a.kontakt-zlt { border-left: 5px solid gold; }
.details .social ul li a.kontakt-zlt:before { color: gold; }
.details .social ul li a.kontakt-orz { border-left: 5px solid #f27d00; }
.details .social ul li a:hover { background: #ccc;
  color: #686868; }
.details .social ul li a:before { position: absolute;
  left: 25px;
  font-size: 1.5em; } 
.content p { font-size: 13px;
  line-height: 17px; } 
.bigbox { width: 100%;
  padding: 20px;
  overflow: hidden; } 


.iso-sub-1 {  display: none;  }
.iso-sub-2 {  display: none;  }
.iso-sub-3 {  display: none;  }
.iso-sub-4 {  display: none;  }
.iso-sub-5 {  display: none;  }
.iso-sub-6 {  display: none;  }
.iso-sub-7 {  display: none;  }


/* ============== СКРЫВАЕМОЕ СОДЕРЖАНИЕ БОКОВОГО МЕНЮ ================== */
#str-prevet-rezult {  position: fixed;
  left:0 ;
  width: 100%; height: 100%; /* размер фона приветствия */
  background: #111; /* Цвет фона */
  opacity: 0.9; /* Полупрозрачность элемента */}
#str1-rezult { display: none; }
#str2-rezult { display: none; }

/* ============== ТАРИФЫ ВИЗИТОК ================== */

.tarif {margin: 50px 0px 0px; }
.tarif .plan {/* тарифный план ряд*/
  margin: 0;
  width: 20%;
  position: relative;
  float: left;
  background-color: #ffffff;
  border: 1px solid #aaa; }
.tarif .plan:hover .plan-cost, .snip1223 .plan.hover .plan-cost {
  -webkit-transform: scale(1.2) rotate(20deg);
  transform: scale(1.2) rotate(20deg);
  -webkit-transform-origin: 50% 51%;
  -ms-transform-origin: 50% 51%;
  transform-origin: 50% 51%; }
.tarif * { /* правильный ряд */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out; }
.tarif header { position: relative;
  background-color:rgba(0, 0, 0, 0.2); } /* цвет фона шапки */
.tarif .featured header { position: relative;
background-color: #00A8FF; } /* цвет фона особой шапки */
.tarif .plan-title { top: 0;
  font-weight: 800;
  padding: 30px 15px 20px;
  margin: 0;
  display: inline-block;
  color: #111;
  text-transform: uppercase; 
transform: scale(1.2) rotate(10deg);/* текст под углом */ 
/*  font-size: 0.8em; */ }
.tarif .plan-cost {/* круг с ценником */
  background-color: #00A8FF;
  border-top: 1px solid #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 13px; 
  padding: 12px 0; 
  width: 80px;
  height: 80px;
  position: absolute;
  top: -50px;  
  right: 5px; }
.tarif .featured .plan-cost {
  border-bottom: 1px solid #555; }/* круг с ценником особого плана*/
.tarif .plan-price {
/*   margin-top: 50px 0px; */
 padding: 12px 0 0 0;  
  line-height: 20px;  
  font-weight: 800; /*  толщина текста в круге  */
  font-size: 1.3em;/*  размер текста в круге  */
  color: #ffffff; }
.tarif .plan-type { opacity: 0.8; color: #ffffff;
  font-size: 0.85em; }/* текст в круге /мес */
.plan-type { margin-top: -10px;}/* текст в круге /мес */
.tarif .plan-features { padding: 0;  margin: 0;
  text-align: center;/* текст пояснений */
  font-size: 0.85em;  
  list-style: outside none none;} 
.tarif .plan-features li { border-top: 1px rgba(0, 0, 0, 0.2) ;
  padding: 10px 5%; }/* полосы пояснений */
.tarif .plan-features li:nth-child(even) { 
  background: rgba(0, 0, 0, 0.08); } /* темные полосы пояснений */
.tarif .plan-features i {margin-right: 8px; 
  opacity: 0.4; }
.tarif .plan-select a { 
  background-color: #00A8FF; /* цвет кнопак*/
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  padding: 20px;
  width: 100%;
  font-weight: 500;
  text-transform: uppercase;
  display: inline-block; }
.tarif .plan-select a:hover {background-color: #eb7e14;}/* наведение на кнопку*/
.tarif .featured {z-index: 1; /* особый план */
  margin-top: -10px;
  background-color: #eb7e14;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);}/* тень */ 
.tarif .featured .plan-title, .snip1223 .featured .plan-price { /* особый план */
  color: #ffffff; }/* текст шапки */
.tarif .featured .plan-title { /* отступы в шапке выделенного тарифа*/
  padding: 30px 15px 32px; }/* верх право низ */
.tarif .featured .plan-select a {padding: 25px; }/* размер особой кнопки*/
  
@media only screen and (max-width: 1125px) {/* если экран меньше то действует ...*/
  .tarif .plan { width: 50%; }
  .tarif .plan-cost {top: -25px;right: 5px;}/* положение круга*/
  .tarif .plan-title { padding: 15px 15px 12px;}/* размер шапки*/
  .tarif .featured .plan-title { padding: 15px 15px 12px;}/* размер особой шапки*/
  .tarif .plan-features li { border-top: 1px rgba(0, 0, 0, 0.2) ;
  padding: 7px 5%; }/* полосы пояснений */
  .tarif .plan-title, .tarif .plan-select a {
    -webkit-transform: translateY(0);
    transform: translateY(0);  }
  .tarif .plan-select a,
  .tarif .featured .plan-select a {text-align: left;font-size: 0.7em;
    padding: 10px;  }
  .tarif .featured { margin-top: 0; }
}
@media only screen and (max-width: 545px) {
  .tarif .plan { width: 100%; }
}



/*Downloaded from https://www.codeseek.co/barnaul-online/viz-26-KQLXKM */
//========================== боковое меню
var $page = $('.page'); 
$('.menu_toggle').on('click', function(){ $page.toggleClass('shazam'); });
$('.content_nabok').on('click', function(){ $page.removeClass('shazam'); }); 

//========================== меню сортировки
function contentDiv() { $('.added').remove();
    $('article').removeClass('current');
    var docWidth = +$('.container').width();
    var articleWidth = +$('article').width();
    articleWidth = articleWidth + 20;
    var ratio = docWidth / articleWidth;
    ratio = Math.floor(ratio);
    if(ratio == 0) { ratio = 1; }
    ratio = ratio + 'n';
    $('article.show:nth-of-type(' + ratio + ')').after('<div class="content added"></div>'); }  
$('article').addClass('show'); contentDiv(); 
//========================== субменю сортировки iso
$('.filter.iso').on( 'click', 'button', function() {
  $('.iso-sub-1, .iso-sub-2, .iso-sub-3, .iso-sub-4, .iso-sub-5, .iso-sub-6').slideUp();
  var $catChild = $(this).attr('data-child');
  if ($catChild) {
    $($catChild+':not(:visible)').slideDown(); }
});
//========================== впихон содержания   
$(window).resize(function() {
    contentDiv();});
var articles = $('article');
$('.filter button,  a').click(function(e){
  $('.filter button,  a').removeClass('active-filter');
  $(this).addClass('active-filter');
  e.preventDefault();
  var filter = $(this).data('filter');
  $('.container').empty();
  if( filter == "all") {
    $('.container').hide().html(articles).fadeIn(1000).append('<div class="content"></div>');
  } else {
    filter = '.'+filter;
    filter_articles = $(articles).filter(filter);
    $('.container').hide().html(filter_articles).fadeIn(1000).append('<div class="content"></div>');}
  contentDiv();
  });

//========================== содержание
$('.container').on('click', 'article',function(e){
  e.preventDefault();
  content = $(this).find('div').html();
  box = $(this).nextAll('.content').first();
  if($(this).hasClass('current')) {
     $(this).removeClass('current');
     $(box).removeClass('open').empty();
     $(this).parent().find('.content').empty();  } else { 
    $('article').removeClass('current');
    $(this).addClass('current');
    $(this).parent().find('.content').empty(); 
    $('.open').removeClass('open').empty();
    $(box).addClass('open').html(content); }  }); 


// ============= СКРЫВАЕМОЕ СОДЕРЖАНИЕ БОКОВОГО МЕНЮ ===============

$('.str-close').click(function () {
  // окно приветствия
  if($(this).attr('id') == 'str-prevet'){ $('#str-prevet-rezult').css("display", "block"); } 
  else { $('#str-prevet-rezult').css("display", "none"); }
  // окно информации о визитках
 if($(this).attr('id') == 'str1'){ $('#str1-rezult').css("display", "block"); } 
  else { $('#str1-rezult').css("display", "none"); }
  // окно информации о изготовлении сайтов
  if($(this).attr('id') == 'str2'){ $('#str2-rezult').css("display", "block"); } 
  else { $('#str2-rezult').css("display", "none"); }
});


// ============= стрелки в преветствиия ===============
var canvas = document.querySelector('.strel-1');
var ctx = canvas.getContext('2d');
var contextX = 218;/*↔ начало стрелки ✔⇒ */
var contextY = 108;/*↕ начало стрелки ✔⇒ */
var controlPointX = 180;/*↔ середина стрелки =✔⇒ */
var controlPointY = 140;/*↕ середина стрелки =✔⇒ */
var endPointX = 110;/*↔ конец стрелки ⇒✔ */
var endPointY = 110;/*↕ конец стрелки ⇒✔ */ 
drawCurvedArrow(contextX, contextY, endPointX, endPointY, controlPointX, controlPointY,
                5, /*толщина !*/
                20, /*размер конца стрелки, 10...*/
                '#eb7e14'); 
function drawCurvedArrow(startPointX, startPointY, endPointX, endPointY, quadPointX, quadPointY, lineWidth, arrowWidth, color) { ctx.save(); ctx.strokeStyle = color; ctx.lineWidth = lineWidth; var arrowAngle = Math.atan2(quadPointX - endPointX, quadPointY - endPointY) + Math.PI; ctx.beginPath(); ctx.moveTo(startPointX, startPointY); ctx.quadraticCurveTo(quadPointX, quadPointY, endPointX, endPointY); ctx.moveTo(endPointX - (arrowWidth * Math.sin(arrowAngle - Math.PI / 6)),  endPointY - (arrowWidth * Math.cos(arrowAngle - Math.PI / 6))); ctx.lineTo(endPointX, endPointY); ctx.lineTo(endPointX - (arrowWidth * Math.sin(arrowAngle + Math.PI / 6)), endPointY - (arrowWidth * Math.cos(arrowAngle + Math.PI / 6))); ctx.stroke(); ctx.closePath(); ctx.restore(); }
//]]>

var canvas = document.querySelector('.strel-2');
var ctx = canvas.getContext('2d');
var contextX = 200;/*↔ начало стрелки ✔⇒ */
var contextY = 380;/*↕ начало стрелки ✔⇒ */
var controlPointX = 90;/*↔ середина стрелки =✔⇒ */
var controlPointY = 250;/*↕ середина стрелки =✔⇒ */
var endPointX = 180;/*↔ конец стрелки ⇒✔ */
var endPointY = 200;/*↕ конец стрелки ⇒✔ */ 
drawCurvedArrow(contextX, contextY, endPointX, endPointY, controlPointX, controlPointY,
                5, /*толщина !*/
                20, /*размер конца стрелки, 10...*/
                '#eb7e14');
function drawCurvedArrow(startPointX, startPointY, endPointX, endPointY, quadPointX, quadPointY, lineWidth, arrowWidth, color) { ctx.save(); ctx.strokeStyle = color; ctx.lineWidth = lineWidth; var arrowAngle = Math.atan2(quadPointX - endPointX, quadPointY - endPointY) + Math.PI; ctx.beginPath(); ctx.moveTo(startPointX, startPointY); ctx.quadraticCurveTo(quadPointX, quadPointY, endPointX, endPointY); ctx.moveTo(endPointX - (arrowWidth * Math.sin(arrowAngle - Math.PI / 6)),  endPointY - (arrowWidth * Math.cos(arrowAngle - Math.PI / 6))); ctx.lineTo(endPointX, endPointY); ctx.lineTo(endPointX - (arrowWidth * Math.sin(arrowAngle + Math.PI / 6)), endPointY - (arrowWidth * Math.cos(arrowAngle + Math.PI / 6))); ctx.stroke(); ctx.closePath(); ctx.restore(); }

var canvas = document.querySelector('.strel-3');
var ctx = canvas.getContext('2d');
var contextX = 190;/*↔ начало стрелки ✔⇒ */
var contextY = 180;/*↕ начало стрелки ✔⇒ */
var controlPointX = 90;/*↔ середина стрелки =✔⇒ */
var controlPointY = 180;/*↕ середина стрелки =✔⇒ */
var endPointX =150;/*↔ конец стрелки ⇒✔ */
var endPointY = 95;/*↕ конец стрелки ⇒✔ */ 
drawCurvedArrow(contextX, contextY, endPointX, endPointY, controlPointX, controlPointY,
                5, /*толщина !*/
                20, /*размер конца стрелки, 10...*/
                '#eb7e14'); 
function drawCurvedArrow(startPointX, startPointY, endPointX, endPointY, quadPointX, quadPointY, lineWidth, arrowWidth, color) { ctx.save(); ctx.strokeStyle = color; ctx.lineWidth = lineWidth; var arrowAngle = Math.atan2(quadPointX - endPointX, quadPointY - endPointY) + Math.PI; ctx.beginPath(); ctx.moveTo(startPointX, startPointY); ctx.quadraticCurveTo(quadPointX, quadPointY, endPointX, endPointY); ctx.moveTo(endPointX - (arrowWidth * Math.sin(arrowAngle - Math.PI / 6)),  endPointY - (arrowWidth * Math.cos(arrowAngle - Math.PI / 6))); ctx.lineTo(endPointX, endPointY); ctx.lineTo(endPointX - (arrowWidth * Math.sin(arrowAngle + Math.PI / 6)), endPointY - (arrowWidth * Math.cos(arrowAngle + Math.PI / 6))); ctx.stroke(); ctx.closePath(); ctx.restore(); }

Comments