Надо подключать дополнительные плагины, для того чтобы фото разворачивалось при нажатии на его миниатюру. Стандартными средствами не делается.
HTML и CSS здесь не при чем. Код, конечно, можно оптимизировать, убрать лишние пробелы, отступы и т.д., сделать страничку чуть полегче, но это не выход.
Основную роль в этом играет сам сервер. Это же простая операционная система, со своим процессором и оперативной памятью.
Выход - менять сервер на более мощный, мощный процессор, побольше оперативной памяти.
А оптимизация HTML и CSS - это мелочи.
всё я понял как это сделать )
нужно после строчки animation: blink2 1s linear infinite;
добавить
color: rgba(255, 0, 0, 1);
и тогда всё будет супер =) не знаю правда зачем указывать цвет в следующих строках, если в конце стоит 0 - что говорит о том что слой полностью прозрачен )
Перенесла инструкцию по кубу с вращением в отдельный ответ, так как из-за большого количества символов у меня всё повисло :)
Для такого куба вам понадобится уже 6 дивов, чтобы было видно все грани. Создаем конструкцию такого типа:
Поскольку есть общие стили для всех сторон, то либо выделяйте отдельный класс (в данном случае side), либо назовите контейнер, например, section вместо div. Но я предпочитаю задать два класса и не путаться.
Позиционирование сторон происходит по тому же принципу, что и в прошлом примере. Но такой куб имеет больше шансов рассыпаться, поэтому нужно установить показатель перспективы (определяет его отдаленность от экрана) и сделать всю композицию флексовой, чтобы проще было её позиционировать.
Размеры заданы в em, вы можете задать любую другую единицу. Если не хотите, чтобы стенки "поехали", меняйте размеры пропорционально. Например, если вы устанавливаете размер сторон в 100 пикселей, в трансформе поменяйте значения на -50px или 50px, соответственно.
Буду отвечать чисто по HTML, так как вопрос именно об этом.
Для начала нужно определиться, куда этот баннер поставить (правый, левый бар или в центральную часть). Еще имеет значение верстка блочная или табличная.
Можно пойти двумя путями:
Путь первый.
Баннер уже готовый в виде картинки. Подготовить можно в фотошопе нужного размера. Возьмем например стандартный баннер 240х270 px.
Картинка есть. Теперь ее нужно поместить в ссылку, чтобы она вела пользователя туда, куда нужно. Выглядеть это будет примерно так:
Вместо класса можно задать id. Только нужно помнить, что id должен быть уникальным, в отличии от класса.
Класс отлично подходит, когда нужно несколько баннеров поставить одного размера.
В стилях прописываем размер для класса .banner{width: 240px;}
Второй путь.
В блоке <div></div> прописываем в параграфах <p></p> все то, что хотим видеть на баннере. В стилях задаем нужную ширину и высоту,фон, а также цвет и размер шрифта. Теги блока помещаем в ссылку <a></a>.
Выглядеть это будет примерно так: