Alexey Boroda / demo-core

Commit 3a71f94a51e86e07916cac285b7b6803e5c73f5c

Authored by Eugeny Galkovskiy
1 parent ee3cea15

mobile styles and blocks

Showing 7 changed files with 307 additions and 11 deletions   Show diff stats
Inline Side-by-side
@@ -77,4 +77,25 @@ ul.list-style-none{ @@ -77,4 +77,25 @@ ul.list-style-none{
77 position: absolute; 77 position: absolute;
78 bottom: 10px; 78 bottom: 10px;
79 width: 100%; 79 width: 100%;
  80 +}
  81 +
  82 +/****/
  83 +
  84 +.main-car-mobile h1, .main-car-mobile h2 {
  85 + font-size: 23px;
  86 +}
  87 +.main-car-mobile ul, .main-car-mobile p{
  88 + font-weight:400!important;
  89 + font-size: 12px;
  90 +}
  91 +.main-car-mobile ul li{
  92 + margin-bottom: 5px;
  93 +}
  94 +
  95 +@media(max-width:365px){
  96 + li.previous, li.next {font-size:3.5vw;}
  97 +}
  98 +@media(max-width:350px){
  99 + section .container h2.text-uppercase, .big-text{font-size: 9vw;}
  100 + .big-text-2{font-size: 7vw;}
80 } 101 }
81 \ No newline at end of file 102 \ No newline at end of file
@@ -61,7 +61,7 @@ _________________________________________________________ --> @@ -61,7 +61,7 @@ _________________________________________________________ -->
61 <div class="col-md-9" id="blog-listing-big"> 61 <div class="col-md-9" id="blog-listing-big">
62 62
63 <section class="post"> 63 <section class="post">
64 - <h2><a href="blog-post.html">Девушка с веснушками Ольга</a></h2> 64 + <h2 class="big-text-2"><a href="blog-post.html">Девушка с веснушками Ольга</a></h2>
65 <div class="row"> 65 <div class="row">
66 <div class="col-sm-6"> 66 <div class="col-sm-6">
67 <p class="author-category">By <a href="blog.html#">Николас</a> in <a href="blog.html">NicolasBW</a> 67 <p class="author-category">By <a href="blog.html#">Николас</a> in <a href="blog.html">NicolasBW</a>
@@ -86,7 +86,7 @@ _________________________________________________________ --&gt; @@ -86,7 +86,7 @@ _________________________________________________________ --&gt;
86 86
87 87
88 <section class="post"> 88 <section class="post">
89 - <h2><a href="blog-post.html">Как я фотографировал свою дочку</a></h2> 89 + <h2 class="big-text-2"><a href="blog-post.html">Как я фотографировал свою дочку</a></h2>
90 <div class="row"> 90 <div class="row">
91 <div class="col-sm-6"> 91 <div class="col-sm-6">
92 <p class="author-category">By <a href="blog.html#">Николас</a> in <a href="blog.html">NicolasBW</a> 92 <p class="author-category">By <a href="blog.html#">Николас</a> in <a href="blog.html">NicolasBW</a>
@@ -34,7 +34,86 @@ _________________________________________________________ --&gt; @@ -34,7 +34,86 @@ _________________________________________________________ --&gt;
34 34
35 <!-- *** LOGIN MODAL END *** --> 35 <!-- *** LOGIN MODAL END *** -->
36 36
37 - <section> 37 + <section class="hidden-lg hidden-md main-car-mobile">
  38 + <div class="home-carousel">
  39 +
  40 + <div class="dark-mask"></div>
  41 +
  42 + <div class="container">
  43 + <div class="homepage owl-carousel">
  44 + <div class="item">
  45 + <div class="row">
  46 + <div class="col-sm-6 right">
  47 + <h1>ВАШ ФУНКЦИОНАЛЬНЫЙ САЙТ-ВИЗИТКА</h1>
  48 + <p>Идеальный вариант для бизнеса, агентства, сайта услуг, портфолио, блога.</p>
  49 + <p style="margin-top:25px;"> </p>
  50 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Заказать такой сайт</a></p>
  51 + </div>
  52 + <div class="col-sm-6">
  53 + <img class="img-responsive" src="img/main1.png" alt="">
  54 + </div>
  55 + </div>
  56 + </div>
  57 + <div class="item">
  58 + <div class="row">
  59 +
  60 + <div class="col-sm-5">
  61 + <h2>ТОЛЬКО САМЫЕ НУЖНЫЕ СТРАНИЦЫ</h2>
  62 + <ul class="list-style-none">
  63 + <li>Презентационная главная</li>
  64 + <li>Редактируемые текстовые страницы</li>
  65 + <li>Контакты с интеграцией Google maps</li>
  66 + <li>Галерея фото</li>
  67 + <li>Блог с облаком тегов, портфолио и команда</li>
  68 + </ul>
  69 + <p style="margin-top:25px;"> </p>
  70 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Заказать такой сайт</a></p>
  71 + </div>
  72 +
  73 + <div class="col-sm-7 text-center">
  74 + <img class="img-responsive" src="img/main2.png" alt="">
  75 + </div>
  76 +
  77 + </div>
  78 + </div>
  79 + <div class="item">
  80 + <div class="row">
  81 + <div class="col-sm-6 right">
  82 + <h1>МУЛЬТИМЕДИЙНЫЙ ШАБЛОН</h1>
  83 + <ul class="list-style-none">
  84 + <li>Персональный подбор темы</li>
  85 + <li>Лаконичное оформление</li>
  86 + <li>Ваши корпоративные цвета</li>
  87 + <li>Легко настраиваемый шрифт</li>
  88 + </ul>
  89 + <p style="margin-top:25px;"> </p>
  90 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Заказать такой сайт</a></p>
  91 + </div>
  92 + <div class="col-sm-6">
  93 + <img class="img-responsive" src="img/template-abcore.png" alt="">
  94 + </div>
  95 + </div>
  96 + </div>
  97 + <div class="item">
  98 + <div class="row">
  99 + <div class="col-sm-5">
  100 + <h1>ВСТРОЕННЫЙ SEO-МОДУЛЬ</h1>
  101 + <p>Вы получаете полностью готовый сайт для дальнейшего SEO-продвижения, технологически отвечающий всем требованиям Google.</p>
  102 + </div>
  103 + <p style="margin-top:25px;"> </p>
  104 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Заказать такой сайт</a></p>
  105 + </div>
  106 + <div class="col-sm-7">
  107 + <img class="img-responsive" src="img/template-easy-code.png" alt="">
  108 + </div>
  109 + </div>
  110 + </div>
  111 + <!-- /.project owl-slider -->
  112 + </div>
  113 + </div>
  114 + </section>
  115 +
  116 + <section class="hidden-xs hidden-sm">
