Сообщений в теме: 4

[ВячеславФ]

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

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

• 

[Vaccina]

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

Зайдите в раздел Сайт - Редактор шаблонов - 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;}

[ВячеславФ]

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

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

• 

[Vaccina]

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

Зайдите в раздел Сайт - Редактор шаблонов - 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>

        
измените текст на необходимый.

[ВячеславФ]

Спасибо