Производство, установка и все для окон в Наро-Фоминске
Эта страница была написана на HTML и CSS. Я не использовал Normalize и CSS Reset, префиксы так же прописывал руками, была куча времени, да и объём не особо велик. Вы же, чтобы сэкономить время и нервы, вполне можете использовать все эти полезные инструменты. В последствии все эти знания вам обязательно пригодятся на масштабных проектах.
Ну, а всё что в демо можно легко реализовать в простом HTML и CSS, тем более что вся работа аккордеона построена без подключения javascript.
Вся работа аккордеона построена на использовании скрытых чекбоксов (checkbox) в связке с псевдоклассом checked.
Как видите в примере я использовал миниатюры изображений с возможностью расположения как с левого края так и с правого( увидите в третьей секции аккордеона).
Миниатюрам задан размер в 25% от базового размера изображений используемых в аккордноне, 100% от родительского контейнера, так что изображения будут легко подстраиваться под любые размеры базового блока.
Медиа-запросы использовал для создания гибкого реагирования элемента(аккордеон) на различные размеры экранов пользовательских устройств.
Чтобы отправить миниатюру вправо достаточно в тег img прописать class="img-right, если влево соответственно добавляем class="img-left.
Размер миниатюр регулируется изменением процентных значений в css.Для этого достаточно найти нужный селектор, например .msg img.img-left и уже в свойстве width: 25%; экспериментировать с значениями
Встроенному изображению, размер которого 100% от родительского контейнера прописываем class="large-img". Реальный размер картинки может быть большим чем секция аккордеона, но она легко впишется в блок аккордеона.
В аккордеоне вы можете использовать встроенное видео с популярных видео хостингов использующих iframe, object, embed. Видео полностью отзывчвы и идеально впишутся в любые размеры блоков аккордеона.
Здесь размещаете любое содержание....
Здесь размещаете любое содержание....
Здесь размещаете любое содержание....
Здесь размещаете любое содержание....
Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения.
Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом .pl-left и .pl-right соответственно.
Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.
Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1