Генератор теней

https://active-vision.ru/icon/box-shadow/

<style>

display: none;

</style>

Сайт для анимации SVG

https://www.svgator.com

Сервис для временной почты

https://tempimail.org/ru/view/Rzrb7EV8BepxVWeNWvjap9Xl

<style>

/*Обращение к элементу*/

.sale .tn-atom__sbs-anim-wrapper .tn-atom{

}

</style>

Генератор тенейБольшой список уже готовых css-анимаций, который можно легко копировать для своих элементов

https://angrytools.com/css/animation/

<style>

/*Настройки анимации у элемента*/

.class { animation-name: name; /*Имя анимации*/

animation-duration: 5s; /*Длительность анимации*/

animation-iteration-count: infinite; /*Количество иттераций проигрывания*/

animation-direction: alternate; /*Порядок проигрывания анимации*/

animation-timing-function: ease-in-out; /*Плавность анимации*/

animation-delay: 2s; /*Задержка перед проигрыванием*/

}

/*Создание анимации*/

@keyframes sale-animation{

0%{

transform:rotate(0deg) scale(1);

}

50%{

transform:rotate(180deg) scale(.6);

}

100%{

transform:rotate(360deg) scale(1);

}

}

</style>

<style>

.js-product:not(.t-store__product-popup):not(:nth-child(2)) {

outline: 5px solid red;

}

.t004 ul li:not(:last-child), {

margin-bottom: 10px;

border-bottom: 2px solid lightgray;

}

</style>

<style>

.uc-form .t-input:focus {

border: solid 2px #397cff !important;

}

</style>

Домашнее задание 3-7

Используя любую форму задайте состояние фокуса всем инпутам

<style>

.uc-form .t-radio__control {

margin: 0 !important;

padding: 8px 12px;

border: 2px solid #f1f1f1;

border-radius: 8px;

}

.uc-form .t-radio__indicator:after {

background: #397cff !important;

}

.uc-form .t-radio__control .t-radio:checked~.t-radio__indicator {

border: 2px solid #397cff !important;

}

.uc-form .t-radio__control:has(.t-radio:checked){

border: 2px solid #397cff;

}

/*---------------------*/

.t395__col {

padding: 30px;

border: 5px solid red;

border-radius: 24px;

transition: all 0.4s ease-in;

}

.t395__col:has(.t395__tab_active[data-tab-number="2"]){

border: 5px dotted green;

padding: 60px;

border-radius: 12px;

transition: all 0.4s ease-in;

}

</style>

Домашнее задание

Используя псевдокласс :has необходимо взять блок TX16N2 и повторить код, как у меня в примере

https://tc-intensive.tilda.ws/example-has

Домашнее задание

1. Используя блок TL02B стилизовать первую букву таким образом, чтобы она отличалась по цвету, размеру и толщине от основного текста заголовка

2. В блоке TE400 сделать текст при выделении мышкой любым контрастным цветом

<style>

/*Добавление элемента в начало*/

.t517__col:before{

}

/*Добавление элемента в конец*/

.t517__col:after{

}

/*Добавление анимации при наведении*/

.t517__col:hover:after{

}

</style>

Домашнее задание

Используя меню ME403 добавить с помощью псевдоэлементов before или after обозначения как на примере https://study.dsgnmax.ru/members/courses/4potok/urok-4-psevdoelementy-c1-813381826596#popup:mygallery

Генератор transition

https://fjolt.com/article/css-transitions

<style>

/*Наведение на элементы*/

.class:hover{

}

/*Плавность анимации*/

transition: transform 0.4s ease-in;

/*Виды плавности*/

ease linear

ease-in

ease-out

ease-in-out

cubic-bezier(x1, y1, x2, y2)

</style

Домашнее задание

Добавить в одном из аккордеонов блока TX16N2 несколько маркированных списков, при этом первый маркер должен быть красного цвета, второй должен быть зеленого цвета и в 1,5 раза больше остальных, а третий маркер должен быть синего цвета.

Генератор transition

https://fjolt.com/article/css-transitions

<style>

/*Наведение на элементы*/

.class:hover{

}

/*Плавность анимации*/

transition: transform 0.4s ease-in;

/*Виды плавности*/

ease linear

ease-in

ease-out

ease-in-out

cubic-bezier(x1, y1, x2, y2)

</style

Домашнее задание

