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


Страница (Нам Есть Чем Гордиться)


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

#1 ВячеславФ

ВячеславФ

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

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

Отправлено 20 Март 2019 - 17:24

1 Сделать рамки со скругленными углами для картинок.
2. Сместить картинку от края.
3 Слева убрать тонировку поля.

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

  • блок преимущества.jpg


#2 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 22 Март 2019 - 06:43

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#promo {position: relative;overflow: hidden;background: linear-gradient(to right, #f9f3ec 50%, #ffffff 50%);}
    
замените на:
#promo {position: relative;overflow: hidden;}

далее найдите:
#promo .block-right .image1 {position: absolute;top: 0%;right: 20%;z-index: 1;}
#promo .block-right .image2 {position: relative;z-index: 1;}

замените на:
#promo .block-right .image1 {position: absolute;top: 0%;right: 20%;z-index: 1;}
#promo .block-right .image1 img {border-radius:20px;}
#promo .block-right .image2 {position: relative;z-index: 1;margin-right: 20px;}
#promo .block-right .image2 img {border-radius:20px;}


#3 ВячеславФ

ВячеславФ

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

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

Отправлено 22 Март 2019 - 10:15

Спасибо. Но вышла какая то ерунда.
1.Фон лучше наверное сделать на весь экран.
2.картинки справа уменьшить в размерах и подскажите сразу где эти размеры можно менять(на будущее). как передвигать или менять надпись (Только у нас).
3. как сделать чтобы название категории отображалось полностью в две строки например:
Коллекция
Восторг

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

  • 2019-03-22_10h07_02.jpg


#4 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 23 Март 2019 - 03:40

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#promo .block-right {width: 50%;position: relative;margin-top: 25px;}
#promo .block-right h3.title {position: relative;font-size: 90px;font-weight: bold;text-transform: uppercase;z-index: 2;}
#promo .block-right h3.title span {display: block;}
#promo .block-right .image1 {position: absolute;top: 0%;right: -20%;z-index: 1;}
#promo .block-right .image2 {position: relative;z-index: 1;}
#promo .block-right .year {color: rgba(42, 42, 42, 0.1);font-size: 200px;font-weight: bold;position: absolute;bottom: 0%;right: -25%;}

замените на:
#promo .block-right {width: 50%;position: relative;margin-top: 25px;}
#promo .block-right h3.title {position: relative;font-size: 70px;font-weight: bold;text-transform: uppercase;z-index: 2;}
#promo .block-right h3.title span {display: block;}
#promo .block-right .image1 {position: absolute;top: 0%;right: 5%;z-index: 1;}
#promo .block-right .image1 img { max-width: 250px; border-radius:5px;}
#promo .block-right .image2 {position: relative;z-index: 1;}
#promo .block-right .image2 img { max-width: 250px; border-radius:5px;}
#promo .block-right .year {color: rgba(42, 42, 42, 0.1);font-size: 150px;font-weight: bold;position: absolute;bottom: 0%;right: 0%;}

В шаблоне HTML найдите:
		  <div class="block-left">
			<h3 class="title">Нам есть, чем гордиться!</h3>
			<div class="items">
			  <div class="item">
				<h4 class="title"><i class="material-icons">card_giftcard</i><span>С нами выгодно</span></h4>
				<div class="text">Вы покупаете товары по выгодным ценам, поскольку у нас нет затрат  на содержание торговых площадей</div>
			  </div>
			  <div class="item">
				<h4 class="title"><i class="material-icons">nature_people</i><span>С нами безопасно</span></h4>
				<div class="text">Вся наша продукция изготовлена из натуральных и экологичных материалов</div>
			  </div>
			  <div class="item">
				<h4 class="title"><i class="material-icons">palette</i><span>С нами интересно</span></h4>
				<div class="text">Новинки текстильной дизайнерской продукции.В наличии на нашем складе</div>
			  </div>
			</div>
		  </div>
		  <div class="block-right">
			<h3 class="title">Только <span>у нас</span></h3>
			<div class="image1"><img src="{ASSETS_IMAGES_PATH}promo1.jpg?design=scandi"></div>
			<div class="image2"><img src="{ASSETS_IMAGES_PATH}promo2.jpg?design=scandi"></div>
			<div class="year">2019</div>
		  </div>
        
измените текст на необходимый.

#5 ВячеславФ

ВячеславФ

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

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

Отправлено 24 Март 2019 - 20:49

Спасибо




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

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