diff --git a/fonts/Kurale-Regular.ttf b/fonts/Kurale-Regular.ttf new file mode 100644 index 0000000..7095372 Binary files /dev/null and b/fonts/Kurale-Regular.ttf differ diff --git a/fonts/Kurale-Regular.woff b/fonts/Kurale-Regular.woff new file mode 100644 index 0000000..dca9548 Binary files /dev/null and b/fonts/Kurale-Regular.woff differ diff --git a/img/01.png b/img/01.png new file mode 100644 index 0000000..d24f709 Binary files /dev/null and b/img/01.png differ diff --git a/img/02.png b/img/02.png new file mode 100644 index 0000000..284abdc Binary files /dev/null and b/img/02.png differ diff --git a/img/03.png b/img/03.png new file mode 100644 index 0000000..7ac8183 Binary files /dev/null and b/img/03.png differ diff --git a/img/04.png b/img/04.png new file mode 100644 index 0000000..36198db Binary files /dev/null and b/img/04.png differ diff --git a/img/05.jpg b/img/05.jpg new file mode 100644 index 0000000..3de1c67 Binary files /dev/null and b/img/05.jpg differ diff --git a/img/05.png b/img/05.png new file mode 100644 index 0000000..12d05c3 Binary files /dev/null and b/img/05.png differ diff --git a/img/06.jpg b/img/06.jpg new file mode 100644 index 0000000..9a005e8 Binary files /dev/null and b/img/06.jpg differ diff --git a/img/06.png b/img/06.png new file mode 100644 index 0000000..44d55b3 Binary files /dev/null and b/img/06.png differ diff --git a/img/07.png b/img/07.png new file mode 100644 index 0000000..0e88fbd Binary files /dev/null and b/img/07.png differ diff --git a/img/08.png b/img/08.png new file mode 100644 index 0000000..81e320e Binary files /dev/null and b/img/08.png differ diff --git a/img/09.jpg b/img/09.jpg new file mode 100644 index 0000000..4422088 Binary files /dev/null and b/img/09.jpg differ diff --git a/img/09.png b/img/09.png new file mode 100644 index 0000000..6eeeb4e Binary files /dev/null and b/img/09.png differ diff --git a/img/10.jpg b/img/10.jpg new file mode 100644 index 0000000..944989c Binary files /dev/null and b/img/10.jpg differ diff --git a/img/11.png b/img/11.png new file mode 100644 index 0000000..98fdc0f Binary files /dev/null and b/img/11.png differ diff --git a/img/12.png b/img/12.png new file mode 100644 index 0000000..96ae9d1 Binary files /dev/null and b/img/12.png differ diff --git a/img/13.png b/img/13.png new file mode 100644 index 0000000..dae60b1 Binary files /dev/null and b/img/13.png differ diff --git a/img/14.png b/img/14.png new file mode 100644 index 0000000..b20d112 Binary files /dev/null and b/img/14.png differ diff --git a/index.css b/index.css index e69de29..f0ee94b 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,211 @@ +@import url(https://i.icomoon.io/public/temp/dd5e421130/fair/style.css); + +@font-face +{ + font-family: 'Kurale-Regular'; + src: local('Kurale-Regular'), url('./fonts/Kurale-Regular.ttf') + format('ttf'), url('./fonts/Kurale-Regular.woff') format('woff'); +} + +.head +{ + margin: 20px 0 0; + min-width: 1200px; + text-align: center; + font: 36pt 'Kurale-Regular', serif; +} + +.group-label +{ + font-family: 'Kurale-Regular', serif; +} + +.content +{ + height: 100%; + width: 100%; + text-align: center; +} + +.row +{ + width: 100%; + height: 400px; + min-width: 1200px; + display: block; + float: left; + margin: 20px 0 50px; +} + +.labels +{ + min-width: 1200px; + display: block; +} + +.card +{ + width: 20%; + text-align: center; + padding: 20px; + overflow: hidden; + vertical-align: top; + display: inline-block; +} + +.card:hover +{ + border: 1px solid #d3d3d3; + box-shadow: 2px 2px #e3e3e3; +} + +.card:hover .description +{ + display: block; +} + +.image-wrapper +{ + width: 100%; + height: 200px; + margin-top: 20px; +} + +.image-wrapper img +{ + max-width: 100%; + max-height: 100%; +} + +.description +{ + font: 13pt 'Kurale-Regular', serif; + display: none; +} + +.group-1:checked ~ .row-2, +.group-1:checked ~ .row-3, +.group-1:checked ~ .row-4, +.group-2:checked ~ .row-1, +.group-2:checked ~ .row-3, +.group-2:checked ~ .row-4, +.group-3:checked ~ .row-1, +.group-3:checked ~ .row-2, +.group-3:checked ~ .row-4, +.group-4:checked ~ .row-1, +.group-4:checked ~ .row-2, +.group-4:checked ~ .row-3, +.arrow, +.groups, +.fullscreen-input, +.close-input, +.fullscreen-wrapper, +.arrow-input +{ + display: none; +} + +.group-2:checked ~ .labels .arrow-prev-1, +.group-3:checked ~ .labels .arrow-prev-2, +.group-4:checked ~ .labels .arrow-prev-3, +.group-1:checked ~ .labels .arrow-next-2, +.group-2:checked ~ .labels .arrow-next-3, +.group-3:checked ~ .labels .arrow-next-4, +.group-1:checked ~ .row-1, +.group-2:checked ~ .row-2, +.group-3:checked ~ .row-3, +.group-4:checked ~ .row-4 +{ + display: inline-block; +} + +.group-1:checked ~ .labels .group-label-1, +.group-2:checked ~ .labels .group-label-2, +.group-3:checked ~ .labels .group-label-3, +.group-4:checked ~ .labels .group-label-4 +{ + transition: .2s; + -webkit-transition: .2s; + -moz-transition: .2s; + color: #d3d3d3; +} + +.group-label:before +{ + font: 3em 'icomoon', fantasy; +} + +.group-label-1:before +{ + content: '\e900'; +} + +.group-label-2:before +{ + content: '\e901'; +} + +.group-label-3:before +{ + content: '\e902'; +} + +.group-label-4:before +{ + content: '\e903'; +} + +.fullscreen-input:checked + .fullscreen-wrapper +{ + display: block; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + background-color: rgba(0, 0, 0, .8); + z-index: 2; + text-align: center; + margin: 0; +} + +.fullscreen-input:checked + .fullscreen-wrapper img +{ + margin: 30px; + max-width: 90%; + max-height: 90%; +} + +.close-label:before +{ + position: fixed; + bottom: 50px; + left: 50px; + font: 4em 'icomoon', fantasy; + content: '\f00d'; + color: #f00; +} + +.arrow:before +{ + font: 3em 'icomoon', fantasy; +} + +.prev:active ~ .labels .arrow-prev:before, +.next:active ~ .labels .arrow-next:before +{ + transition: .2s; + -webkit-transition: .2s; + -moz-transition: .2s; + color: #fff; +} + +.arrow-prev:before +{ + content: '\f0d9'; +} + +.arrow-next:before +{ + content: '\f0da'; +} diff --git a/index.html b/index.html index d810ba7..8c15749 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,305 @@ - - - - - + + + Бабуленькин урожай + + + +

Бабуленькин урожай

+
+ + + + +
+
+
+ +
+ +
+ Tomate + + +
+ 
+Этот красный яркий плод
+Так и просится к нам в рот.
+Мягкий, сочный он внутри
+Помидором назови
+
+
+
+
+ +
+ +
+ Pear + + +
+ 
+Рисовал с натуры грушу —
+Не закончил натюрморт.
+Грушу я так быстро скушал,
+Потому что вкусный сорт.
+
+
+
+
+ +
+ +
+ Apple + + +
+ 
+Яблоко с ветки, в траву  упадет,
+Яблоко с ветки, ёжик найдет.
+Яблоко ёжик домой принесет.
+Крошкам ежатам на терке натрет.
+
+
+
+
+ +
+ +
+ Grape + + +
+ 
+Гроздьями гордится сад
+Изогнулись ветки.
+Как созреет виноград,
+Приходите, детки!
+
+
+
+
+
+
+ +
+ +
+ Aubergine + + +
+ 
+Мое имя — баклажан.
+Фиолетовый кафтан,
+Ты сырым меня не жуй!
+Для икры я пригожусь.
+
+
+
+
+ +
+ +
+ Carrot + + +
+ 
+Как у бабушки на грядке
+Вырос овощ очень сладкий,
+Проведем мы тренировку —
+Кто быстрей сгрызет морковку.
+
+
+
+
+ +
+ +
+ Onion + + +
+ 
+Жертва я ужасных мук, —
+Ненавижу резать лук!
+Щиплет он мне нос, глаза,
+Все лицо уже в слезах!
+
+
+
+
+ +
+ +
+ Cherry + + +
+ 
+Cheri, cheri lady
+Going through emotion
+Love is where you find it
+Listen to your heart
+
+
+
+
+
+
+ +
+ +
+ Pepper + + +
+ 
+Говорят, ты острый, перец,
+Что, и вправду ты как нож?
+Ну, не веришь, так не веришь...
+Надкуси, тогда поймёшь!
+
+
+
+
+ +
+ +
+ PPAP + + +
+ 
+This unreal awesome fruit
+Was upload on YouTube.
+Sing together with this man —
+Pen-pinapple-apple-pen!
+
+
+
+
+ +
+ +
+ Maize + + +
+ 
+Все мы любим кукурузу
+И едим ее от пуза —
+А когда она стареет,
+Всех животных кормим ею.
+
+
+
+
+ +
+ +
+ Pumpkin + + +
+ 
+Тыква очень растолстела,
+Раздуваются бока.
+К сентябрю позолотела,
+Стала цвета медяка.
+
+
+
+
+
+
+ +
+ +
+ Pea + + +
+ 
+Распустил усы горох,
+Шёл в стручке переполох:
+Целый выводок горошин,
+Друг на дружку все похожи.
+
+
+
+
+ +
+ +
+ Banana + + +
+ 
+К нам приплыл из дальних стран
+Жёлтый, сладкий фрукт — банан.
+Любят взрослые и дети
+Угощаться фруктом этим!
+
+
+
+
+ + + + + + + + + + + + +
+
+