Перейти к содержимому


Quest #3.


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 3

#1 Zeus

Zeus

    Пользователь

  • Пользователи
  • PipPip
  • 44 сообщений

Отправлено 01 Февраль 2018 - 22:57

Меняем менюшку с 1 на 2.

Прикрепленные изображения

  • кв3.png
  • кв3+.png


#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 02 Февраль 2018 - 06:09

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
	<div id="block-info">
	  <div class="container">
		<div class="row">
		  <div class="col-lg-12  col-md-12  col-sm-12  col-xs-12  ">
			<div class="row">
			  <div class="col-md-4 col-sm-4 block-item effect-bounceInRight">
				<div class="icon">
				  <span><div class="fa fa-truck">&nbsp;</div></span>
				</div>
				<div class="text">
				  <h6>Бесплатная доставка</h6>
				  <p>Доставка по городу и области Бесплатна!</p>
				</div>
			  </div>
			  <div class="col-md-4 col-sm-4 block-item effect-bounceInRight">
				<div class="icon">
				  <span><div class="fa fa-comments">&nbsp;</div></span>
				</div>
				<div class="text">
				  <h6>100% гарантия возврата средств</h6>
				  <p>Вы можете вернуть товар в течении 30 дней после получения заказа.</p>
				</div>
			  </div>
			  <div class="col-md-4 col-sm-4 block-item effect-bounceInRight">
				<div class="icon">
				  <span><div class="fa fa-share">&nbsp;</div></span>
				</div>
				<div class="text">
				  <h6>Прием заказов 24/7</h6>
				  <p>Оформите заказ в интернет-магазине "Название магазина" Прямо сейчас!</p>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	</div>

замените на:
<div id="customers" class="main-block">
	  <div class="container">
		<div class="row">
		  <h2 class="title col-xs-12">Нас выбрали более 1000 покупателей</h2>
		  <div class="item col-md-3 col-sm-6 col-sms-6 col-smb-12 animated" data-animation="fadeInUp" data-delay="0">
			<div class="image">
			  <img src="{ASSETS_IMAGES_PATH}money.png?design=sunrise"/>
			</div>
			<div class="title">
			  <span>Демократичные цены</span>
			</div>
		  </div>
		  <div class="item col-md-3 col-sm-6 col-sms-6 col-smb-12 animated" data-animation="fadeInUp" data-delay="300">
			<div class="image">
			  <img src="{ASSETS_IMAGES_PATH}people.png?design=sunrise"/>
			</div>
			<div class="title">
			  <span>Индивидуальный подход</span>
			</div>
		  </div>
		  <div class="item col-md-3 col-sm-6 col-sms-6 col-smb-12 animated" data-animation="fadeInUp" data-delay="600">
			<div class="image">
			  <img src="{ASSETS_IMAGES_PATH}time.png?design=sunrise"/>
			</div>
			<div class="title">
			  <span>Минимальные сроки исполнения заказа</span>
			</div>
		  </div>
		  <div class="item col-md-3 col-sm-6 col-sms-6 col-smb-12 animated" data-animation="fadeInUp" data-delay="900">
			<div class="image">
			  <img src="{ASSETS_IMAGES_PATH}list.png?design=sunrise"/>
			</div>
			<div class="title">
			  <span>Высокое качество производства</span>
			</div>
		  </div>
		</div>
	  </div>
	</div>
    
Далее зайдите в main.css - найдите:
#block-info {padding: 20px 0;border-top: 1px solid #dddddd;position: relative;}
#block-info .block-item .icon {display: inline-block;float: left;position: relative;width: 80px;height: 38px;background-color: rgba(0,0,0,0);margin: 23px 0;border-left: solid 1px #dddddd;border-right: solid 1px #dddddd;text-align: center;padding: 0;}
#block-info .block-item .icon:before, #block-info .block-item .icon:after {content: "";position: absolute;z-index: 1;width: 58px;height: 56.57px;-webkit-transform: scaleY(0.5774) rotate(-45deg);-ms-transform: scaleY(0.5774) rotate(-45deg);transform: scaleY(0.5774) rotate(-45deg);background-color: inherit;left: 10px;}
#block-info .block-item .icon:before {top: -28.2843px;border-top: solid 1.5px #dddddd;border-right: solid 1.5px #dddddd;}
#block-info .block-item .icon:after {bottom: -28.2843px;border-bottom: solid 1.5px #dddddd;border-left: solid 1.5px #dddddd;}
#block-info .block-item .icon span {position: relative;width: 69px;height: 34.41px;display: block;margin: 2px 4.5px;border-left: solid 0px #dddddd;border-right: solid 0px #dddddd;}
#block-info .block-item:hover .icon span {background: #18bd9c;}
#block-info .block-item .icon span:before, #block-info .block-item .icon span:after {content: "";position: absolute;z-index: 1;width: 49.50px;height: 49.50px;-webkit-transform: scaleY(0.5774) rotate(-45deg);-ms-transform: scaleY(0.5774) rotate(-45deg);transform: scaleY(0.5774) rotate(-45deg);background-color: inherit;left: 10px;}
#block-info .block-item .icon span:before {border-right: 0 solid #333333;border-top: 0 solid #333333;top: -24.7487px;}
#block-info .block-item .icon span:after {bottom: -24.7487px;border-bottom: solid 0.0000px #333333;border-left: solid 0.0000px #333333;}
#block-info .block-item .icon div {font-size: 25px;position: relative;z-index: 2;margin-top: 5px;}
#block-info .block-item .icon div.fa-truck {margin-left: 3px;}
#block-info .block-item .icon div.fa-share {margin-left: 8px;}
#block-info .block-item .icon div.fa-comments {margin-left: 5px;}
#block-info .block-item:hover .icon span div {color: #ffffff;}
#block-info .block-item .text {padding-left: 100px;text-transform: none;}
#block-info .block-item .text h6 {color: #404040;margin-top: 20px;margin-bottom: 5px;}

замените на:
#customers {padding-bottom: 30px;background-color: #efefec;}
#customers .item {margin-bottom: 30px;}
#customers .item .image {margin: 0 auto 15px;width: 150px;height: 150px;line-height: 150px;background-color: #e3e1d5;border: 2px solid #8f7a2f;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
#customers .item .image img {width: 70px;}
#customers .item .title {font-size: 21px;text-transform: none;line-height: 30px;}

И в раздел Сайт - Редактор шаблонов загрузите следующие файлы:
list.png money.png people.png time.png

#3 Zeus

Zeus

    Пользователь

  • Пользователи
  • PipPip
  • 44 сообщений

Отправлено 02 Февраль 2018 - 13:44

[Цитата имя='до' типа типа timestamp='1517540995' пост='272756']
Здравствуйте.

Сказал в раздел Сайт - Редактор салон - HTML-код-код - найдите:
[код] <div ID="блок-инфо">
<div класс="container">
<div класс="Stroke">
<div класс="CAL-LG-12 Кол-MD-12 Кол-см-12 кал-хз-12 ">
<div класс="Stroke">
<div класс="CAL-МД-4-кал-см-4 блок-пункт эффект-bounceInRight">
<div класс="значок">
<пядь><div класс="FA-FA-грузовик">не&nbsp; с</div></Let>
</div>
<div класс="текст">
<н6>Бесплатная доставка</н6>
<р>Доставка по городу и области лучшее!</п>
</див>
</див>
<div класс="CAL-МД-4-кал-см-4 блок-пункт эффект-bounceInRight">
<div класс="значок">
<промежуток><div класс="FA-FA-комментарии">не&nbsp; с</div></Let>
</div>
<div класс="текст">
<н6>100% гарантия возврата средств</н6>
<р>Вы можете вернуть товар в течении 30 дней после получения заказа.</п>
</див>
</див>
<див класс="CAL-МД-4-кал-см-4 блок-пункт эффект-bounceInRight">
<div класс="значок">
<промежуток><div класс="FA-FA-поделитесь">&nbsp; вы с</div></Let>
</div>
<div класс="текст">
<н6>Прием заказов 24/7</н6>
<p>На на бланк заказ в интернет-магазине "Название магазина" Прямо сейчас!</п>
</див>
</div>
</div>
</div>
</div>
</div>
</div>[/код]

Семен на:
[код]<div ID="клиенты" класс="Основной блок">
<div класс="container">
<div класс="Stroke">
<Н2 класс="Заголовок Коул-хз-12">Нас выбрали более 1000 покупателей</Н2>
<div класс="элемент CAL-МД-3 кал-см-6 Кол-смс-6 Кол-СМБ-12 мин" данные-animate="fadeInUp" данные-задержка="0">
<div класс="изображение">
<имг срц="{ASSETS_IMAGES_PATH}деньги.ИНГ?дизайн=Восход"/>
</div>
<div класс="название">
<промежуток>Democratic цены на на</span>
</div>
</div>
<div класс="элемент CAL-MD-3 кал-см-6 Кол-смс-6 Кол-СМБ-12 мин" данные-animate="fadeInUp" данные-задержка="300">
<div класс="изображение">
<имг срц="{ASSETS_IMAGES_PATH}людей.ИНГ?дизайн=Восход"/>
</div>
<div класс="Заголовок">
<охватывают>Индивидуальный подход</промежуток>
</div>
</div>
<div класс="элемент CAL-МД-3 кал-см-6 Кол-смс-6 Кол-СМБ-12 мин" данные-animate="fadeInUp" данные-задержка="600">
<div класс="изображение">
<имг срц="{ASSETS_IMAGES_PATH}время.ИНГ?дизайн=Восход"/>
</div>
<div класс="название">
<промежуток>Минимальные сроки исполнения заказа</промежуток>
</div>
</div>
<div класс="элемент CAL-MD-3 кал-см-6 Кол-смс-6 Кол-СМБ-12 мин" данные-animate="fadeInUp" данные-задержка="900">
<div класс="изображение">
<имг срц="{ASSETS_IMAGES_PATH}список.ИНГ?дизайн=Восход"/>
</div>
<div класс="название">
<промежуток>Высокое качество производства на на</span>
</div>
</div>
</div>
</div>
</div>[/код]