Используя блок TM201 каждой из карточек необходимо добавить ссылку в самом низу описания и из этой ссылки сделать кнопку, которая будет растягиваться на всю ширину карточки, при этом по наведению на кнопку у неё должен меняться цвет текста, цвет фона, радиус скругления углов.

Наглядный пример разной комбинации выбора дочерних элементов

https://snipp.ru/html-css/nth-child

<style>

/*Выбор первого элемента*/

.class:first-child

/*Выбор последнего элемента*/

.class:last-child

/*Выбор конкретного элемента с начала*/

.class:nth-child(2)

/*Выбор конкретного элемента с конца*/

.class:nth-last-child(2)

/*Выбор нечётного элемента*/

.class:nth-child(odd)

/*Выбор чётного элемента*/

.class:nth-child(even)

/*Выбор каждого 3 элемента*/

.class:nth-child(3n)

/*Выбор каждого 3 элемента начиная с 6*/

.class:nth-child(3n + 6)

</style>

Домашнее задание

1. Используя блок TE220 стилизуйте первую и последнюю карточку любыми стилями, которые мы проходили ранее, карточкипри этом должны быть стилизованы по разному. Также стили должны применяться только к десктопной версии

2. Создать в каталоге 5 разделов, чтоб они отображались в любом из блоков магазина Необходимо скрыть 3 и 5 табы разделов

<style>

/*Псевдокласс, куда заносятся переменные*/

:root{

--fontSizeMobile: 14px;

}

/*Применение переменных*/

.class{

font-size: var(--fontSizeMobile);

}

</style>

Домашнее задание

Взять любой стандартный блок, стилизовать его любым кодом, который проходили ранее в уроках, при этом у вас должно получиться не менее 6 переменных

<style>

/*Префиксы для браузеров*/

-webkit — Safari, Chrome, Opera 15+

-moz — Firefox

-o — Opera 12

-ms — Internet Explorer и старый Microsoft Edge

/*Вариант записи*/

@-webkit-keyframes animation { 0% { left: 0; } 100% { left: 100%; }

}

@keyframes animation { 0% { left: 0; } 100% { left: 100%; }

}

/*Ещё один вариант записи*/

.t774__col{

-webkit-filter: blur(30px);

filter: blur(30px) }

</style>

Сервис для создания автопрефиксов

https://autoprefixer.github.io/ru/

Домашнее задание

Используя блок TE600 разместить для разрешения 1920px или 1360px 5 карточек в ряд, при этом отступы между рядами и колонками должны быть 30px

<style>

/*Позволяет применить свойства от конкретного разрешения и до бесконечности*/

@media screen and (min-width: 1200px){

}

/*Позволяет применить свойства до конкретного разрешения*/

@media screen and (max-width: 1920px){

}

/*Позволяет применить свойства от и до конкретных разрешений*/

@media (min-width: 960px) and (max-width: 1200px){

}

</style>

Домашнее задание

Используя блок FR206 для десктопного разрешения задать следующие настройки: Отступы внутри каждой карточки по 40px; скругление углов — 40px; обводка — 4px, сплошная, любого цвета

Для планшетной версии, до 960px задать следующие настройки: Отступы внутри каждой карточки по 30px; скругление углов — 30px; обводка — 3px, сплошная, любого цвета

Для мобильной версии, до 480px задать следующие настройки: Отступы внутри каждой карточки по 20px; скругление углов — 20px; обводка — 2px, сплошная, любого цвета

<style>

.t702 .t-popup__block-close-button svg g{

fill: black;

}

</style>

<style>

.uc-form .t-form__inputsbox {

display: grid;

grid-template-columns: repeat(6, 1fr);

gap: 15px;

grid-template-areas:

"name name surname surname patronymic patronymic"

"mail mail mail phone phone phone"

"comment comment comment phone phone phone"

"guest guest guest guest guest guest"

"btn btn btn btn btn btn";

}

.uc-form [data-input-lid="9354215262381"]{

grid-area: name; /*Инпут Имя*/

}

.uc-form [data-input-lid="1696429957748"]{

grid-area: surname; /*Инпут Фамилия*/

}

.uc-form [data-input-lid="1696429972092"]{

grid-area: patronymic; /*Инпут Отчество*/

}

.uc-form [data-input-lid="9354215262380"]{

grid-area: mail; /*Инпут Почта*/

}