38 <!-- *** HOMEPAGE CAROUSEL *** 117 <!-- *** HOMEPAGE CAROUSEL ***
39 _________________________________________________________ --> 118 _________________________________________________________ -->
40 119
@@ -191,7 +270,7 @@ _________________________________________________________ --&gt; @@ -191,7 +270,7 @@ _________________________________________________________ --&gt;
191 <div class="row"> 270 <div class="row">
192 <div class="col-md-12"> 271 <div class="col-md-12">
193 <div class="heading text-center"> 272 <div class="heading text-center">
194 - <h2>Отзывы ваших клиентов</h2> 273 + <h2 class="big-text">Отзывы ваших клиентов</h2>
195 </div> 274 </div>
196 275
197 <!--<p class="lead">We have worked with many clients and we always like to hear they come out from the cooperation happy and satisfied. Have a look what our clients said about us.</p>--> 276 <!--<p class="lead">We have worked with many clients and we always like to hear they come out from the cooperation happy and satisfied. Have a look what our clients said about us.</p>-->
@@ -34,7 +34,36 @@ _________________________________________________________ --&gt; @@ -34,7 +34,36 @@ _________________________________________________________ --&gt;
34 34
35 <!-- *** LOGIN MODAL END *** --> 35 <!-- *** LOGIN MODAL END *** -->
36 36
37 - <section class="no-mb"> 37 + <section class="hidden-lg hidden-md main-car-mobile no-mb">
  38 + <div class="jumbotron">
  39 +
  40 + <div class="dark-mask"></div>
  41 +
  42 + <div class="container">
  43 + <div class="row mb-small">
  44 + <div class="col-sm-12 text-center">
  45 + <h1>Облачные хранилища</h1>
  46 + <h2>Сервер в облаке — ваше персональное хранилище для бизнеса.</h2>
  47 + </div>
  48 + </div>
  49 +
  50 + <div class="row">
  51 + <div class="col-sm-6 mb-small">
  52 + <img class="img-responsive" src="img/comp12.png" alt="">
  53 + </div>
  54 +
  55 + <div class="col-sm-6 text-center-xs">
  56 + <p class="text-uppercase">Быстрая синхронизация, Многофункциональность, Удаленный доступ с любой точки Земли.</p>
  57 + <p>И еще много предложений. Оставьте заявку, чтобы узнать все возможности.</p>
  58 + <p><a href="index2.html#packages" class="scroll-to btn btn-template-transparent-black">Заказать</a>
  59 + </p>
  60 +
  61 + </div>
  62 + </div>
  63 + </div>
  64 + </div>
  65 + </section>
  66 + <section class="no-mb hidden-xs hidden-sm">
