pages

pik4ez · Jun 19, 2016 · 74b0150 · 74b0150
1 parent 655e750
commit 74b0150
Show file tree

Hide file tree

Showing 31 changed files with 6,616 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+    <a href="./piter.html">Питер</a><br>
+    <a href="./santiago.html">Сантьяго</a><br>
+    <a href="./pripat.html">Припять</a><br>
+    <a href="./moscow_babe.html">Москва - анимация</a><br>
+</body>
+</html>
diff --git a/moscow_babe.html b/moscow_babe.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<!--[if lt IE 7 ]>
+<html class="ie ie6 no-js" lang="en"> <![endif]-->
+<!--[if IE 7 ]>
+<html class="ie ie7 no-js" lang="en"> <![endif]-->
+<!--[if IE 8 ]>
+<html class="ie ie8 no-js" lang="en"> <![endif]-->
+<!--[if IE 9 ]>
+<html class="ie ie9 no-js" lang="en"> <![endif]-->
+<!--[if gt IE 9]><!-->
+<html class="no-js" lang="en"><!--<![endif]-->
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>АПИ Сал: movie</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description"
+          content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow"/>
+    <meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content"/>
+    <meta name="author" content="Codrops"/>
+    <link rel="stylesheet" type="text/css" href="./static/babe/css/demo.css"/>
+    <script type="text/javascript" src="./static/babe/js/modernizr.custom.86080.js"></script>
+    <style>
+        .cb-slideshow,
+        .cb-slideshow:after {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            top: 0px;
+            left: 0px;
+            z-index: 0;
+        }
+
+        .cb-slideshow:after {
+            content: '';
+            background: transparent url(./static/babe/images/pattern.png) repeat top left;
+        }
+
+        .cb-slideshow li span {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            color: transparent;
+            background-size: cover;
+            background-position: 50% 50%;
+            background-repeat: none;
+            opacity: 0;
+            z-index: 0;
+            -webkit-backface-visibility: hidden;
+            -webkit-animation: imageAnimation 36s linear infinite 0s;
+            -moz-animation: imageAnimation 36s linear infinite 0s;
+            -o-animation: imageAnimation 36s linear infinite 0s;
+            -ms-animation: imageAnimation 36s linear infinite 0s;
+            animation: imageAnimation 36s linear infinite 0s;
+        }
+
+        .cb-slideshow li div {
+            z-index: 1000;
+            position: absolute;
+            bottom: 30px;
+            left: 0px;
+            width: 100%;
+            text-align: center;
+            opacity: 0;
+            color: #fff;
+            -webkit-animation: titleAnimation 36s linear infinite 0s;
+            -moz-animation: titleAnimation 36s linear infinite 0s;
+            -o-animation: titleAnimation 36s linear infinite 0s;
+            -ms-animation: titleAnimation 36s linear infinite 0s;
+            animation: titleAnimation 36s linear infinite 0s;
+        }
+
+        .cb-slideshow li div h3 {
+            font-family: 'Arial Narrow', Arial, sans-serif;
+            font-size: 120px;
+            padding: 0;
+            line-height: 200px;
+        }
+
+        .cb-slideshow li:nth-child(1) span {
+    background-image: url("http://photos.wikimapia.org/p/00/03/27/88/64_big.jpg"); -webkit-animation-delay: 0s; -moz-animation-delay: 0s;
+    -o-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s;
+}
+.cb-slideshow li:nth-child(2) span {
+    background-image: url("http://photos.wikimapia.org/p/00/01/25/09/17_big.jpg"); -webkit-animation-delay: 6s; -moz-animation-delay: 6s;
+    -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s;
+}
+.cb-slideshow li:nth-child(3) span {
+    background-image: url("http://photos.wikimapia.org/p/00/00/52/32/05_big.jpg"); -webkit-animation-delay: 12s; -moz-animation-delay: 12s;
+    -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s;
+}
+.cb-slideshow li:nth-child(4) span {
+    background-image: url("http://photos.wikimapia.org/p/00/04/04/32/97_big.jpg"); -webkit-animation-delay: 18s; -moz-animation-delay: 18s;
+    -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s;
+}
+.cb-slideshow li:nth-child(5) span {
+    background-image: url("http://photos.wikimapia.org/p/00/00/51/76/46_big.jpg"); -webkit-animation-delay: 24s; -moz-animation-delay: 24s;
+    -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s;
+}
+.cb-slideshow li:nth-child(6) span {
+    background-image: url("http://photos.wikimapia.org/p/00/00/70/36/73_big.jpg"); -webkit-animation-delay: 30s; -moz-animation-delay: 30s;
+    -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s;
+}.cb-slideshow li:nth-child(2) div {
+    -webkit-animation-delay: 6s; -moz-animation-delay: 6s;
+    -o-animation-delay: 6s; -ms-animation-delay: 6s;
+    animation-delay: 6s;
+}
+.cb-slideshow li:nth-child(3) div {
+    -webkit-animation-delay: 12s; -moz-animation-delay: 12s;
+    -o-animation-delay: 12s; -ms-animation-delay: 12s;
+    animation-delay: 12s;
+}
+.cb-slideshow li:nth-child(4) div {
+    -webkit-animation-delay: 18s; -moz-animation-delay: 18s;
+    -o-animation-delay: 18s; -ms-animation-delay: 18s;
+    animation-delay: 18s;
+}
+.cb-slideshow li:nth-child(5) div {
+    -webkit-animation-delay: 24s; -moz-animation-delay: 24s;
+    -o-animation-delay: 24s; -ms-animation-delay: 24s;
+    animation-delay: 24s;
+}
+.cb-slideshow li:nth-child(6) div {
+    -webkit-animation-delay: 30s; -moz-animation-delay: 30s;
+    -o-animation-delay: 30s; -ms-animation-delay: 30s;
+    animation-delay: 30s;
+}        /* Animation for the slideshow images */
+        @-webkit-keyframes imageAnimation {
+            0% {
+                opacity: 0;
+                -webkit-animation-timing-function: ease-in;
+            }
+            8% {
+                opacity: 1;
+                -webkit-animation-timing-function: ease-out;
+            }
+            17% {
+                opacity: 1
+            }
+            25% {
+                opacity: 0
+            }
+            100% {
+                opacity: 0
+            }
+        }
+
+        @-moz-keyframes imageAnimation {
+            0% {
+                opacity: 0;
+                -moz-animation-timing-function: ease-in;
+            }
+            8% {
+                opacity: 1;
+                -moz-animation-timing-function: ease-out;
+            }
+            17% {
+                opacity: 1
+            }
+            25% {
+                opacity: 0
+            }
+            100% {
+                opacity: 0
+            }
+        }
+
+        @-o-keyframes imageAnimation {
+            0% {
+                opacity: 0;
+                -o-animation-timing-function: ease-in;
+            }
+            8% {
+                opacity: 1;
+                -o-animation-timing-function: ease-out;
+            }
+            17% {
+                opacity: 1
+            }
+            25% {
+                opacity: 0
+            }
+            100% {
+                opacity: 0
+            }
+        }
+
+        @-ms-keyframes imageAnimation {
+            0% {
+                opacity: 0;
+                -ms-animation-timing-function: ease-in;
+            }
+            8% {
+                opacity: 1;
+                -ms-animation-timing-function: ease-out;
+            }
+            17% {
+                opacity: 1
+            }
+            25% {
+                opacity: 0
+            }
+            100% {
+                opacity: 0
+            }
+        }
+
+        @keyframes imageAnimation {
+            0% {
+                opacity: 0;
+                animation-timing-function: ease-in;
+            }
+            8% {
+                opacity: 1;
+                animation-timing-function: ease-out;
+            }
+            17% {
+                opacity: 1
+            }
+            25% {
+                opacity: 0
+            }
+            100% {
+                opacity: 0
+            }
+        }
+
+        /* Animation for the title */
+        @-webkit-keyframes titleAnimation {
+            0% {
+                opacity: 0
+            }
+            8% {
+                opacity: 1
+            }
+            17% {
+                opacity: 1
+            }
+            19% {
+                opacity: 0
+            }
+            100% {
+                opacity: 0
+            }
+        }
+
+        @-moz-keyframes titleAnimation {
+            0% {
+                opacity: 0
+            }
+            8% {
+                opacity: 1
+            }
+            17% {
+                opacity: 1
+            }
+            19% {
+                opacity: 0
+            }
+            100% {
+                opacity: 0
+            }
+        }
+
+        @-o-keyframes titleAnimation {
+            0% {
+                opacity: 0
+            }
+            8% {
+                opacity: 1
+            }
+            17% {
+                opacity: 1
+            }
+            19% {
+                opacity: 0
+            }
+            100% {
+                opacity: 0
+            }
+        }
+
+        @-ms-keyframes titleAnimation {
+            0% {
+                opacity: 0
+            }
+            8% {
+                opacity: 1
+            }
+            17% {
+                opacity: 1
+            }
+            19% {
+                opacity: 0
+            }
+            100% {
+                opacity: 0
+            }
+        }
+
+        @keyframes titleAnimation {
+            0% {
+                opacity: 0
+            }
+            8% {
+                opacity: 1
+            }
+            17% {
+                opacity: 1
+            }
+            19% {
+                opacity: 0
+            }
+            100% {
+                opacity: 0
+            }
+        }
+
+        /* Show at least something when animations not supported */
+        .no-cssanimations .cb-slideshow li span {
+            opacity: 1;
+        }
+
+        @media screen and (max-width: 1140px) {
+            .cb-slideshow li div h3 {
+                font-size: 100px
+            }
+        }
+
+        @media screen and (max-width: 600px) {
+            .cb-slideshow li div h3 {
+                font-size: 60px
+            }
+        }        </style>
+</head>
+<body id="page">
+<ul class="cb-slideshow">
+<li><span></span><div><h3>Часть Ограды Пашковского сада</h3></div></li>
+<li><span></span><div><h3>Парадная лестница</h3></div></li>
+<li><span></span><div><h3>Церковь Николая Чудотворца Стрелецкого (1682-1932 гг.)</h3></div></li>
+<li><span></span><div><h3>Газон у дома Пашкова</h3></div></li>
+<li><span></span><div><h3>Часовня Николая Чудотворца</h3></div></li>
+<li><span></span><div><h3>Дом Пашкова</h3></div></li></ul>
+</body>
+</html>
+