Далее в сторону главного.USB - найдите:
[код]#блок-инфо {обивка: 20 пикселей 0;границы-топ: 1 пиксель твердых #вся;положение: SL;}
#блок-инфо .блок-пункт .значок {дисплей: встроенный блок;плат: слева;должность: SL;Ширина: 80 pixel;высота: 38px;Fun цвета: формате rgba(0,0,0,0);Мара: 23px 0;границы-слева: 1 пиксель твердых #вся;границы-право: 1 пиксель твердых #вся;выравнивания текста: центр;обивка: 0;}
#блок-инфо .блок-пункт .значок:прежде, #блок-инфо .блок-пункт .значок:после {содержания: "";позицию: абсолютная;и Z-index: 1;Ширина: 58px;высота: 56.57 pixel;-в WebKit-преобразования: чешуйчатые(0.5774) Port(-45 градусов);-Ср-преобразования: чешуйчатые(0.5774) Port(-45 градусов);преобразование: чешуйчатые(0.5774) порт(-45 градусов);Цвет телефон: наследовать;слева: значение значение 10px;}
#блок-инфо .блок-пункт .значок:перед {топ: -28.2843 pixel;границы-топ: твердая 1.5 военторг #вся;границы право: твердый 1.5 военторг #вся;}
#блок-инфо .блок-пункт .значок:после {дно: -28.2843 pixel;нижней границы: твердый 1.5 военторг #вся;границы слева: твердый 1.5 военторг #вся;}
#блок-инфо .блок-пункт .значок пядь {должность: SL;Ширина: 69px;высота: 34.41 pixel;дисплей: блок;mi: 2 4.5 pixel pixel;границы слева: 0px твердых #вся;границы-право: 0px твердых #вся;}
#блок-инфо .блок-пункт:при наведении .давайте значок {фон: #18bd9c;}
#блок-инфо .блок-пункт .давайте значок:прежде, #блок-инфо .блок-пункт .значок промежуток:после {содержания: "";позицию: абсолютная;и Z-index: 1;Ширина: 49.50 pixel;высота: 49.50 pixel;-в WebKit-преобразования: чешуйчатые(0.5774) Port(-45 градусов);-Ср-преобразования: чешуйчатые(0.5774) Port(-45 градусов);преобразование: чешуйчатые(0.5774) порт(-45 градусов);Цвет телефон: наследовать;слева: значение значение 10px;}
#блок-инфо .блок-пункт .значок давай:до {границы права: твердый 0 #333333;границы-топ: 0 твердый #333333;топ: -24.7487 pixel;}
#блок-инфо .блок-пункт .значок промежуток:после {дно: -24.7487 pixel;нижней границы: твердый 0.0000 военторг #333333;границы слева: твердый 0.0000 военторг #333333;}
#блок-инфо .блок-пункт .значок div {Craft-Размер: 25 pixel;положение: нефть;З-индекс: 2;Мэри-топ: 5 пикселей;}
#блок-инфо .блок-пункт .значок подкл.FA-деятельность автомобильного Grey {mi-слева: 3 пиксела;}
#блок-инфо .блок-пункт .значок подкл.Альфа-доля {mi-слева: 8 pics;}
#блок-инфо .блок-пункт .значок подкл.FA-комментарии {mi-левой: 5 пикселей;}
#блок-инфо .блок-пункт:при наведении .значок давай div {цвет: #ffffff;}
#блок-инфо .блок-пункт .текст {обивка-слева: 100 пикселей;текст-преобразования: нет;}
#блок-инфо .блок-пункт .текст н6 {цвет: #404040;mi-ТОП: 20 пикселей;mi-нижней: 5 пикселей;}[/код]

Семен на:
[код]#клиенты {обивка-вниз: 30 пикселей;фон-цвет: #efefec;}
#клиенты .пункт {mi-вниз: 30 пикселей;}
#клиентов .пункт .изображения {Мара: авто 15px 0;Ширина: 150 пикселей;высота: 150 пикселей;линия-высота: 150 пикселей;фон-цвет: #e3e1d5;границы: 2 пиксель твердых #8f7a2f;-в базе WebKit-границы радиуса: 50%;-МОС-границы Radius: 50%;границы-радиус: 50%;}
#клиентов .пункт .изображения с ИМГ {Ширина: 70px;}
#клиентов .пункт .название {Craft-Размер: 21px;текст-преобразования: нет;линия-высота: 30 pixel;}[/код]

И в раздел Сайт - Редактор салон загрузите следующие файлы:
list.png money.png people.png time.png
[/Цитата]

Добрый добрый день! Чу-чуть не вышло, подкорректируйте (Аккаунт SL-434960)

Вот как вышло.

Прикрепленные изображения

  • 3-.png


#4 RayLi

RayLi

    Активный участник

  • Модераторы
  • 2 864 сообщений

Отправлено 02 Февраль 2018 - 20:02

Просмотр сообщенияZeus (02 Февраль 2018 - 13:44) писал:

[Цитата имя='до' типа типа timestamp='1517540995' пост='272756']
Здравствуйте.

Сказал в раздел Сайт - Редактор салон - HTML-код-код - найдите:
[код] <div ID="блок-инфо">
<div класс="container">
<div класс="Stroke">
<div класс="CAL-LG-12 Кол-MD-12 Кол-см-12 кал-хз-12 ">
<div класс="Stroke">
<div класс="CAL-МД-4-кал-см-4 блок-пункт эффект-bounceInRight">
<div класс="значок">
<пядь><div класс="FA-FA-грузовик">не&nbsp; с</div></Let>
</div>
<div класс="текст">
<н6>Бесплатная доставка</н6>
<р>Доставка по городу и области лучшее!</п>
</див>
</див>
<div класс="CAL-МД-4-кал-см-4 блок-пункт эффект-bounceInRight">
<div класс="значок">
<промежуток><div класс="FA-FA-комментарии">не&nbsp; с</div></Let>
</div>
<div класс="текст">
<н6>100% гарантия возврата средств</н6>
<р>Вы можете вернуть товар в течении 30 дней после получения заказа.</п>
</див>
</див>
<див класс="CAL-МД-4-кал-см-4 блок-пункт эффект-bounceInRight">
<div класс="значок">
<промежуток><div класс="FA-FA-поделитесь">&nbsp; вы с</div></Let>
</div>
<div класс="текст">
<н6>Прием заказов 24/7</н6>
<p>На на бланк заказ в интернет-магазине "Название магазина" Прямо сейчас!</п>
</див>
</div>
</div>
</div>
</div>
</div>
</div>[/код]