38 <!-- *** JUMBOTRON *** 67 <!-- *** JUMBOTRON ***
39 _________________________________________________________ --> 68 _________________________________________________________ -->
40 69
@@ -34,7 +34,88 @@ _________________________________________________________ --&gt; @@ -34,7 +34,88 @@ _________________________________________________________ --&gt;
34 34
35 <!-- *** LOGIN MODAL END *** --> 35 <!-- *** LOGIN MODAL END *** -->
36 36
37 - <section> 37 + <section class="hidden-lg hidden-md main-car-mobile">
  38 + <div class="home-carousel">
  39 +
  40 + <div class="dark-mask"></div>
  41 +
  42 + <div class="container">
  43 + <div class="homepage owl-carousel">
  44 + <div class="item">
  45 + <div class="row">
  46 + <div class="col-sm-6 right">
  47 + <h2>“COLORFUL MIND” —<br/> ВАШ ПОМОЩНИК<br/> ПО РАЗВИТИЮ КРЕАТИВНОСТИ</h2>
  48 + <p>ТЕПЕРЬ ВЫ ВСЕГДА НАЙДЕТЕ ВДОХНОВЕНИЕ.</p>
  49 + <p style="font-size:14px;font-weight: 300;text-transform: inherit;">Мы хотим научить вас видеть особенное в обыденном. Приложение “Colorful Mind” вдохновит рисовать картины, писать книги, сочинять стихи, замечать детали, быстро генерировать идеи. Момент вдохновения похож на вспышку, и теперь вы будете видеть ее везде.</p>
  50 + <p style="margin-top:25px;"> </p>
  51 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Заказать такой сайт</a></p>
  52 + </div>
  53 + <div class="col-sm-6">
  54 + <img class="img-responsive" src="img/startup1.png" alt="">
  55 + </div>
  56 + </div>
  57 + </div>
  58 + <div class="item">
  59 + <div class="row">
  60 +
  61 + <div class="col-sm-8">
  62 + <h2>ВОЗМОЖНОСТИ ПРИЛОЖЕНИЯ “COLORFUL MIND”</h2>
  63 + <ul class="list-style-none">
  64 + <li style="font-size:14px;">Подбор цвета дня на основе быстрого теста вашего настроения.</li>
  65 + <li style="font-size:14px;">Веселые и интересные истории из жизни великих художников, музыкантов, писателей, танцоров</li>
  66 + <li style="font-size:14px;">Более 1000 тестов по развитию креатива</li>
  67 + <li style="font-size:14px;">Возможность поиска вдохновения: подборка музыки, изображений, вопросов, цитат </li>
  68 + <li style="font-size:14px;">Составляйте дневник успехов + идей</li>
  69 + </ul>
  70 + <p style="margin-top:25px;"> </p>
  71 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Заказать такой сайт</a></p>
  72 + </div>
  73 +
  74 + <div class="col-sm-4 text-center">
  75 + <img class="img-responsive" src="img/cmind.png" alt="">
  76 + </div>
  77 +
  78 + </div>
  79 + </div>
  80 + <div class="item">
  81 + <div class="row">
  82 + <div class="col-sm-6 right">
  83 + <h1>ДИЗАЙН ПРИЛОЖЕНИЯ</h1>
  84 + <ul class="list-style-none">
  85 + <li>Минималистичный и простой дизайн. <br/>Понятный интерфейс. <br/>Яркая мультимедиа. </li>
  86 + </ul>
  87 + <p style="margin-top:25px;"> </p>
  88 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Заказать такой сайт</a></p>
  89 + </div>
  90 + <div class="col-sm-6">
  91 + <img class="img-responsive" src="img/design2.png" alt="">
  92 + </div>
  93 + </div>
  94 + </div>
  95 + <div class="item">
  96 + <div class="row">
  97 + <div class="col-sm-6">
  98 + <h1>КАК ЭТО РАБОТАЕТ</h1>
  99 + <ul class="list-style-none">
  100 + <li>Храните понравившуюся информацию с “Colorful Mind”.</li>
  101 + <li>Развивайте креатив самостоятельно или взаимодействуйте с другими пользователями.</li>
  102 + <li>Играйте в режиме дуэли.</li>
  103 + <li>Начните искать свое вдохновение уже сейчас!</li>
  104 + </ul>
  105 + <p style="margin-top:25px;"> </p>
  106 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Заказать такой сайт</a></p>
  107 + </div>
  108 + <div class="col-sm-6">
  109 + <img class="img-responsive" src="img/phones3.png" alt="">
  110 + </div>
  111 + </div>
  112 + </div>
  113 + </div>
  114 + <!-- /.project owl-slider -->
  115 + </div>
  116 + </div>
  117 + </section>
  118 + <section class="hidden-xs hidden-sm">
