urfu-2016 · zokeer · Nov 15, 2016 · Nov 19, 2016 · Nov 19, 2016 · forshtreter
diff --git a/Baklazhan.jpg b/Baklazhan.jpg
diff --git a/Gribochek.jpg b/Gribochek.jpg
diff --git a/Grusha.jpg b/Grusha.jpg
diff --git a/Kapusta.jpg b/Kapusta.jpg
diff --git a/Kartoha.jpg b/Kartoha.jpg
diff --git a/Kukumber.jpeg b/Kukumber.jpeg
diff --git a/Kukuruza.jpg b/Kukuruza.jpg
diff --git a/Morkovka.jpg b/Morkovka.jpg
diff --git a/Perec.png b/Perec.png
diff --git a/Pomidorchik.jpg b/Pomidorchik.jpg
diff --git a/Tibloko.png b/Tibloko.png
diff --git a/Tikva.jpg b/Tikva.jpg
diff --git a/apple.png b/apple.png
diff --git a/aubergine.jpg b/aubergine.jpg
diff --git a/cabbage.jpg b/cabbage.jpg
diff --git a/carrot.jpg b/carrot.jpg
diff --git a/corn.jpg b/corn.jpg
diff --git a/cucumber.jpeg b/cucumber.jpeg
diff --git 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
@@ -1,8 +1,129 @@
 <!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="utf-8">
-</head>
-<body>
-</body>
+    <html lang="ru">
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" type="text/css" href="index.css">
+        <title>Hello, markup-6</title>
+    </head>
+    <body>
+        <input type="radio" name="slider" value="first" checked="checked">
+        <input type="radio" name="slider" value="second">
+        <input type="radio" name="slider" value="third">
+        <div class="gallery">
+            <div class="gallery-first-block">
+                <div id="aubergine" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#aubergine">
+                        <img src="aubergine.jpg" alt="aubergine">
+                    </a>
+                    <h4>Aubergine</h4>
+                </div>
+                <div id="tomato" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#tomato">
+                        <img src="tomato.jpg" alt="tomato">
+                    </a>
+                    <h4>Tomato</h4>
+                </div>
+                <div id="apple" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#apple">
+                        <img src="apple.png" alt="apple">
+                    </a>
+                    <h4>Apple</h4>
+                </div>
+                <div id="cucumber" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#cucumber">
+                        <img src="cucumber.jpeg" alt="cucumber">
+                    </a>
+                    <h4>Cucumber</h4>
+                </div>
+            </div>
+            <div class="gallery-second-block">
+                <div id="corn" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#corn">
+                        <img src="corn.jpg" alt="corn">
+                    </a>
+                    <h4>Corn</h4>
+                </div>
+                <div id="pear" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#pear">
+                        <img src="pear.jpg" alt="pear">
+                    </a>
+                    <h4>Pear</h4>
+                </div>
+                <div id="pumpkin" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#pumpkin">
+                        <img src="pumpkin.jpg" alt="pumpkin">
+                    </a>
+                    <h4>Pumpkin</h4>
+                </div>
+                <div id="pepper" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#pepper">
+                        <img src="pepper.png" alt="pepper">
+                    </a>
+                    <h4>Pepper</h4>
+                </div>
+            </div>
+            <div class="gallery-third-block">
+                <div id="carrot" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#carrot">
+                        <img src="carrot.jpg" alt="carrot">
+                    </a>
+                    <h4>Carrot</h4>
+                </div>
+                <div id="cabbage" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#cabbage">
+                        <img src="cabbage.jpg" alt="cabbage">
+                    </a>
+                    <h4>Cabbage</h4>
+                </div>
+                <div id="mushroom" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#mushroom">
+                        <img src="mushroom.jpg" alt="mushroom">
+                    </a>
+                    <h4>Garlic</h4>
+                </div>
+                <div id="potato" class="gallery-item">
+                    <div class="close-button">
+                        <a href="#">X</a>
+                    </div>
+                    <a href="#Potato">
+                        <img src="potato.jpg" alt="potato">
+                    </a>
+                    <h4>Potato</h4>
+                </div>
+            </div>
+        </div>
+    </body>
 </html>
diff --git a/mushroom.jpg b/mushroom.jpg
diff --git a/pear.jpg b/pear.jpg
diff --git a/pepper.png b/pepper.png
diff --git a/potato.jpg b/potato.jpg
diff --git a/pumpkin.jpg b/pumpkin.jpg
diff --git a/tomato.jpg b/tomato.jpg