diff --git a/images/1.jpg b/images/1.jpg new file mode 100644 index 0000000..b4dd90b Binary files /dev/null and b/images/1.jpg differ diff --git a/index.css b/index.css index e69de29..bc4da2c 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,136 @@ +.main +{ + position: absolute; + top: 50px; + width: 1000px; + height: 250px; + text-align: center; +} + +.images-block +{ + display: none; + position: absolute; + width: 1000px; + top: 0; +} + +.main > input +{ + position: relative; + top: 220px; +} + +.main > input:checked + .images-block +{ + display: block; +} + +.card +{ + display: inline-block; + vertical-align: middle; + width: 20%; + position: relative; +} + +.card figure +{ + margin: 0; + height: 100%; +} + +.img +{ + max-width: 200px; + max-height: 200px; +} + +.description-img +{ + box-sizing: border-box; + padding: 10px; + max-width: 100%; + max-height: 100%; +} + +.description +{ + width: 140%; + display: none; + position: absolute; + z-index: 1; + background: #fff; + border: 1px solid; + left: -20%; + top: -10px; +} + +.card .img:hover + .description, +.description:hover +{ + display: block; +} + +.card > input +{ + display: none; +} + +.big-image +{ + display: none; + position: fixed; + z-index: 1; + background: rgba(128, 128, 128, .4); + top: 0; + bottom: 0; + right: 0; + left: 0; +} + +.big-image img +{ + max-width: 80%; + max-height: 80%; + margin: 5%; + position: relative; + z-index: 2; +} + +.card > input:checked ~ .big-image +{ + display: block; +} + +.previous, +.next +{ + width: 0; + height: 0; + border-top: 50px solid transparent; + border-bottom: 50px solid transparent; + margin: 55px 0; +} + +.previous +{ + border-right: 50px solid #777; + float: left; +} + +.next +{ + border-left: 50px solid #777; + float: right; +} + +.x:after +{ + content: '✕'; + font-size: 30px; + position: absolute; + right: 10px; + top: 5px; + color: #fff; +} diff --git a/index.html b/index.html index d810ba7..2338378 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,271 @@ + + Бабуленькин урожай +
+ +
+ +
+
+ Морковка +
+
+ +
+ Морковка +
+
+
+
+ +
+ + Морковка +
+
+
+
+ Баклажан +
+
+ +
+ Баклажан +
+
+
+
+ +
+ + Баклажан +
+
+
+
+ Клубника +
+
+ +
+ Клубника +
+
+
+
+ +
+ + Клубника +
+
+
+
+ Огурцы +
+
+ +
+ Огурцы +
+
+
+
+ +
+ + Огурцы +
+
+
+ +
+ + +
+
+ Капуста +
+
+ +
+ Капуста +
+
+
+
+ +
+ + Капуста +
+
+
+
+ Свекла +
+
+ +
+ Свекла +
+
+
+
+ +
+ + Свекла +
+
+
+
+ Вишня +
+
+ +
+ Вишня +
+
+
+
+ +
+ + Вишня +
+
+
+
+ Помидоры +
+
+ +
+ Помидоры +
+
+
+
+ +
+ + Помидоры +
+
+
+ +
+ +
+
+ Яблоки +
+
+ +
+ Яблоки +
+
+
+
+ +
+ + Яблоки +
+
+
+
+ Петрушка +
+
+ +
+ Петрушка +
+
+
+
+ +
+ + Петрушка +
+
+
+
+ Редис +
+
+ +
+ Редис +
+
+
+
+ +
+ + Редис +
+
+
+
+ Крыжовник +
+
+ +
+ Крыжовник +
+
+
+
+ +
+ + Крыжовник +
+
+
+