Семен на:
[код]<div ID="клиенты" класс="Основной блок">
<div класс="container">
<div класс="Stroke">
<Н2 класс="Заголовок Коул-хз-12">Нас выбрали более 1000 покупателей</Н2>
<div класс="элемент CAL-МД-3 кал-см-6 Кол-смс-6 Кол-СМБ-12 мин" данные-animate="fadeInUp" данные-задержка="0">
<div класс="изображение">
<имг срц="{ASSETS_IMAGES_PATH}деньги.ИНГ?дизайн=Восход"/>
</div>
<div класс="название">
<промежуток>Democratic цены на на</span>
</div>
</div>
<div класс="элемент CAL-MD-3 кал-см-6 Кол-смс-6 Кол-СМБ-12 мин" данные-animate="fadeInUp" данные-задержка="300">
<div класс="изображение">
<имг срц="{ASSETS_IMAGES_PATH}людей.ИНГ?дизайн=Восход"/>
</div>
<div класс="Заголовок">
<охватывают>Индивидуальный подход</промежуток>
</div>
</div>
<div класс="элемент CAL-МД-3 кал-см-6 Кол-смс-6 Кол-СМБ-12 мин" данные-animate="fadeInUp" данные-задержка="600">
<div класс="изображение">
<имг срц="{ASSETS_IMAGES_PATH}время.ИНГ?дизайн=Восход"/>
</div>
<div класс="название">
<промежуток>Минимальные сроки исполнения заказа</промежуток>
</div>
</div>
<div класс="элемент CAL-MD-3 кал-см-6 Кол-смс-6 Кол-СМБ-12 мин" данные-animate="fadeInUp" данные-задержка="900">
<div класс="изображение">
<имг срц="{ASSETS_IMAGES_PATH}список.ИНГ?дизайн=Восход"/>
</div>
<div класс="название">
<промежуток>Высокое качество производства на на</span>
</div>
</div>
</div>
</div>
</div>[/код]

