diff --git a/Baklazhan.jpg b/Baklazhan.jpg new file mode 100644 index 0000000..9fa7115 Binary files /dev/null and b/Baklazhan.jpg differ diff --git a/Gribochek.jpg b/Gribochek.jpg new file mode 100644 index 0000000..9b9674f Binary files /dev/null and b/Gribochek.jpg differ diff --git a/Grusha.jpg b/Grusha.jpg new file mode 100644 index 0000000..2e7d214 Binary files /dev/null and b/Grusha.jpg differ diff --git a/Kapusta.jpg b/Kapusta.jpg new file mode 100644 index 0000000..5333f13 Binary files /dev/null and b/Kapusta.jpg differ diff --git a/Kartoha.jpg b/Kartoha.jpg new file mode 100644 index 0000000..07f8d03 Binary files /dev/null and b/Kartoha.jpg differ diff --git a/Kukumber.jpeg b/Kukumber.jpeg new file mode 100644 index 0000000..46ec2ed Binary files /dev/null and b/Kukumber.jpeg differ diff --git a/Kukuruza.jpg b/Kukuruza.jpg new file mode 100644 index 0000000..2673995 Binary files /dev/null and b/Kukuruza.jpg differ diff --git a/Morkovka.jpg b/Morkovka.jpg new file mode 100644 index 0000000..72e7234 Binary files /dev/null and b/Morkovka.jpg differ diff --git a/Perec.png b/Perec.png new file mode 100644 index 0000000..175589b Binary files /dev/null and b/Perec.png differ diff --git a/Pomidorchik.jpg b/Pomidorchik.jpg new file mode 100644 index 0000000..b7162bf Binary files /dev/null and b/Pomidorchik.jpg differ diff --git a/Tibloko.png b/Tibloko.png new file mode 100644 index 0000000..ababd62 Binary files /dev/null and b/Tibloko.png differ diff --git a/Tikva.jpg b/Tikva.jpg new file mode 100644 index 0000000..e03a0f2 Binary files /dev/null and b/Tikva.jpg differ diff --git a/apple.png b/apple.png new file mode 100644 index 0000000..ababd62 Binary files /dev/null and b/apple.png differ diff --git a/aubergine.jpg b/aubergine.jpg new file mode 100644 index 0000000..9fa7115 Binary files /dev/null and b/aubergine.jpg differ diff --git a/cabbage.jpg b/cabbage.jpg new file mode 100644 index 0000000..5333f13 Binary files /dev/null and b/cabbage.jpg differ diff --git a/carrot.jpg b/carrot.jpg new file mode 100644 index 0000000..72e7234 Binary files /dev/null and b/carrot.jpg differ diff --git a/corn.jpg b/corn.jpg new file mode 100644 index 0000000..2673995 Binary files /dev/null and b/corn.jpg differ diff --git a/cucumber.jpeg b/cucumber.jpeg new file mode 100644 index 0000000..46ec2ed Binary files /dev/null and b/cucumber.jpeg differ diff --git a/index.css b/index.css index e69de29..3f00913 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,180 @@ +html, +body +{ + width: 100%; + height: 100%; +} + +img +{ + width: 130px; + height: 140px; +} + +h4 +{ + text-align: center; + display: none; + margin: 0; + padding: 0; + height: 30px; +} + +a +{ + max-width: 0; + max-height: 0; + color: black; + text-decoration: none; +} + +.gallery +{ + position: absolute; + height: 200px; + width: 580px; + overflow: hidden; + left: 25%; + top: 30%; +} + +.gallery-first-block, +.gallery-second-block, +.gallery-third-block +{ + position: absolute; + width: 580px; + height: 180px; + -webkit-transition: left 1s ease-out; + -moz-transition: left 1s ease-out; + -o-transition: left 1s ease-out; + transition: left 1s ease-out; +} + +.gallery-item +{ + display: inline-block; + width: 140px; + height: 180px; +} + +.close-button +{ + font-size: 45px; + display: none; +} + +.close-button:hover +{ + background-color: rgba(166,166,166, .5); +} + +div:target +{ + position: fixed; + width: 100%; + height: 100%; + background-color: rgba(166,166,166, .5); + top: 0; + left: 0; +} + +div:target img +{ + display: block; + width: 50%; + height: 50%; + margin: 5% auto; + cursor: default; +} + +div:target div +{ + display: inline; + margin-left: 85%; + cursor: default; +} + +div:target:hover h4 +{ + display: none; +} + +div > div > div:hover +{ + box-shadow: 0 0 5px rgba(0, 0, 0, .5); +} + +div > div > div:hover h4 +{ + display: inline; +} + +input[value='first'] +{ + position: absolute; + left: 44%; + top: 57%; + margin: 2%; +} + +input[value='second'] +{ + position: absolute; + left: 47%; + top: 57%; + margin: 2%; +} + +input[value='third'] +{ + position: absolute; + left: 50%; + top: 57%; + margin: 2%; +} + +input[value='first']:checked ~ .gallery .gallery-first-block +{ + left: 0; +} + +input[value='first']:checked ~ .gallery .gallery-second-block +{ + left: 100%; +} + +input[value='first']:checked ~ .gallery .gallery-third-block +{ + left: 200%; +} + +input[value='second']:checked ~ .gallery .gallery-first-block +{ + left: -100%; +} + +input[value='second']:checked ~ .gallery .gallery-second-block +{ + left: 0; +} + +input[value='second']:checked ~ .gallery .gallery-third-block +{ + left: 100%; +} + +input[value='third']:checked ~ .gallery .gallery-first-block +{ + left: -200%; +} + +input[value='third']:checked ~ .gallery .gallery-second-block +{ + left: -100%; +} + +input[value='third']:checked ~ .gallery .gallery-third-block +{ + left: 0; +} diff --git a/index.html b/index.html index d810ba7..1963441 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,129 @@ - - - - - - + + + + + Hello, markup-6 + + + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ diff --git a/mushroom.jpg b/mushroom.jpg new file mode 100644 index 0000000..9b9674f Binary files /dev/null and b/mushroom.jpg differ diff --git a/pear.jpg b/pear.jpg new file mode 100644 index 0000000..2e7d214 Binary files /dev/null and b/pear.jpg differ diff --git a/pepper.png b/pepper.png new file mode 100644 index 0000000..175589b Binary files /dev/null and b/pepper.png differ diff --git a/potato.jpg b/potato.jpg new file mode 100644 index 0000000..07f8d03 Binary files /dev/null and b/potato.jpg differ diff --git a/pumpkin.jpg b/pumpkin.jpg new file mode 100644 index 0000000..e03a0f2 Binary files /dev/null and b/pumpkin.jpg differ diff --git a/tomato.jpg b/tomato.jpg new file mode 100644 index 0000000..b7162bf Binary files /dev/null and b/tomato.jpg differ