From decb2d2e1bddca97556aff280fdd13cee16bf7d6 Mon Sep 17 00:00:00 2001 From: VladEpifanov <124862300+VladEpifanov@users.noreply.github.com> Date: Sun, 21 May 2023 23:36:59 +0300 Subject: [PATCH] Add files via upload --- .../polls/static/polls/css/component.css | 420 ++++++++++++++++++ .../Django/polls/static/polls/css/demo.css | 216 +++++++++ .../polls/static/polls/css/flickity.css | 141 ++++++ 3 files changed, 777 insertions(+) create mode 100644 Задания/task1/Epifanov/Django/polls/static/polls/css/component.css create mode 100644 Задания/task1/Epifanov/Django/polls/static/polls/css/demo.css create mode 100644 Задания/task1/Epifanov/Django/polls/static/polls/css/flickity.css diff --git a/Задания/task1/Epifanov/Django/polls/static/polls/css/component.css b/Задания/task1/Epifanov/Django/polls/static/polls/css/component.css new file mode 100644 index 0000000..a3ef1b5 --- /dev/null +++ b/Задания/task1/Epifanov/Django/polls/static/polls/css/component.css @@ -0,0 +1,420 @@ +/* Product grid */ + +.grid { + position: relative; + overflow: hidden; + max-width: 1300px; + margin: 0 auto; + padding: 1.5em 0 8em; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + -khtml-user-select: none; +} + +/* Loader */ +.grid__loader { + display: none; + margin: 3em auto 0; +} + +.grid--loading .grid__loader { + display: block; +} + +/* Clearfix */ + +.grid:after { + content: ''; + display: block; + clear: both; +} + +/* Grid items */ + +.grid__sizer, +.grid__item { + position: relative; + float: left; + width: 20%; + padding: .75em; +} + +.no-touch .grid__sizer, +.no-touch .grid__item { + padding: .75em .75em 1.25em; +} + +.grid--loading .grid__item { + visibility: hidden; +} + +.grid__item--size-a { + width: 40%; +} + +/* Gallery */ + +.slider { + padding: 0; + border-radius: 5px; + background: #24252a; +} + +.no-touch .slider { + padding: 0 0 1.25em; +} + +.slider__item { + width: 100%; + padding: 1em; +} + +.slider__item img { + width: 100%; +} +/* Flickity page dots */ + +.slider .flickity-page-dots { + bottom: 20px; + opacity: 0; + -webkit-transition: opacity .3s; + transition: opacity .3s; +} + +.no-touch .slider:hover .flickity-page-dots { + opacity: 1; +} + +.slider .flickity-page-dots .dot { + background: #131417; +} + +/* Product meta */ + +.meta { + position: relative; + margin: 10px 0 0; + padding: 0 60px 0 0; + text-align: left; +} + +.meta__brand { + font-size: .85em; + font-weight: bold; + display: block; + color: #595b64; +} + +.meta__title { + font-size: .95em; + font-weight: bold; + margin: 0; + padding: .4em 0 .1em; +} + +.meta__price { + font-size: .95em; + font-weight: bold; + position: absolute; + top: .45em; + right: .25em; + color: #595b64; +} + +/* Action style */ + +.action { + font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; + font-size: 1.05em; + position: relative; + overflow: hidden; + margin: 0; + padding: .25em; + cursor: pointer; + color: #fff; + border: none; + background: none; +} + +.action:focus { + outline: none; +} + +.action--button { + color: #5c5edc; +} + +.no-touch .action--button:hover { + color: #fff; + outline: none; +} + +.text-hidden { + position: absolute; + top: 200%; +} + +/* Add to cart button */ + +.action--buy { + position: absolute; + top: 0; + right: 0; + padding: 1.85em 2.35em; + -webkit-transition: opacity .3s, -webkit-transform .3s; + transition: opacity .3s, transform .3s; + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); +} + +.no-touch .action--buy { + opacity: 0; +} + +.no-touch .grid__item:hover .action--buy { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +/* Fixed bottom bar */ + +.bar { + position: fixed; + z-index: 100; + bottom: 0; + left: 0; + width: 100%; + padding: 1.75em 5em; + text-align: center; + background: #191a1b; + -webkit-transform: translate3d(0, 0, 0); + /* Fix for Chrome flicker on Mac ...party like we're in 2012! */ +} + +.flexbox .filter { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; +} + +/* Filter */ + +.filter__label { + font-size: .85em; + display: inline-block; + margin: 0 2%; + font-weight: bold; + color: #393A3F; +} + +.filter__item { + font-weight: bold; + margin: 0 2%; + padding: .1em; + vertical-align: middle; + color: #a3a3b3; + border-bottom: 2px solid transparent; +} + +.filter__item--selected { + color: #5c5edc; + border-color: #5c5edc; +} + +.filter__item .icon { + font-size: 1.75em; + display: none; +} + +/* Shopping cart */ + +.cart { + font-size: 1.5em; + position: absolute; + top: 0; + right: 0; + overflow: hidden; + height: 100%; + padding: 0 1.195em; + cursor: pointer; + color: #abacae; + border: none; + background-color: #131415; +} + +.no-touch .cart:focus, +.no-touch .cart:hover { + color: #fff; + outline: none; +} + +.cart--animate .cart__icon { + -webkit-animation: cartAnim .4s forwards; + animation: cartAnim .4s forwards; +} + +@-webkit-keyframes cartAnim { + 50% { + opacity: 0; + -webkit-transform: translate3d(50px, 0, 0); + transform: translate3d(50px, 0, 0); + } + 51% { + opacity: 0; + -webkit-transform: translate3d(-50px, 0, 0); + transform: translate3d(-50px, 0, 0); + } + 100% { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes cartAnim { + 50% { + opacity: 0; + -webkit-transform: translate3d(50px, 0, 0); + transform: translate3d(50px, 0, 0); + } + 51% { + opacity: 0; + -webkit-transform: translate3d(-50px, 0, 0); + transform: translate3d(-50px, 0, 0); + } + 100% { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.cart__count { + font-size: 9px; + font-weight: bold; + line-height: 15px; + position: absolute; + top: 50%; + right: 20px; + width: 15px; + height: 15px; + margin: -16px 0 0 0; + text-align: center; + color: #fff; + border-radius: 50%; + background: #5c5edc; +} + +.cart--animate .cart__count { + -webkit-animation: countAnim .4s forwards; + animation: countAnim .4s forwards; +} + +@-webkit-keyframes countAnim { + 50% { + opacity: 0; + -webkit-transform: translate3d(0, 80px, 0); + transform: translate3d(0, 80px, 0); + } + 51% { + opacity: 0; + -webkit-transform: translate3d(0, -80px, 0); + transform: translate3d(0, -80px, 0); + } + 100% { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes countAnim { + 50% { + opacity: 0; + -webkit-transform: translate3d(0, 80px, 0); + transform: translate3d(0, 80px, 0); + } + 51% { + opacity: 0; + -webkit-transform: translate3d(0, -80px, 0); + transform: translate3d(0, -80px, 0); + } + 100% { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +/* Resize grid items on smaller screens */ + +@media screen and (max-width: 65em) { + .grid__sizer, + .grid__item, + .grid__item--size-a { + width: 33.333%; + } +} + +@media screen and (max-width: 50em) { + .grid__sizer, + .grid__item, + .grid__item--size-a { + width: 50%; + } + .bar { + padding-left: 0; + text-align: left; + } +} + +@media screen and (max-width: 40em) { + .bar { + padding: .5em 4.5em .5em 0; + } + .flexbox .filter { + -webkit-justify-content: space-around; + justify-content: space-around; + } + .filter__item { + height: 100%; + padding: .5em .1em; + border: none; + } + .filter__item .icon { + display: inline-block; + } + .filter__label, + .action__text { + display: none; + } + .cart { + padding: 0 1em; + } +} + +@media screen and (max-width: 25em) { + .grid { + max-width: 75%; + } + .grid__loader { + margin: 0 auto; + } + .grid__sizer, + .grid__item, + .grid__item--size-a { + width: 100%; + } + .action--buy { + font-size: 1.5em; + padding: 1.15em 1.5em; + -webkit-tap-highlight-color: transparent; + } +} \ No newline at end of file diff --git a/Задания/task1/Epifanov/Django/polls/static/polls/css/demo.css b/Задания/task1/Epifanov/Django/polls/static/polls/css/demo.css new file mode 100644 index 0000000..cd933fa --- /dev/null +++ b/Задания/task1/Epifanov/Django/polls/static/polls/css/demo.css @@ -0,0 +1,216 @@ +/* General Blueprint Style */ +@import url(http://fonts.googleapis.com/css?family=Lato:400,700); +@font-face { + font-family: 'bpicons'; + font-weight: normal; + font-style: normal; + src: url('../fonts/bpicons/bpicons.eot'); + src: url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'), + url('../fonts/bpicons/bpicons.woff') format('woff'), + url('../fonts/bpicons/bpicons.ttf') format('truetype'), + url('../fonts/bpicons/bpicons.svg#bpicons') format('svg'); +} /* Made with http://icomoon.io/ */ + +/* Resets */ +*, +*:after, +*:before { + box-sizing: border-box; +} + +html { + overflow-y: scroll; +} + +body, +html { + font-size: 100%; + margin: 0; + padding: 0; +} + +/* Helper classes */ +.cf:before, +.cf:after { + content: ' '; + display: table; +} + +.cf:after { + clear: both; +} + +.hidden { + position: absolute; + opacity: 0; + pointer-events: none; +} + +/* Main styles */ +body { + font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; + color: #CECECE; + background: #2A2B30; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + text-decoration: none; + color: #f0f0f0; + outline: none; +} + +a:hover { + color: #5C5EDC; +} + +/* Blueprint header */ +.bp-header { + width: 90%; + max-width: 69em; + margin: 0 auto; + padding: 4em 1.875em 1.875em; + text-align: center; +} + +.bp-header h1 { + font-size: 2.125em; + font-weight: 400; + line-height: 1.3; + margin: 0 0 .6em 0; +} + +.bp-header h1 > span { + font-size: 50%; + display: block; + color: #4D4D5A; +} + +.bp-header > span { + font-weight: 700; + font-size: 0.85em; + color: #5C5EDC; + position: relative; + z-index: 100; + display: block; + padding: 0 0 .6em .1em; + letter-spacing: .5em; + text-transform: uppercase; + text-indent: 30px; +} + +.bp-header > span span:after { + font-size: 50%; + font-size: 75%; + position: relative; + top: -8px; + left: -12px; + width: 30px; + height: 30px; +} + +.bp-header > span span:hover:before { + content: attr(data-content); + font-size: 110%; + font-weight: 700; + line-height: 1.2; + position: absolute; + left: auto; + margin-left: 4px; + padding: .8em 1em; + text-align: left; + text-indent: 0; + letter-spacing: 0; + text-transform: none; + color: #fff; + background: #5C5EDC; +} + +.bp-header nav { + text-align: center; + margin: 0 auto; +} + +.bp-header nav a { + position: relative; + display: inline-block; + width: 2.5em; + height: 2.5em; + margin: 0 .1em; + text-align: left; + border-radius: 50%; +} + +.bp-header nav a > span { + display: none; +} + +.bp-header nav a:hover:before { + content: attr(data-info); + color: #595A5F; + font-weight: bold; + font-size: 0.85em; + position: absolute; + top: 120%; + right: 0; + width: 600%; + text-align: right; + pointer-events: none; +} + +.bp-header nav a:hover { + background: #5C5EDC; +} + +.bp-icon:after { + font-family: 'bpicons'; + font-weight: normal; + font-style: normal; + font-variant: normal; + text-align: center; + text-transform: none; + color: #5C5EDC; + speak: none; + -webkit-font-smoothing: antialiased; +} + +.bp-header nav .bp-icon:after { + line-height: 2.4; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-indent: 0; +} + +.bp-header nav a:hover:after { + color: #fff; +} + +.bp-icon-next:after { + content: '\e000'; +} + +.bp-icon-drop:after { + content: '\e001'; +} + +.bp-icon-archive:after { + content: '\e002'; +} + +.bp-icon-about:after { + content: '\e003'; +} + +.bp-icon-prev:after { + content: '\e004'; +} + +@media screen and (max-width: 40em) { + .bp-header h1 { + font-size: 1.8em; + } +} \ No newline at end of file diff --git a/Задания/task1/Epifanov/Django/polls/static/polls/css/flickity.css b/Задания/task1/Epifanov/Django/polls/static/polls/css/flickity.css new file mode 100644 index 0000000..b8eca4e --- /dev/null +++ b/Задания/task1/Epifanov/Django/polls/static/polls/css/flickity.css @@ -0,0 +1,141 @@ +/*! Flickity v1.0.2 +http://flickity.metafizzy.co +---------------------------------------------- */ + +.flickity-enabled { + position: relative; +} + +.flickity-enabled:focus { outline: none; } + +.flickity-viewport { + overflow: hidden; + position: relative; + height: 100%; +} + +.flickity-slider { + position: absolute; + width: 100%; + height: 100%; +} + +/* draggable */ + +.flickity-enabled.is-draggable { + -webkit-tap-highlight-color: transparent; + tap-highlight-color: transparent; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.flickity-enabled.is-draggable .flickity-viewport { + cursor: move; + cursor: -webkit-grab; + cursor: grab; +} + +.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { + cursor: -webkit-grabbing; + cursor: grabbing; +} + +/* ---- previous/next buttons ---- */ + +.flickity-prev-next-button { + position: absolute; + top: 50%; + width: 44px; + height: 44px; + border: none; + border-radius: 50%; + background: white; + background: hsla(0, 0%, 100%, 0.75); + cursor: pointer; + /* vertically center */ + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +.flickity-prev-next-button:hover { background: white; } + +.flickity-prev-next-button:focus { + outline: none; + box-shadow: 0 0 0 5px #09F; +} + +.flickity-prev-next-button:active { + filter: alpha(opacity=60); /* IE8 */ + opacity: 0.6; +} + +.flickity-prev-next-button.previous { left: 10px; } +.flickity-prev-next-button.next { right: 10px; } +/* right to left */ +.flickity-rtl .flickity-prev-next-button.previous { + left: auto; + right: 10px; +} +.flickity-rtl .flickity-prev-next-button.next { + right: auto; + left: 10px; +} + +.flickity-prev-next-button:disabled { + filter: alpha(opacity=30); /* IE8 */ + opacity: 0.3; + cursor: auto; +} + +.flickity-prev-next-button svg { + position: absolute; + left: 20%; + top: 20%; + width: 60%; + height: 60%; +} + +.flickity-prev-next-button .arrow { + fill: #333; +} + +/* color & size if no SVG - IE8 and Android 2.3 */ +.flickity-prev-next-button.no-svg { + color: #333; + font-size: 26px; +} + +/* ---- page dots ---- */ + +.flickity-page-dots { + position: absolute; + width: 100%; + bottom: -25px; + padding: 0; + margin: 0; + list-style: none; + text-align: center; + line-height: 1; +} + +.flickity-rtl .flickity-page-dots { direction: rtl; } + +.flickity-page-dots .dot { + display: inline-block; + width: 10px; + height: 10px; + margin: 0 8px; + background: #333; + border-radius: 50%; + filter: alpha(opacity=25); /* IE8 */ + opacity: 0.25; + cursor: pointer; +} + +.flickity-page-dots .dot.is-selected { + filter: alpha(opacity=100); /* IE8 */ + opacity: 1; +}