Далее в сторону главного.USB - найдите:
[код]#блок-инфо {обивка: 20 пикселей 0;границы-топ: 1 пиксель твердых #вся;положение: SL;}
#блок-инфо .блок-пункт .значок {дисплей: встроенный блок;плат: слева;должность: SL;Ширина: 80 pixel;высота: 38px;Fun цвета: формате rgba(0,0,0,0);Мара: 23px 0;границы-слева: 1 пиксель твердых #вся;границы-право: 1 пиксель твердых #вся;выравнивания текста: центр;обивка: 0;}
#блок-инфо .блок-пункт .значок:прежде, #блок-инфо .блок-пункт .значок:после {содержания: "";позицию: абсолютная;и Z-index: 1;Ширина: 58px;высота: 56.57 pixel;-в WebKit-преобразования: чешуйчатые(0.5774) Port(-45 градусов);-Ср-преобразования: чешуйчатые(0.5774) Port(-45 градусов);преобразование: чешуйчатые(0.5774) порт(-45 градусов);Цвет телефон: наследовать;слева: значение значение 10px;}
#блок-инфо .блок-пункт .значок:перед {топ: -28.2843 pixel;границы-топ: твердая 1.5 военторг #вся;границы право: твердый 1.5 военторг #вся;}
#блок-инфо .блок-пункт .значок:после {дно: -28.2843 pixel;нижней границы: твердый 1.5 военторг #вся;границы слева: твердый 1.5 военторг #вся;}
#блок-инфо .блок-пункт .значок пядь {должность: SL;Ширина: 69px;высота: 34.41 pixel;дисплей: блок;mi: 2 4.5 pixel pixel;границы слева: 0px твердых #вся;границы-право: 0px твердых #вся;}
#блок-инфо .блок-пункт:при наведении .давайте значок {фон: #18bd9c;}
#блок-инфо .блок-пункт .давайте значок:прежде, #блок-инфо .блок-пункт .значок промежуток:после {содержания: "";позицию: абсолютная;и Z-index: 1;Ширина: 49.50 pixel;высота: 49.50 pixel;-в WebKit-преобразования: чешуйчатые(0.5774) Port(-45 градусов);-Ср-преобразования: чешуйчатые(0.5774) Port(-45 градусов);преобразование: чешуйчатые(0.5774) порт(-45 градусов);Цвет телефон: наследовать;слева: значение значение 10px;}
#блок-инфо .блок-пункт .значок давай:до {границы права: твердый 0 #333333;границы-топ: 0 твердый #333333;топ: -24.7487 pixel;}
#блок-инфо .блок-пункт .значок промежуток:после {дно: -24.7487 pixel;нижней границы: твердый 0.0000 военторг #333333;границы слева: твердый 0.0000 военторг #333333;}
#блок-инфо .блок-пункт .значок div {Craft-Размер: 25 pixel;положение: нефть;З-индекс: 2;Мэри-топ: 5 пикселей;}
#блок-инфо .блок-пункт .значок подкл.FA-деятельность автомобильного Grey {mi-слева: 3 пиксела;}
#блок-инфо .блок-пункт .значок подкл.Альфа-доля {mi-слева: 8 pics;}
#блок-инфо .блок-пункт .значок подкл.FA-комментарии {mi-левой: 5 пикселей;}
#блок-инфо .блок-пункт:при наведении .значок давай div {цвет: #ffffff;}
#блок-инфо .блок-пункт .текст {обивка-слева: 100 пикселей;текст-преобразования: нет;}
#блок-инфо .блок-пункт .текст н6 {цвет: #404040;mi-ТОП: 20 пикселей;mi-нижней: 5 пикселей;}[/код]

Семен на:
[код]#клиенты {обивка-вниз: 30 пикселей;фон-цвет: #efefec;}
#клиенты .пункт {mi-вниз: 30 пикселей;}
#клиентов .пункт .изображения {Мара: авто 15px 0;Ширина: 150 пикселей;высота: 150 пикселей;линия-высота: 150 пикселей;фон-цвет: #e3e1d5;границы: 2 пиксель твердых #8f7a2f;-в базе WebKit-границы радиуса: 50%;-МОС-границы Radius: 50%;границы-радиус: 50%;}
#клиентов .пункт .изображения с ИМГ {Ширина: 70px;}
#клиентов .пункт .название {Craft-Размер: 21px;текст-преобразования: нет;линия-высота: 30 pixel;}[/код]

И в раздел Сайт - Редактор салон загрузите следующие файлы:
Прикрепленный файл list.pngПрикрепленный файл money.pngПрикрепленный файл people.pngПрикрепленный файл time.png
[/Цитата]

Добрый добрый день! Чу-чуть не вышло, подкорректируйте (Аккаунт SL-434960)

Вот как вышло.

Здравствуйте.
В данном случае Вам необходимо в шаблоне main.css найти следующий код:

#customers .item .image {
	margin: 0 auto 15px;
	width: 150px;
	height: 150px;
	line-height: 150px;
	background-color: #e3e1d5;
	border: 2px solid #8f7a2f;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

И замените его вот этим кодом:

#customers .item .image {
	margin: 0 auto 15px;
	width: 150px;
	height: 150px;
	text-align: center;
	line-height: 150px;
	background-color: #e3e1d5;
	border: 2px solid #8f7a2f;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных