From a90c208d65c5d88d9145234f4c29632b41271e5e Mon Sep 17 00:00:00 2001 From: tolstoevsky Date: Tue, 18 Feb 2020 12:03:39 +0300 Subject: [PATCH] gallery --- css/base.css | 8 +-- css/popup.css | 130 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 54 +++++++++++++++++--- js/jquery.min.js | 4 ++ js/popup.js | 36 +++++++++++++ 5 files changed, 220 insertions(+), 12 deletions(-) create mode 100644 css/popup.css create mode 100644 js/jquery.min.js create mode 100644 js/popup.js diff --git a/css/base.css b/css/base.css index dcb6d61..ff2609f 100644 --- a/css/base.css +++ b/css/base.css @@ -6,11 +6,13 @@ .textblock { background-color:#224; border-radius:4px; - border:1px solid #667; + border-style:solid; + border-color: #667; display:inline-block; width: 90%; height: 90%; color: #bbb; + padding: 2% 2% 2% 2%; } @@ -22,7 +24,7 @@ width: 90%; height: 90%; color: #bbb; - padding: 1% 1% 1% 1%; + padding: 2% 2% 2% 2%; text-align: justify; } @@ -55,8 +57,6 @@ h1 { } h2 { font-size: 1.4em; - border-top: solid 1px #eee; - padding-top: 20px; } h3 { font-size: 1.1em; diff --git a/css/popup.css b/css/popup.css new file mode 100644 index 0000000..518b1ff --- /dev/null +++ b/css/popup.css @@ -0,0 +1,130 @@ +.row > .column { + padding: 0 8px; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + +.column { + float: left; + width: 25%; +} + +/* The Modal (background) */ +.modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: black; +} + +/* Modal Content */ +.modal-content { + position: relative; + background-color: #fefefe; + margin: auto; + padding: 0; + width: 90%; + max-width: 1200px; +} + +/* The Close Button */ +.close { + color: white; + position: absolute; + top: 10px; + right: 25px; + font-size: 35px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: #999; + text-decoration: none; + cursor: pointer; +} + +.mySlides { + display: none; +} + +.cursor { + cursor: pointer; +} + +/* Next & previous buttons */ +.prev, +.next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -50px; + color: white; + font-weight: bold; + font-size: 20px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + -webkit-user-select: none; +} + +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, +.next:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +/* Number text (1/3 etc) */ +.numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; +} + +img { + margin-bottom: -4px; +} + +.caption-container { + text-align: center; + background-color: black; + padding: 2px 16px; + color: white; +} + +.demo { + opacity: 0.6; +} + +.active, +.demo:hover { + opacity: 1; +} + +img.hover-shadow { + transition: 0.3s; +} + +.hover-shadow:hover { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} diff --git a/index.html b/index.html index 82a8cc8..0072b39 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,9 @@ У вас всегда есть выбор! - + + +