38 <!-- *** HOMEPAGE CAROUSEL *** 119 <!-- *** HOMEPAGE CAROUSEL ***
39 _________________________________________________________ --> 120 _________________________________________________________ -->
40 121
@@ -227,7 +308,7 @@ _________________________________________________________ --&gt; @@ -227,7 +308,7 @@ _________________________________________________________ --&gt;
227 <div class="col-md-12"> 308 <div class="col-md-12">
228 <div class="icon icon-lg"><i class="fa fa-file-code-o"></i> 309 <div class="icon icon-lg"><i class="fa fa-file-code-o"></i>
229 </div> 310 </div>
230 - <h1>НУЖНО ПОВЫСИТЬ КРЕАТИВНОСТЬ?</h1> 311 + <h1 class="big-text">НУЖНО ПОВЫСИТЬ КРЕАТИВНОСТЬ?</h1>
231 <p class="lead">Не позволяйте себе терять время. Ищите вдохновение и делитесь им с друзьями. Приложение доступно в Google Play, App Store, Microsoft.</p> 312 <p class="lead">Не позволяйте себе терять время. Ищите вдохновение и делитесь им с друзьями. Приложение доступно в Google Play, App Store, Microsoft.</p>
232 <p class="text-center"> 313 <p class="text-center">
233 <a href="index.html" class="btn btn-template-transparent-black btn-lg modal-link" data-title="Заказать" data-form="artboxcore-modal">Скачать</a> 314 <a href="index.html" class="btn btn-template-transparent-black btn-lg modal-link" data-title="Заказать" data-form="artboxcore-modal">Скачать</a>
@@ -274,7 +355,7 @@ _________________________________________________________ --&gt; @@ -274,7 +355,7 @@ _________________________________________________________ --&gt;
274 <div class="row"> 355 <div class="row">
275 <div class="col-md-12"> 356 <div class="col-md-12">
276 <div class="heading text-center"> 357 <div class="heading text-center">
277 - <h2>Отзывы</h2> 358 + <h2 class="big-text">Отзывы</h2>
278 </div> 359 </div>
279 360
280 <p class="lead">Немного впечатлений от наших пользователей</p> 361 <p class="lead">Немного впечатлений от наших пользователей</p>
@@ -366,7 +447,7 @@ _________________________________________________________ --&gt; @@ -366,7 +447,7 @@ _________________________________________________________ --&gt;
366 447
367 <div class="col-md-12"> 448 <div class="col-md-12">
368 <div class="heading text-center"> 449 <div class="heading text-center">
369 - <h2>ЧИТАЙТЕ НАШ БЛОГ</h2> 450 + <h2 class="big-text">ЧИТАЙТЕ НАШ БЛОГ</h2>
370 </div> 451 </div>
371 452
372 <p class="lead">У всех есть свои секреты. И мы делимся ими с вами. Только действительно полезные советы и обзоры. Узнайте больше как повысить свою креативность и найти вдохновение. <a href="blog.html"><span class="accent">В блог.</span></a> 453 <p class="lead">У всех есть свои секреты. И мы делимся ими с вами. Только действительно полезные советы и обзоры. Узнайте больше как повысить свою креативность и найти вдохновение. <a href="blog.html"><span class="accent">В блог.</span></a>
@@ -34,7 +34,51 @@ _________________________________________________________ --&gt; @@ -34,7 +34,51 @@ _________________________________________________________ --&gt;
34 34
35 <!-- *** LOGIN MODAL END *** --> 35 <!-- *** LOGIN MODAL END *** -->
36 36
37 - <section> 37 + <section class="hidden-lg hidden-md main-car-mobile">
  38 + <div class="home-carousel">
  39 +
  40 + <div class="dark-mask"></div>
  41 +
  42 + <div class="container">
  43 + <div class="homepage owl-carousel">
  44 + <div class="item">
  45 + <div class="row">
  46 + <div class="col-sm-5 right">
  47 + <h1>ПУТЕШЕСТВИЯ В ЛЮБУЮ ТОЧКУ ПЛАНЕТЫ</h1>
  48 + <p>Личный подбор маршрута. Планирование поездки. Бронь билетов. Страховка.</p>
  49 + <p style="margin-top:25px;"> </p>
  50 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Оставить заявку</a></p>
  51 + </div>
  52 + <div class="col-sm-7">
  53 + <img class="img-responsive" src="img/phones1.png" alt="">
  54 + </div>
  55 + </div>
  56 + </div>
  57 + <div class="item">
  58 + <div class="row">
  59 +
  60 + <div class="col-sm-5">
  61 + <h2>ЗАКАЗ ПОЕЗДКИ ОНЛАЙН</h2>
  62 + <ul class="list-style-none">
  63 + <li>Оставляйте заявку и наши менеджеры с вами свяжутся в ближайшее время.</li>
  64 + </ul>
  65 + <p style="margin-top:25px;"> </p>
  66 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Оставить заявку</a></p>
  67 + </div>
  68 +
  69 + <div class="col-sm-7 text-center">
  70 + <img class="img-responsive" src="img/phones2.png" alt="">
  71 + </div>
  72 +
  73 + </div>
  74 + </div>
  75 +
  76 + </div>
  77 + <!-- /.project owl-slider -->
  78 + </div>
  79 + </div>
  80 + </section>
  81 + <section class="hidden-xs hidden-sm">
38 <!-- *** HOMEPAGE CAROUSEL *** 82 <!-- *** HOMEPAGE CAROUSEL ***
39 _________________________________________________________ --> 83 _________________________________________________________ -->
40 84
@@ -33,8 +33,50 @@ _________________________________________________________ --&gt; @@ -33,8 +33,50 @@ _________________________________________________________ --&gt;
33 </div> 33 </div>
34 34
35 <!-- *** LOGIN MODAL END *** --> 35 <!-- *** LOGIN MODAL END *** -->
  36 + <section class="hidden-lg hidden-md main-car-mobile">
  37 + <div class="home-carousel">
  38 +
  39 + <div class="dark-mask"></div>
  40 +
  41 + <div class="container">
  42 + <div class="homepage owl-carousel">
  43 + <div class="item">
  44 + <div class="row">
  45 + <div class="col-sm-4">
  46 + <img class="img-responsive" src="img/ph_gal_01.png" alt="">
  47 + </div>
  48 + <div class="col-sm-8 right">
  49 + <h1>ПОРТФОЛИО ФОТОГРАФА НИКОЛАСА</h1>
  50 + <p>Рады видеть вас в портфолио портретного фото-художника Николаса. Его работы завораживают тем, насколько тонко он чувствует своих моделей. Мягкие полутени, выразительность взгляда, черно-белая фотография настоящего профессионала своего дела.</p>
  51 + <p style="margin-top:25px;"> </p>
  52 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Заказать съёмку</a></p>
  53 + </div>
  54 + </div>
  55 + </div>
  56 + <div class="item">
  57 + <div class="row">
36 58
37 - <section> 59 +
  60 + <div class="col-sm-4 text-center">
  61 + <img class="img-responsive" src="img/ph_gal_02.png" alt="">
  62 + </div>
  63 + <div class="col-sm-8">
  64 + <h2>БОЛЕЕ 600 ФОТО-РАБОТ</h2>
  65 + <ul class="list-style-none">
  66 + <li>Портретные снимки детей, женщин и мужчин любого возраста. Складывается ощущение, что Николас знаком с каждым уже много лет.</li>
  67 + </ul>
  68 + <p style="margin-top:25px;"> </p>
  69 + <p><a href="#" class="btn btn-template-transparent-primary modal-link" data-title="Заказать" data-form="artboxcore-modal">Заказать съёмку</a></p>
  70 + </div>
  71 +
  72 + </div>
  73 + </div>
  74 + </div>
  75 + <!-- /.project owl-slider -->
  76 + </div>
  77 + </div>
  78 + </section>
  79 + <section class="hidden-xs hidden-sm">
38 <!-- *** HOMEPAGE CAROUSEL *** 80 <!-- *** HOMEPAGE CAROUSEL ***
39 _________________________________________________________ --> 81 _________________________________________________________ -->
40 82