.uc-form [data-input-lid="9354215262382"]{

grid-area: phone; /*Инпут Телефон*/

}

.uc-form [data-input-lid="1696429997609"]{

grid-area: comment; /*Инпут Комментарии*/

}

.uc-form [data-input-lid="1696336854467"]{

grid-area: guest; /*Инпут Гости*/

}

.uc-form .t-form__submit{

grid-area: btn; /*Инпут Кнопка*/

}

</style>

Домашнее задание

Используя grid area необходимо собрать такую же форму, как у меня в примере

Наглядный пример работы css grid, это поможет более детально ознакомиться с каждым свойством

https://tpverstak.ru/grid/

<style>

.t650__container:before,

.t650__container:after,

.t650__separator{

display: none; /*Скрываем все лишние элементы*/

}

.t650__container .t-card__col{

margin: 0 !important; /*Убираем внешние отступы*/

padding: 0 !important; /*Убираем внутренние отступы*/

max-width: 100% !important; /*Настраиваем максимальную ширину*/

width: 100% !important; /*Настраиваем ширину*/

}

.t650__container

{

display: grid;

grid-template-columns: 340px 1fr 220px; /*Ширина и количество колонок*/

grid-template-rows: 220px 300px 220px; /*Высота и количсетво рядов*/

gap: 20px; /*Отступы*/

}

.t650__inner-col

{

height: 100% !important; /*Высота карточки*/

}

</style>

/*Скрыть разделители*/

<script> $(() => {

setTimeout(() => {

$('.t778__separator').remove();

}, 500);

});

</script>

Домашнее задание

Используя блок ST320N расположить карточки в таком формате, а именно 5 карточек в одном ряду, и также стилизовать их как на примере

Наглядный пример работы css:flexbox, это поможет более детально ознакомиться с каждым свойством

https://tpverstak.ru/flex-cheatsheet/

<style>

/*Свойства в виде характеристик*/

.js-product-edition-option {

display: flex;

justify-content: space-between;

align-items: center; /*Выравнивание элементов*/

background-color: #f7f7f7; /*Фоновый цвет*/

padding: 8px; /*Внутренние отступы*/

border-radius: 8px; /*Радиус скругления*/

margin: 0 !important; margin-bottom: 10px !important; /*Отступ снизу у каждого свойства*/

}

.t-product__option-item {

margin: 0 !important;

padding: 0 !important;

border: none !important;

background-color: transparent !important;

min-width: auto !important;

min-height: auto !important;

}

.js-product-controls-wrapper {

margin-top: 20px; /*Отступ сверху у всего блока с карточками*/

}

</style>

<style>

/*Свойства в виде тегов*/

.store__card__wrap_txt-and-opts{ display: flex; flex-wrap: wrap;

}

.js-product-controls-wrapper

{

display: flex;

flex-wrap: wrap; /*Перенос тегов на другую стрчоку*/

gap: 5px; /*Отступы между тегами*/

order: -1; /*Перемещаем блок над блоком с описанием*/

}

.js-product-edition-option {

display: inline-flex;

justify-content: space-between;

align-items: center; /*Выравнивание элементов*/

background-color: #f7f7f7; /*Фоновый цвет*/

padding: 4px 10px; /*Внутренние отступы*/

border-radius: 100px; /*Радиус скругления*/

margin: 0 !important;

}

.js-product-edition-option-name {

font-size: 12px; /*Размер названия свойства*/

margin-right: 10px;

}

.js-product-edition-option-name, .t-product__option-title {

font-size: 12px; /*Размер самого свойства*/

padding: 0 !important

}

.t-product__option-item {

margin: 0 !important;

padding: 0 !important;

border: none !important;

background-color: transparent !important;

min-width: auto !important;

min-height: auto !important;

}

.js-product-controls-wrapper {

margin-bottom: 20px; /*Отступ сверху у всего блока с карточками*/

}

</style>

Домашнее задание

Используя блок ME606 расположить все кнопки по горизонтали в один ряд, убрать стандартные отступы у каждой кнопки и задать общие отступы между кнопками в 20px. Блок с карточками должен прокручиваться по горизонтали

<style>

/*Варианты записи свойства*/

overflow: hidden;

overflow-x: hidden;

overflow-y: hidden;

/*Виды скрытия и отображения контента*/

visible — содержимое отображается снаружи родительского блока, если его размеры больше размеров «родительского» блока (значение по умолчанию);

hidden — содержимое, выходящее за пределы «родительского» блока, обрезается по его границам без прокрутки;

scroll — контент обрезается по границам «родительского» блока, но внутри этой области содержимое доступно с помощью прокрутки;

auto — если содержимое переполняет блок, контент будет доступен для прокрутки.

</style>

Домашнее задание

1. Используя блок FD401 сделайте так, чтобы карточки отображались на всю ширину экрана, не ограничиваясь шириной контейнера

Домашнее задание

2. Используя блок TE210 добавить в описание по больше текста и кодом ограничить его высоту до 150px, при этом вся область текста должна прокручиваться по оси y

Все стили курсоров

https://www.a2zwebhelp.com/css-cursor

<style>

/*Любой стандартный курсор*/

cursor: auto; /*Стили курсоров указаны в полезных ссылках*/

/*Изображение вместо курсора*/

cursor: url(https://dsgnmax.ru/image.png), auto;

</style>

Домашнее задание

Создайте блок SV305, при наведении на каждую карточку должен отображаться кастомный курсор, а при наведении на иконку внутри карточек — отображаться любой из стандартных курсоров

Генератор фильтров

https://www.cssportal.com/css-image-filter-generator/

<style>

/*Применение фильтров*/

filter: blur(3px);

/*Значения фильтров*/

blur - размытие Гаусса у изображения

brightness - меняет яркость изображения

contrast - меняет контраст изображения

grayscale - чёрно-белый эффект

hue-rotate - Меняет цвета изображения за счёт поворота цветового круга

invert - инвертирует цвета изображения

opacity - меняет прозрачность изображения

saturate - меняет насыщенность цветов изображения

sepia - меняет цвета изображения на сепию

drop-shadow - тень для картинки, учитывает альфа-канал

</style>

Домашнее задание

Используя блок T143 выберете в контенте блока яндекс-карту и попробуйте применить к ней каждый из фильтров

<style>

display: none;

</style>

Домашнее задание

Добавить стандартную корзину, в попапе корзины скрыть иконку удаления товара и также скрыть блок с возможность увеличения и уменьшения количества товаров

<style>

/*Применить внешнюю тень*/

box-shadow:3px 5px 10px gray;

/*Применить внутреннюю тень*/

box-shadow:inset 3px 5px 10px gray; </style>

Генератор теней

https://active-vision.ru/icon/box-shadow/

Домашнее задание

Используя блок TM101 сделать карточки в стиле, как на примере

<style>

/*Добавление маски*/

mask-image: url("shape.png");

/*Повторение маски*/

mask-repeat: no-repeat;

/*Положение маски*/

mask-position: center;

mask-position: left top; /*top, bottom, left, right*/

mask-position: 20% 20%;

/*Размеры маски*/

mask-size: 60%;

/*При необходимости не забывайте добавлять к каждому свойству префикс webkit таким образом*/

-webkit-mask-image: url("shape.png");

</style>

Домашнее задание

Карточкам из блока TE610 задать любую маску, чтобы она вписывалась в размер карточки

<style>

/*Строчные элементы*/

display: inline;

/*Блочные элементы*/

display: block;

/*Строчно-блочные элементы*/

display: inline-block;

</style>

Домашнее задание

1. В блоке FR101 у первой карточки создать из ссылки кнопку, при этом кнопка должна быть со скругленными углами, иметь фоновый цвет, цвет текста в кнопке также должен отличаться от стандартного и отступ сверху у кнопки до текста должен быть 15px

Домашнее задание

2. Используя блок TM201 в описании у каждой карточки необходимо выделить по 3 слова, а именно добавить фоновый цвет, поменять цвет текста и добавить небольшой отступ, при этом выделеные слова не должны смещать текст сверху и снизу себя

Домашнее задание

2. Добавить обводку в виде пунктира с помощью свойства border блоку TE215 и также добавить сплошную обводку этому же блоку (копии блока) с помощью свойства outline

<style>

/*Скругление углов*/

border-radius: 10px;

border-radius: 10px 20px 30px 40px;

border-radius: 10px 30px;

border-radius: 10px / 30px;

border-radius: 10px 20px 30px 40px / 10px;

overflow: hidden; /*Для скрытия лишней информации*/ !!! Также можно задать значения в процентах

/*Первый способ обводки*/

border: solid 2px #232323;

border-top: 2px solid #232323;

border-left: 2px solid #232323;

border-bottom: 2px solid #232323;

border-right: 2px solid #232323;

/*Второй способ обводки*/

outline: solid 2px #232323;

outline-offset: 10px;/*Отодвинуть рамку*/

/*Стили обводки*/

solid — сплошная рамка

dotted — рамка из точек

dashed — рамка из коротких чёрточек

double — рамка из двух сплошных линий </style>

Домашнее задание

Используя блок CL18N стилизовать каждую карточку так, чтобы у неё была сплошная обводка в 5px, скругленные углы в 20px и отступ от содержимого до обводки — 30px, при этом чтобы отступ от заголовка до разделяющей линии был 40px

<style>

/*Внешние отступы*/

margin: 20px;

margin: 10px 20px 30px 40px;

margin: 10px 30px;

margin-top: 10px;

margin-left: 20px;

margin-bottom: 30px;

margin-left: 40px;

margin: 0 auto; /*Центрирование элемента по центру*/

/*Внутренние отступы*/

padding: 20px;

padding: 10px 20px 30px 40px;

padding: 10px 30px;

padding-top: 10px;

padding-left: 20px;

padding-bottom: 30px;

padding-left: 40px;

/*Дополнительное свойство, которое позволит убрать перенос карточек на новый ряд*/ box-sizing: border-box;

</style>

Домашнее задание

Используя блок BF204N сделать кнопку одинаковой ширины с полями ввода, и также сделать её высотой в 100px

<style>

/*Ширина*/

width: 100px;

width: 100%;

width: auto;

/*Максимальная ширина*/

max-width: 300px;

max-width: 100%;

/*Высота*/

height: 100px;

height: 100%;

height: auto;

/*Максимальная высота*/

max-height: 100px;

max-height: 100%;

</style>

Используя блок CL10N необходимо применить к карточкам трансформацию вращения по оси Y на 10 градусов, аналогично и по оси X, при этом перспектива должна быть 800px. Также по желанию и на ваше усмотрение к остальным элементам внутри карточки применить другие виды трансформаций

Генератор трансформаций, с возможностью получить готовый код для вставки

https://www.cssportal.com/css-3d-transform-generator/

<style>

/*Трансформация перемещения*/

transform: translate(10px, 20px);

transform: translateX(10px);

transform: translateY(20px);

transform: translateZ(30px);

transform: translate3d(10px, 20px, 30px);

/*Трансформация увеличения*/

transform: scale(1.1, 1.1);

transform: scaleX(1.2);

transform: scaleY(1.2);

transform: scaleZ(1.2);

transform: scale3d(1.2, 1.3, 1.1);

/*Трансформация искажения*/

transform: skewX(10deg);

transform: skewY(20deg);

/*Трансформация вращения*/

transform: rotate(10deg);

transform: rotateX(10deg);

transform: rotateY(20deg);

transform: rotate3d(1, 1, 0, 60deg);

!!! Единицы измерения углов (deg, rad, turn)

/*Перспектива*/

transform: perspective(80px);

perspective: 80px; /*Можно задать для родителя*/

/*Запись сразу нескольких трансформаций*/

transform: perspective(80px) rotate(10deg) scaleX(10px) skewX(10px);

</style>

Домашнее задание

Повторить все действия за мной по каждому из позиционирований

<style>

position: relative;

position: absolute;

position: fixed;

position: sticky;

</style>

<style>

/*Загрузка фотографии*/

background-image:url("адрес-картинки");

/*Повторение изображения*/

background-repeat: repeat; /*повторяется*/

background-repeat: no-repeat; /*не повторяется*/

background-repeat: repeat-x; /*повторяется по горизонтали*/

background-repeat: repeat-y; /*повторяется по вертикали*/

/*Размер фонового изображения*/

background-size: contain; /*изображение полностью помещается в элемент*/

background-size; cover; /*изображение заливает полностью элемент */

/*Позиционирование изображение*/

background-position: bottom right; /*left, right, top, bottom*/

background-position: 100% 100%; /*от 0% до 100%*/

background-position: 10px 150px; /*значение в пикселях*/

/*Прокручивание фона*/

background-attachment: fixed; /*фон фиксируется и не прокручивается вместе с элементом*/ background-attachment: scroll; /*значение по умолчанию*/

/*Градиент*/

background-image: linear-gradient(-30deg, #2E9AFF, #F498AD);

background-image: radial-gradient(circle, #09ff00, red);

/*Цвет фона*/

background-color: pink; background-color: rgb(255 221 36);

background-color: #232323; background-color: rgb(255 255 0 / 0.5); /*прозрачность цвета*/

/*Фон для текста*/

background-clip: text; /*необходимо прописать, чтобы работало фоновое изображение вместо текста*/

color: transparent; /*необходимо прописать, чтобы работало фоновое изображение вместо текста*/

</style>

Генератор фоновых изображений

https://webcode.tools/css-generator/background-image

Генератор градиентов

https://cssgradient.io/

Домашнее задание

1. Используя попап BF502N наложить на его фон паттерн из любой картинки

2. Используя блок AB104 добавить ему любое фоновое изображение с соотношением сторон 1:1 таким образом, чтобы изображение поместилось полностью в блоке, также чтобы изображение не повторялось и было смещено к правой стороне блока

3. Продублировать блок, который использовался выше и также для него использовать те же свойства, только изображение теперь должно полностью залить весь блок и прилипнуть к правой и верхней сторонам

Генератор стилей текста

https://webdesign-assistant.com/font-editor/css-font-generator.php

<style>

/*Размер текста*/

font-size: 14px;

/*Толщина текста*/

font-weight: bold;

font-weight: 300; /*от 100 до 900*/

/*Начертание шрифта*/

font-style: italic; /*oblique, oblique -20deg*/

/*Декорирование текста*/

text-decoration: underline double #ff0000; /**/

/*Положение линии*/

underline — подчёркнутый текст

linethrough — перечёркнутый текст

overline — надчёркнутый текст

none — отменяет все эффекты

/*Стиль линии*/

solid — сплошная линия

double — двойная линия

dotted — точечная линия

dashed — пунктирная линия

wavy — волнистая линия

/*Межстрочный интервал*/

line-height: 2;

line-height: 80%;

line-height: 5px;

/*Межбуквенное расстояние*/

letter-spacing: 3px;

letter-spacing: -0.6px;

/*Трансформация текста*/

text-transform: uppercase;

uppercase — все буквы заглавные

lowercase — все буквы строчные

capitalize — каждое слово начинается с заглавной буквы

/*Размер пробелов между словами*/

word-spacing: 4px;

/*Перенос слов и текста*/

white-space: nowrap; /*умещает весь текст в одну строчку без переносов*/

overflow-wrap: break-word; /*перенос текста по символам*/

/*Градиент у текста*/

.t225__title{

background-image: linear-gradient(45deg, #cc2222, #1de93b);

background-clip: text;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color: transparent;

}

</style>

Домашнее задание

Подгрузить товары из каталога в блок ST305N. У товаров должен быть заголовок, описание и цена. У заголовков карточек необходимо уменьшить трекинг, у описания необходимо уменьшить межстрочный интервал, при этом необходимо одному слову внутри описания задать следующие свойства: все буквы заглавные, подчеркивание цветной волнистой линией, цвет слова одинакового цвета с линией подчеркивания, максимальная жирность шрифта

Генератор трансформаций, с возможностью получить готовый код для вставки

https://www.cssportal.com/css-3d-transform-generator/

<style>

position: relative;

position: absolute;

position: fixed;

position: sticky;

</style>

Домашнее задание

1. Используя попап BF502N наложить на его фон паттерн из любой картинки

2. Используя блок AB104 добавить ему любое фоновое изображение с соотношением сторон 1:1 таким образом, чтобы изображение поместилось полностью в блоке, также чтобы изображение не повторялось и было смещено к правой стороне блока

3. Продублировать блок, который использовался выше и также для него использовать те же свойства, только изображение теперь должно полностью залить весь блок и прилипнуть к правой и верхней сторонам

Домашнее задание

1. Используя блок TB102 перекрасить главный заголовок блока в красный цвет, задав свойство color: red;

Домашнее задание

2. Добавить в потоки любые статьи, подгрузить их в блок FD302 и у заголовка третей статьи поменять цвет текста на зеленый, задав свойство color: green;

Домашнее задание

Повторить все действия за мной в редакторе кода блока Т123

Домашнее задание

Взять блок ST310N, добавить туда 5 категорий товаров через каталог, и обратится к каждому разделу используя значения атрибутов из урока прописав эти свойства:

border: solid 3px red;

padding: 10px ;

border-radius: 12px;