Олеся Бессарабова
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta charset="utf-8"> <!— <meta Http-Equiv="Cache-Control" Content="no-cache"> <meta Http-Equiv="Pragma" Content="no-cache"> <meta Http-Equiv="Expires" Content="0"> <meta Http-Equiv="Pragma-directive: no-cache"> <meta Http-Equiv="Cache-directive: no-cache"> --> <title>bess</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css" rel="stylesheet" type="text/css"> <link href="/page/css/txt.css" rel="stylesheet" type="text/css"> <link href="/page/css/range.css" rel="stylesheet" type="text/css"> <link href="/page/css/summernote.css" rel="stylesheet" type="text/css"/> <link href="/site/dist/css/style.css" rel="stylesheet" type="text/css"> <link href="../vendors/bower_components/dropify/dist/css/dropify.min.css" rel="stylesheet" type="text/css"/> <link href="../vendors/bower_components/mjolnic-bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" rel="stylesheet" type="text/css"/> <link href="../vendors/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"/> <link href="../vendors/bower_components/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" type="text/css"/> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="/page/js/checked.js"></script> </head> <body> <div id="page-preloader"><span class="spinner"></span></div> <div class="loader"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar4"></div> <div class="bar5"></div> <div class="bar6"></div> </div> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Audiowide|Iceland|Monoton|Pacifico|Press+Start+2P|Vampiro+One); @import url(https://fonts.googleapis.com/css?family=Roboto+Slab|PT+Sans+Caption&subset=latin,cyrillic); @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css); @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); @import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); @import url(/page/font/fonts.css); :root{ --profile-card-img: #8080ff; --avaglows: #8080ff; --profile-card-shadow: 35px; --glowsava: 35px; --avaradius: 35%; --sizeheader: 22px; --colorheader: #8000ff; --color_bbg1: #b5bfbf; --color2: #8080ff; --corner: 88deg; --colorbgbget: 0%; --link_pattern: url("https://www.avon.ru/REPSuite/static/images/20200401_login.jpg"); --opacitypattern: 60; --colortext: #8000ff; --sizetext: 22px; --speedtext: 70s; --familyheader: Comfortaa; --main_ccolor: #ffffff; --main 16px; --main_b: b: 12px; --but-color-1: #6944ff; --but-color-t-1: #fff; } .profile-card_js-profile-cnt.blur { overflow: hidden; box-shadow: 0px 8px 20px 8px rgba(20, 28, 40, 0.6); border-radius: var(--main_t) vat) var(--main(--main_b) var(b) var(--mainkground: var(--main_color); }color); } .mast_ebkit-user-select: none; -webkit-mask-image: -webkit-gradient( linear, left top, right top, color-stop(0, rgba(0,0,0,0.5)), color-stop(0.45, rgba(0,0,0,0.5)), color-stop(0.5, rgba(0,0,0,1)), color-stop(0.55, rgba(0,0,0,0.5))); -webkit-mask-size: 1000px; -webkit-animation-timing-function: ease-in-out; -webkit-animation: text-slide calc(10.2s - (var(--speedtext) / 10)) infinite; animation-iteration-count:infinite; } .profile-card_name.mast_name.mast_nter { color: var(--colortext); font-size: var(--sizetext); } b{ font-weight: bold !important; font-family: "open sans"; } @keyframes delay { 0%, 40%, 100% { transform: scaleY(0.05); -webkit-transform: scaleY(0.05); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } body:before, body:after { content: ''; height: 50vh; width: 100%; position: fixed; left: 0; background: #1c2020; z-index: 1; } body:before { top: 0; transform: translateY(-100%); } body:after { bottom: 0; transform: translateY(100%); } .loader { pointer-events: none; margin: 0 auto; width: 60px; height: 50px; text-align: center; font-size: 10px; position: fixed; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); z-index: 100; opacity: 0; } .loader > div { height: 100%; width: 8px; display: inline-block; float: left; margin-left: 2px; animation: delay 0.8s infinite ease-in-out; } .loader .bar1 { background-color: var(--profile-card-img); } .loader .bar2 { background-color: var(--profile-card-img); animation-delay: -0.6s; } .loader .bar3 { background-color: var(--profile-card-img); animation-delay: -0.5s; } .loader .bar4 { background-color: var(--profile-card-img); animation-delay: -0.4s; } .loader .bar5 { background-color: var(--profile-card-img); animation-delay: -0.3s; } .loader .bar6 { background-color: var(--profile-card-img); animation-delay: -0.2s; } #page-preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 50; } @import "compass/css3"; ::-webkit-scrollbar { width: 0em; height: 0em; } ::-webkit-scrollbar-thumb { background: var(--profile-card-img); } ::-webkit-scrollbar-track { background: #697886; } html { position: relative; overflow-x: hidden !important; } * { box-sizing: border-box; } body { font-family: 'greek', sans-serif; color: #324e63; margin: 0px; padding-right: 0px !IMPORTANT; } form{ height: 45px; } a, a:hover { text-decoration: none; } .btn{ text-transform: none !important; color: #444; font-family: comfortaa; } .icon { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; } .font_1{ font-fami1{ font-family: Pacifico; font-size: 18px; font-weight: 500; opacity: .9; margin-bottom: -8px; } .wrapper { width: 100%; height: auto; min-height: 100vh; padding: 20px 10px; background-image: linear-gradient(var(--corner), var(--colororbgoffset), varbgolor_bg2) 100%); } .wrbg2) 100%); } .wrapper:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: var(--link: calc(var(--opacity_pattern) / 100); -pattern) / 100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); } @media screen and (max-width: 768px) { .wrapper { height: auto; min-height: 100vh; } } .js-profile-card { width: 100%; margin:auto; max-width: 680px; position: relative; margin-bottom: 24px; } .profile { min-height: auto; border-radius: 12px; margin: auto; margin-bottom: 12px; } .profile-card:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 0; background-image: url(""); opacity: 0.16; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); pointer-events: none; } .js-profile-card.active .blur { filter: blur(6px); } .js-profile-card.active .profile-card-message, .js-profile-card.active .profile-card_1; pointer-events: auto; transition-delay: 0.1s; } .js-profile-card.active .profile-card-form { transform: none; transition-delay: 0.1s; } .profile-card__img { width: 170px; img { width: 170px; height: 170px; margin-left: auto; margin-right: auto; transform: translateY(-50%); position: relative; z-index: 1; cursor: pointer; } @media screen and (min-width: 576px) { .cnt { margin-top: -88px; } .wrapper { padding-top: 96px; } } @media screen and (max-width: 576px) { .profile-card_height: 140px; } .cnt { margin-top: -76px; } .wrapper { padding-top: 80px; } } .profile-card__img img { display: bloimg img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--avaradius); box-shadow: 0px 0px var(--glowsava) 0px var(--avaglows); border: 1px double #4C4C4CFF; } .profile-card_r; padding: 8px 0px; padding-bottom: 40px; transition: all 0.3s; } .profile-card__name { font-weight: 900;name { font-weight: 900; font-size: var(--sizeor_header); margin-bottom: 24header); margin-bottom: 24px; z-index: 1; font-family: var(--familyt { padding: 0px 10px; fotxt { padding: 0px 10px; font-size: 12px; font-weight: 700; color: #324e63; margin-bottom: -20px; opacity: .8; font-family: Comfortaa; } .profile-card_; } .profile-card-loc { display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 600; opacity: .9; } .profile-card-loc__icon { display: inline-flex; icon { display: inline-flex; font-size: 27px; margin-right: 10px; } .profile-card-inf { display: flex; justify-content: center; flex-wrap: wrap; align-items: flex-start; margin-top: 35px; } .profile-card-inf_-width: 150px; } .blurred { box-shadow: 0 0 8px 8px white inset; } @media screen and (max-width: 768px) { .profile-card-inf__item { padding: 10px 20px; min-item { padding: 10px 20px; min-width: 120px; } } .profile-card-inf_ize: 27px; color: #324e63; } .profile-card-inf__txt { font-weight: 500; margin-totxt { font-weight: 500; margin-top: 7px; } .icon-font img{ max-height: 48px; max-width: 48px; opacity: .8; } @media screen and (max-width: 768px) { .icon-font img{ max-height: 34px; max-width: 34px; opacity: .8; } } .profile-card-ctr { justify-content: center; align-items: center; } @media screen and (max-width: 740px) { .profile-card-ctr { flex-wrap: wrap; } } .profile-card_er: none;/ / font-family: 'cyrillic-ext', sans-serif;*// font-weight: 600; font-size: 14px; margin: 0px 12px; /adding: 15px 40px; */ / min-width: 44%; border-radius: 50px; min-height: 42px; color: #fff; cursor: pointer; backface-visibility: hidden; transition: all 0.3s; } .profile-card-ctr ol { padding: 0 4%; } .panel .pills-struct button:before, .panel .pills-struct button:after { display: none; } button { width: 44%; color: #454545; background: transparent; border-width: 2px; border-style: solid; position: relative; margin: 1em; display: inline-block; padding: 0.5em 1em; transition: all 0.3s ease-in-out; text-align: center; font-family: comfortaa; font-weight: bold; cursor: pointer; } .note-editor button { width: auto !important; min-width: 20px; } @media screen and (max-width: 740px){ .panel .note-editor button { width: auto !important; min-width: 20px; box-shadow: -2px -2px 10px #FFF, 0px 2px 4px #BABECC !important; } .panel-body button { box-shadow: -1px -1px 6px #FFF, 0px 4px 10px #BABECC !important; } .desc .font-family, .desc .note-color, .desc .note-style, .desc .note-fontname, .desc .note-para, .desc .note-insert, .desc .btn-codeview, .desc .btn-default.btn-sm:last-child { display: none; } .fullscreen .font-family, .fullscreen .note-color, .fullscreen .note-style, .fullscreen .note-fontname, .fullscreen .note-para, .fullscreen .note-insert, .fullscreen .btn-codeview, .fullscreen .btn-default.btn-sm:last-child { display: inline-block; } } .note-editor .note-btn.btn-sm { padding: 2px 9px !important; font-size: 14px !important; } .panel-body{ background-color: #EBECF0; } .panel-body button { box-shadow: -2px -2px 8px #FFF, 3px 3px 12px #BABECC; transition: all 0.2s ease-in-out; cursor: pointer; font-weight: 500; } .panel-body button:hover { box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC; } .panel-body button:active { box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF; } .panel-body button { border: 0; outline: 0; font-size: 13px; border-radius: 10px; padding: 20px 12px; background-color: #F9F9F9; } button.mod { height: 110px; } .pills-struct button { width: 88%; margin: 4px 8px; font-size: 12px; } .pills-struct .btn{ padding: 14px 14px; } .profile-card-ctr button:before, .profile-card-ctr button:after { content: ''; display: block; position: absolute; border-color: #fff; box-sizing: border-box; border-style: solid; width: 1em; height: 1em; transition: all 0.3s ease-in-out; } .profile-card-ctr button:before { top: -6px; left: -6px; border-width: 2px 0 0 2px; z-index: 5; } .profile-card-ctr button:after { bottom: -6px; right: -6px; border-width: 0 2px 2px 0; } .profile-card-ctr button:hover:before, .profile-card-ctr button:hover:after { width: calc(100% + 12px); height: calc(100% + 12px); } .profile-card-ctr button{ margin-bottom: 12px; } @media screen and (max-width: 740px) { .profile-card_button { min-width: inherit; margin: 0; margin-bottom: 16px; min-width: 90%; } .profile-card-ctr button{ min-width: 94%; position: relative;а } } .profile-card_button:focus { outline: none !important; } @media screen and (min-width: 768px) { .profile-card__bbutton:hover { transform: translateY(-5px); } } .profile-card_tton:first-child { margin-left: 0; } .profile-card__butbutton:last-child { margin-right: 0; } .profile-card_on.button--gray { box-shadow: none; background: #dcdcdc; color: #142029; border: 2px solid #CCCCCC; } .profile-card-message { width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding-top: 130px; padding-bottom: 100px; opacity: 0; pointer-events: none; transition: all 0.3s; } .profile-card-form { box-shadow: 0 4px 30px rgba(15, 22, 56, 0.35); height: auto; background: #fff; border-radius: 10px; padding: 25px; transform: scale(0.8); position: fixed; z-index: 3; transition: all 0.3s; top: calc((100% - 390px) / 2); width: 100%; margin: auto; max-width: 680px; } @media screen and (max-width: 720px) { .profile-card-form { width: calc(100% - 40px); } } @media screen and (max-width: 576px) { .profile-card-form { padding: 20px; } } .profile-card-form__bottobottom { justify-content: space-between; flex-wrap: wrap; text-align: center; } @media screen and (max-width: 576px) { .profile-card-form_ { flex-wrap: wrap; } } .js-profile-card textarea { width: 100%; resize: none; max-height: 52px; margin-bottom: 20px; border: 2px solid #dcdcdc; border-radius: 10px; padding: 15px 20px; color: #324e63; font-weight: 500; font-family: 'PT Sans Caption', sans-serif; outline: none; transition: all 0.3s; } .js-profile-card textarea:focus { outline: none; border-color: #8a979e; } .profile-card__overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; background: rgba(22, 33, 72, 0.35); border-radius: 12px; transition: all 0.3s; } /============/ / / / Carousel / /===/ /========*/ .galler/ .gallery { overflow: hidden; margin: 14px -7px; } .lazyload { background: #f7f7f7; } .lazyloading { background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center; min-height: 60px; } .gallery-cell { width: 72%; overflow: hidden; / center image in cell */ display:/ display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .gallery-cell img { display: block; width: 100%; height: 300px; object-fit: cover; /ted */ opacity: 0/ opacity: 0.7; -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-filter: blur(5px); filter: blur(5px); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s; transition: opacity 0.3s, transform 0.3s, filter 0.3s; } @media screen and (max-width: 576px) { .gallery-cell img { width: 110%; height: 180px; } } .gallery-cell.is-selected img { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-filter: none; filter: none; } .flickity-prev-next-button { width: 60px; height: 60px; background: transparent; opacity: 0.5; margin: auto; } .flickity-prev-next-button:hover { background: transparent; opacity: 1; } .flickity-page-dots{ opacity: 0; } .flickity-prev-next-button .arrow { fill: black; } .flickity-prev-next-button.no-svg { color: white; } .flickity-prev-next-button.previous { left: 0; } .flickity-prev-next-button.next { right: 0; } .flickity-prev-next-button:disabled { display: none; } /--------------------------— accordion --------------------------------------------*/ .hide { clip/ .hide { clip: rect(0 0 0 0); height: 1px; margin: -1px; padding: 0; position: absolute; width: 1px; display: flex; } .accordion { background: #fff; border: 1px solid #e0e0e0; width: 90%; margin: 15px auto; opacity: .9; } .accordion-item { position: relative; border-bottom: 1px solid #e0e0e0; } .accordion-label { padding: 7px 20px 7px 10px; width: 100%; display: block; font-size: 13px; /fortaa;*/ font-weight: 5/ font-weight: 500; text-align: left; } .accordion-label:hover { cursor: pointer; box-shadow: 0px 0px 20px rgba(43, 98, 169, 0.4); } .accordion-label:before { content: ''; position: absolute; height: 1px; width: 5px; top: 9px; left: calc(100% - 20px); display: inline-block; border-left: 8px solid #999; border-top: 8px solid transparent; border-bottom: 8px solid transparent; opacity: .5; -webkit-transition: all 0.3s ease-in-out; } input[type=checkbox]:checked ~ .accordion-label:before { transform: rotate(90deg); opacity: 1; -webkit-transition: all 0.4s ease-in-out; } .accordion-child { margin: 0; overflow: hidden; transition: all 0.3s ease; opacity: 0; height: 0; transform-origin: center top; font-size: 12px; font-family: Comfortaa; -webkit-transition: all 0.4s ease-in-out; } input[type=checkbox]:checked ~ .accordion-child { border: 1px solid #C0C0C0FF; margin: 0 -20px 0px -20px; background: #fff; box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.2); padding: 12px; height: auto; opacity: 1; transform: scale(1, 1); -webkit-transition: all 0.4s ease-in-out; } ul { padding-inline-start: 0; list-style-type: none; } .panel { width: 100%; position: relative; margin-bottom: 0px; background-color: rgba(0,0,0,.0); box-shadow: 0 1px 1px rgba(0,0,0,.0); } .pink button { outline: none; opacity: .9; line-height: 20px; font-size: 13px; min-height: 38px; width: 90%; word-break: break-all; margin: 4px; } .pink button:hover { box-shadow: 0px 0px 4px #BABECC; -o-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } .pink .panel { max-width: 960px; text-align: center; position: relative; margin: auto; } .table { margin-bottom: 0px !important; } .social-icons { width: 100%; padding: 0; list-style: none; } .social-icons li { display: inline-block; position: relative; font-size: 34px; margin: 0px 1.6%; opacity: .9; } .social-icons i { color: #fff; position: absolute; top: 19px; left: 20px; transition: all 265ms ease-out; } .social-icons a { display: inline-block; } .social-icons a:before { width: 70px; height: 70px; } @media screen and (max-width: 768px) { label.mt10{ margin-top: 10px; } .social-icons a:before { width: 56px; height: 56px; } .social-icons li { font-size: 26px; margin: 0px 1.2%; } .social-icons i { top: 17px; left: 17px; } .fa-odnoklassniki{ left: 19px !important; } .fa-vk{ left: 13px !important; } } .social-icons a:hover:before { transform: scale(0); transition: all 265ms ease-in; opacity: .4; } @media screen and (min-width: 768px) { .fa-odnoklassniki{ left: 23px !important; } .fa-vk{ left: 16px !important; } } / .modal-header .c/ .modal-header .close { width: auto; margin: auto; } .modal-open { padding-right: 0px !important; } .modal-open .modal { padding-right: 0px !important; } .modal { padding-right: 0px !important; } .dropify-wrapper { height: 320px; box-shadow: inset 0px 0px 4px 0px rgba(20, 28, 40, 0.4) } .colorpicker-element .add-on i, .colorpicker-element .input-group-addon i { height: 36px; width: 120px; box-shadow: 0px 1px 8px 2px rgba(20, 28, 40, 0.12); border-radius: 6px; border-bottom: 4px solid rgba(0, 0, 0, 0.2); } .form-control{ height: 0px; padding: 0px; } .note-form-control { height: auto; } .input-group-addon { padding: 0px 0px; border: none; } .input-group { display: block; } .colorpicker:before { visibility: hidden; } .dropify-wrapper.touch-fallback .dropify-clear { margin-bottom: -4px; margin-right: auto; } @media (min-width: 768px){ .modal-dialog { width: 680px; } } .collapse { display: none; margin: 0px -15px; } .colorpicker-saturation { width: 150px; height: 150px; } .colorpicker-alpha, .colorpicker-hue { width: 25px; height: 150px; } .colorpicker-color { height: 0px; } .colorpicker-color div { height: 0px; } div, p { text-shadow: 0px 0px 8px rgba(240,240,240, .8); } .form-group { margin-bottom: 0px; } .panel input, .panel textarea { text-align: center; } .panel-body input { border: 0; outline: 0; font-size: 16px; border-radius: 320px; padding: 16px; background-color: #EBECF0; text-shadow: 1px 1px 0 #FFF; } .panel-body input{ border: 0; outline: 0; font-size: 16px; border-radius: 4px; padding: 16px; background-color: #FAFAFA; text-shadow: 1px 1px 0 #FFF; } .panel-body textarea { border: 0; outline: 0; font-size: 16px; border-radius: 6px; padding: 10px; background-color: #EBECF0; text-shadow: 1px 1px 0 #FFF; } .accordion-child textarea, .accordion-child input { font-size: 14px; } .panel-body input, .panel-body textarea { margin-right: 8px; box-shadow: inset 2px 2px 6px #AFB3C0, inset -5px -5px 8px rgba(250,250,250, .6); width: 100%; box-sizing: border-box; transition: all 0.2s ease-in-out; appearance: none; -webkit-appearance: none; border: 1px solid rgba(100,100,100, .4); } .panel-body input:focus, .panel-body textarea:focus { box-shadow: inset 1px 1px 3px #BABECC, inset -1px -1px 2px #FFF; background-color: #FFFFFF; border: 1px inset #808080FF; } .colorpicker:after { top: -7px; left: calc(100% - 14px); display: none; } /llax > use { / .parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } } svg:not(:root) { margin-bottom: -6px; } .note-editor.note-frame.fullscreen { z-index: 2600; } .note-editor.note-frame .note-editing-area .note-codable { top: 0%; } .note-toolbar-wrapper.panel-default{ height: auto !important; } .dropdown-menu { z-index: 2501; } .checkbox-label:before, .checkbox-label:after{ box-sizing:border-box; margin:0; padding:0; /ransition:.2/ -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out; outline:none; font-family:Helvetica Neue,helvetica,arial,verdana,sans-serif; } #toggles{ width: 60px; margin: 0px auto; text-align:center; } .ios-toggle,.ios-toggle:active{ position:absolute; top:-5000px; height:0; width:0; opacity:0; border:none; outline:none; } .checkbox-label{ display:block; position:relative; margin-top: 14px; font-size: 12px; line-height: 16px; width: 100%; height: 12px; /border-radius:1/ -webkit-border-radius:18px; -moz-border-radius:18px; border-radius:18px; background:#f8f8f8; cursor:pointer; } .checkbox-label:before{ content:''; display:block; position:absolute; z-index:1; line-height:34px; text-indent:40px; height:26px; width:26px; border-radius:100%; top: -8px; left:0px; right:auto; background:white; box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd; } .checkbox-label:after{ content:attr(data-off); display:block; position:absolute; z-index: 0; top: -2px; left: -300px; padding: 0px 10px; height: 100%; width: 300px; text-align:right; color:#bfbfbf; white-space:nowrap; } .ios-toggle:checked + .checkbox-label{ box-shadow:inset 0 0 0 20px #8BC34A,0 0 0 2px #8BC34A; } .ios-toggle:checked + .checkbox-label:before{ left:calc(100% - 24px); box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3); } .ios-toggle:checked + .checkbox-label:after{ content:attr(data-on); left:60px; width:36px; top: -2px; } #checkbox1 + .checkbox-label{ box-shadow:inset 0 0 0 0px #8BC34A,0 0 0 2px #dddddd; } #checkbox1:checked + .checkbox-label{ box-shadow:inset 0 0 0 18px #8BC34A,0 0 0 2px #8BC34A; } #checkbox1:checked + .checkbox-label:after{ color:#8BC34A; } .panel label{ text-align: center; width: 100% } .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .cf { zoom: 1; } *:first-child+html .cf { zoom: 1; } .small { color: #666; font-size: 0.875em; } .large { font-size: 1.25em; } /*osition: relativ/ .dd { position: relative; display: block; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 20px; } .dd-list { position: relative; margin: 0; padding: 0; list-style: none; width:100%; } .dd-list .dd-list { padding-left: 30px; } .dd-collapsed .dd-list { display: none; } .dd-item, .dd-empty, .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; } .dd-handle { display: block; height: 100%; margin: 10px 0; color: #333; text-decoration: none; font-weight: bold; box-sizing: border-box; -moz-box-sizing: border-box; } .dd-handle:hover { color: #2ea8e5; } .dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; } .dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; } .dd-item > button[data-action="collapse"]:before { content: '-'; } .dd-placeholder, .dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; } .dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5; background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-size: 60px 60px; background-position: 0 0, 30px 30px; } .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; } .dd-dragel > .dd-item .dd-handle { margin-top: 0; } .dd-dragel .dd-handle { -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1); box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1); } /*stable-lists { display:/ .nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; } #nestable-menu { padding: 0; margin: 20px 0; } #nestable-output, #nestable2-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; } #nestable2 .dd-handle { color: #fff; border: 1px solid #999; background: #bbb; background: -webkit-linear-gradient(top, #bbb 0%, #999 100%); background: -moz-linear-gradient(top, #bbb 0%, #999 100%); background: linear-gradient(top, #bbb 0%, #999 100%); } #nestable2 .dd-handle:hover { background: #bbb; } #nestable2 .dd-item > button:before { color: #fff; } @media only screen and (min-width: 700px) { / }*/ .dd + .dd { margin-left: 2%;/ .dd + .dd { margin-left: 2%; } } .dd-hover > .dd-handle { background: #2ea8e5 !important; } .dd-dragel > .dd3-item > .conten { margin: 0; } .dd3-item > button { margin-left: 30px; } .dd3-handle { position: absolute; margin: 0; left: calc(100% - 2px); cursor: pointer; width: 24px; height: 100%; font-size: 20px; white-space: nowrap; overflow: hidden; border: none; opacity: .8; } .dd3-handle:hover { opacity: 1; color: var(--profile-card-shadow); } .dd3-handle:before { display: block; position: absolute; left: calc(50% - 10px); top: calc(50% - 10px); width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 18px; font-weight: normal; } .dd3-handle:hover > { opacity: 1; border-top: 1px solid rgba(0,0,0, .1); border-right: 1px solid rgba(0,0,0, .1); border-bottom: 1px solid rgba(0,0,0, .1); } @media screen and (max-width: 740px){ .createtext button{ min-width: auto !!important; margin-bottom: 2px; }} optgroup { font-weight: 200; font-size: 12px; } option { font-size: 15px; } select.selectpicker { width: 100%; padding: 6px 10px; margin: 5px 0px; } .linea-icon { top: calc(50% - 10px); } span.btn-text { white-space: pre-wrap; } input:disabled{ opacity: .4 !important; } .ss img { width: 19%; object-fit: cover; height: 100px; } .accordion-child b { font-size: 14px; } .btn-success.del{ background: #808080FF; border: solid 1px #404040FF; opacity: 0.9; } .menu { position: fixed; z-index: 1; max-width: 680px; top: calc(100% - 60px); border-radius: 0px; width: 100%; height: 60px; left: 50%; margin-right: -50%; transform: translate(-50%, 0%); } .menu button { border-radius: 0px !important; padding: 8px !important; width: calc(50% - 24px) !important; margin: 11px !important; } .conten{ width: 100%; display: block; } .ymaps-2-1-76-map { width: 100% !important; box-shadow: 0px 0px 5px #AFB3C0, 0px 0px 1px 0px #999; } .ymaps-2-1-76-copyright__llink, .ymaps-2-1-76-copyright_xt { display: none; } footer { height: 26px; } .table .table-bordered{ width: 99.5%; } .wrapper.fixed:before { background-attachment: fixed; } .youtube-player { position: relative; padding-bottom: 55%; height: 0; overflow: hidden; max-width: 100%; background: #000; } .youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .youtube-player img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; } .youtube-player img:hover { -webkit-filter: brightness(75%); } .youtube-player .play, .youtube .play{ height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("//i.imgur.com/TxzC70f.png") no-repeat; cursor: pointer; } /ube { position: relative; padding-bottom: 55%; height: 0; overflow: hidden; max-width: 100%; background: #000; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .youtube img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; } .youtube img:hover { -webkit-filter: brightness(75%); } ol { margin-left: 14px; } .timeline { position: relative; width: 100%; padding: 40px 10px; } .timeline_bar { position: absolute; top: 0; left: 50%; width: 6px; height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .timeline_bar:before, .timeline__bbar:after { position: absolute; left: 50%; display: block; width: 12px; height: 12px; content: ''; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; } .timeline_em { position: relative; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; margin-bottom: 20px; } .timeline__eleelem:last-child { margin-bottom: 0; } @media (min-width: 900px) { .timeline_ { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; } } @media (min-width: 900px) { .timeline__elem-elem--right { -webkit-box-pack: end; justify-content: flex-end; } } .timeline_ position: relative; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 50px; height: 50px; margin: auto; color: #fff; background-repeat: no-repeat; border-radius: 50%; border: 3px solid #fff; } @media (min-width: 900px) { .timeline__date { date { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .timeline_ { font-size: 1.1rem; font-weight: 600; } .timeline__date-montdate-month { font-size: .85rem; } .timeline_osition: relative; width: 100%; margin: 10px auto 0; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 1px rgba(0, 0, 0, 0.12), 0 0px 4px 0 rgba(0, 0, 0, 0.18); background-color: #fff; } @media (min-width: 560px) { .timeline__event { wievent { width: 65%; } } @media (min-width: 900px) { .timeline_th: calc((100% - 50px - 8px * 4) / 2); margin: 0; } } .timeline__event:before event:before { position: absolute; top: 50%; display: none; width: 0; height: 0; content: ''; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .timeline_ position: absolute; top: 50%; display: none; width: 16px; height: 16px; content: ''; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } @media (min-width: 900px) { .timeline__event:before, .event:before, .timeline_isplay: block; } } .timeline__event--left:beforevent--left:before { right: -8px; border-left: 8px solid #fff; } .timeline_{ right: -7px; box-shadow: 2px -1px 1px 0 rgba(0, 0, 0, 0.08); } .timeline__event--right:beforeevent--right:before { left: -8px; border-right: 8px solid #fff; } .timeline_ left: -7px; box-shadow: -2px 2px 1px 0 rgba(0, 0, 0, 0.08); } .timeline__event-date-time { paevent-date-time { padding: 20px 15px 0; display: -webkit-box; display: flex; margin-bottom: 15px; font-size: .8rem; color: rgba(44, 44, 44, 0.7); } .timeline_ight: 10px; } .timeline__event-title { padding:event-title { padding: 0 15px; margin-bottom: 10px; font-size: 1.25rem; font-weight: 600; } .timeline_0 10px 10px; font-size: .9rem; line-height: 1rem; } .timeline__event-descr p { margin-bevent-descr p { margin-bottom: 10px; } .timeline_ margin-bottom: 0; } .timeline__event-actions { padding: 2event-actions { padding: 20px 15px; border-top: 1px solid rgba(160, 160, 160, 0.2); } .timeline_sition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; transition-delay: 0s; margin-right: 24px; font-size: .9rem; text-transform: uppercase; } .timeline__event-action:hover { opacityevent-action:hover { opacity: .4; } </style> <div class="wrapper fixed"> <div class="js-profile-card"> <!--------------------------------— ПРОФИЛЬ (Аватар, заголовок, описание) ----------------------------------> <div class="profile" style="background: rgba(255, 255, 255, 0.96); box-shadow: 0px 6px 20px 8px rgba(20, 28, 40, 0.6);"> <div class="profile-card_web.info/site/id/66.jpg?nocache=1604493728" alt="profile card"> </div> <div class="profile-card_cnt js-profile-cnt cnt" style="padding-right: 0px;"> <div class="profile-card_name mast__ttext js-spanize"> ОЛЕСЯ БЕССАРАБОВА </div> <div class="profile-card_t" style="text-align: initial;"><strong></strong></div> </div> <div style="margin-top: -23%;"> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 120 28" preserveAspectRatio="none" shape-rendering="auto" style="border-radius: 12px;"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(5,5,5,0.04)" /> <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(5,5,5,0.03)" /> <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(5,5,5,0.02)" /> <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(5,5,5,0.01)" /> </g> </svg> </div> </div> <div class="js-profile-card"> <div class="profile"> <div class="profile-card__cnt js-profile-cnt blur" style="padding: 12px 7px; padding-bottom: 16px;"> <div class="dd" id="nestable"> <table class="dd-list"> <tr id="parent"> <tr class="dd-item dd3-item"> <td class="conten"> <style type="text/css"> .pink484 button { font-weight: 600; font-size: 20px; color: #ffffff; border-color: #6c44fcpx; box-shadow: inset 0 0px 6px #000000; background: linear-gradient(83deg, #6c44fc, #ff003c); border-radius: 14px; padding: 4px 8px; opacity: .9; } .pink484 button:hover { color: #ffffff; background: linear-gradient(83deg, #6c44fc, #ff003c); opacity: 1; box-shadow: inset 0 0px 6px #000000; } .pink484 button:before, .pink484 button:after { border-color: #6c44fc; } .pink484 button:hover:before, .pink484 button:hover:after { border-color: #6c44fc; } </style> <div class="profile-card-ctr"> <div class="panel pink pink484"> <button onclick="window.open('../i.php?i=TELEGRAM&id=66&sos=https://t.me/bessarabova'); return false">TELEGRAM</button> </div></div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <style type="text/css"> .pink610 button { font-weight: 600; font-size: 24px; color: #ffffff; border-color: #ff2937px; box-shadow: inset 0 0px 6px #000000; background: linear-gradient(45deg, #ff2937, #8000ff); border-radius: 20px; padding: 4px 8px; opacity: .9; } .pink610 button:hover { color: #ffffff; background: linear-gradient(45deg, #ff2937, #8000ff); opacity: 1; box-shadow: inset 0 0px 6px #000000; } .pink610 button:before, .pink610 button:after { border-color: #e844fd; } .pink610 button:hover:before, .pink610 button:hover:after { border-color: #e844fd; } </style> <div class="profile-card-ctr"> <div class="panel pink pink610"> <button onclick="window.open('../i.php?i=WhatsApp&id=66&sos=https://wapp.click/79624010846'); return false">WhatsApp</button> </div></div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <style type="text/css"> .pink611 button { font-weight: 600; font-size: 20px; color: #ffffff; border-color: #6c44fcpx; box-shadow: inset 0 0px 6px #000000; background: linear-gradient(45deg, #6c44fc, #ff003c); border-radius: 20px; padding: 4px 8px; opacity: .9; } .pink611 button:hover { color: #ffffff; background: linear-gradient(45deg, #6c44fc, #ff003c); opacity: 1; box-shadow: inset 0 0px 6px #000000; } .pink611 button:before, .pink611 button:after { border-color: #e844fd; } .pink611 button:hover:before, .pink611 button:hover:after { border-color: #e844fd; } </style> <div class="profile-card-ctr"> <div class="panel pink pink611"> <button onclick="window.open('../i.php?i=VIBER&id=66&sos=https://viber.click/799624010846'); return false">VIBER</button> </div></div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <style type="text/css"> .social-icons482 a:before { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); content: " "; border-radius: 100%; display: block; background: linear-gradient(137deg, #6c44fc 0%, #ff003c 100%); box-shadow: inset 0px 0px 12px 0px rgba(255,255,255, .6); transition: all 265ms ease-out; } .social-icons482 a:hover i { transform: scale(2); -ms-transform: scale(2); -webkit-transform: scale(2); background: -webkit-linear-gradient(137deg, #6c44fc, #ff003c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 265ms ease-in; opacity: .94; } </style> <div class="profile-card-ctr"> <ul class="social-icons social-icons482"> <li><a href="https://www.instagram.com/avon.russia/" onclick="window.open('../i.php?i=Инстаграм&id=66&sos=https://www.instagram.com/avon.russia/'); return false"><i class="fa fa-instagram"></i></a></li> <li><a href="https://vk.com/bessarabova_olesya" onclick="window.open('../i.php?i=ВКонтакте&id=66&sos=https://vk.com/bessarabova_olesya'); return false"><i class="fa fa-vk"></i></a></li> <li><a href="https://ok.ru/o.bessarabova" onclick="window.open('../i.php?i=Одноклассники&id=66&sos=https://ok.ru/o.bessarabova'); return false"><i class="fa fa-odnoklassniki"></i></a></li> <li><a href="https://twitter.com/AVON_SK" onclick="window.open('../i.php?i=Твиттер&id=66&sos=https://twitter.com/AVON_SK'); return false"><i class="fa fa-twitter"></i></a></li> </ul> </div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <div class="profile-card-ctr"> <img style="max-width: 100%; height: auto; max-height: 50px; opacity: .79; margin: 0px 0px;" src="/page/img/separator/16.png" > </div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <style type="text/css"> .pink566 button { font-weight: 600; font-size: 20px; color: #ffffff; border-color: #5144fdpx; box-shadow: inset 0 0px 9px #000000; background: linear-gradient(45deg, #5144fd, #fd449e); border-radius: 20px; padding: 4px 8px; opacity: .9; } .pink566 button:hover { color: #ffffff; background: linear-gradient(45deg, #5144fd, #fd449e); opacity: 1; box-shadow: inset 0 0px 9px #000000; } .pink566 button:before, .pink566 button:after { border-color: #6e0bd0; } .pink566 button:hover:before, .pink566 button:hover:after { border-color: #6e0bd0; } </style> <div class="profile-card-ctr"> <div class="panel pink pink566"> <button onclick="window.open('../i.php?i=СМОТРЕТЬ КАТАЛОГ&id=66&sos=https://viewer.ipaper.io/AVON-EE/RUSSIA/#/'); return false">СМОТРЕТЬ КАТАЛОГ</button> </div></div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <div class="profile-card-ctr" style="margin: 0 -7px;"> <div class="mainvideoi574"> <div class="youtube-player" data-id="hfF0cS9mgec"></div> </div> <style type="text/css"> .mainvideoi574 { width: 90%; margin: 0px auto; } </style> </div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <ul class="accordion"> <li class="accordion-item"> <input id="s663" class="hide" type="checkbox"> <label for="s663"class="accordion-label">Я хочу покупать только для себя, так можно?</label> <p class="accordion-child">Да, конечно! Получив компьютерный номер Avon, вы пользуетесь им как дисконтом, покупая продукцию напрямую от компании.</p> </li> <li class="accordion-item"> <input id="s763" class="hide" type="checkbox"> <label for="s763" class="accordion-label">Есть ли в компании доставка на дом?</label> <p class="accordion-child">Да, мы доставляем заказ на дом или на работу. Курьерскую доставку можно выбрать при заказе.</p> </li> <li class="accordion-item"> <input id="s863" class="hide" type="checkbox"> <label for="s863" class="accordion-label">Я хочу попробовать себя в качестве Бизнес партнера Avon, что для этого нужно?</label> <p class="accordion-child">Возраст более 18, комплект документов ( паспорт, Инн, Снилс, реквизиты счета в любом банке, договор с Avon), желание зарабатывать, свободное время:)</p> </li> </ul> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <div class="profile-card-ctr"> <img style="max-width: 100%; height: auto; max-height: 40px; opacity: .79; margin: 0px 0px;" src="/page/img/separator/16.png" > </div> </td> </tr> <style type="text/css"> .timeline_bar { background-image: -webkit-gradient(linear, left top, left bottom, from(#ffce79), to(#9b74ff)); background-image: linear-gradient(#ffce79, #9b74ff); } .timeline_bar:before { top: -1px; background-color: #ffce79; } .timeline__bbar:after { bottom: -1px; background-color: #9b74ff; } </style> <tr class="dd-item dd3-item" style="padding: 1px 0px;"> <td class="conten"> <div class="content"> <div class="content_ner"> <div class="timeline"> <div class="timeline__barbar"></div> <div class="timeline_ timeline__elem-elem--left"> <div class="timeline_<span class="timeline__date-dadate-day">1</span></div> <div class="timeline_ <h4 class="timeline__event-titevent-title">Купить продукцию</h4> <div class="timeline_r"> <p>Грамотная консультация поможет Вам сделать правильный выбор!</p> </div> </div> </div> <div class="timeline__elem timelielem timeline_> <div class="timeline__date"><span cdate"><span class="timeline_pan></div> <div class="timeline__event"> <h4 clevent"> <h4 class="timeline_ть постоянным клиентом</h4> <div class="timeline__event-descr"> <pevent-descr"> <p>Получать приятные сюрпризы в каждом заказе от меня лично:)</p> </div> </div> </div> <div class="timeline_m--left"> <div elem--left"> <div class="timeline_imeline__date-day">3</span></ddate-day">3</span></div> <div class="timeline_meline__event-title">Стать Предevent-title">Стать Представителем</h4> <div class="timeline_ть скидки и подарки от компании AVON</p> </div> </div> </div> <div class="timeline_elem timeline_elem--righelem timeline_"timeline__date"><span class="timelinedate"><span class="timeline_iv class="timeline_event"> <h4 class="timelineevent"> <h4 class="timeline_нером</h4> <div class="timeline__event-descr"> <p>Стабильно зарevent-descr"> <p>Стабильно зарабатывать, получая комиссионное вознаграждение каждые 3 недели!</p> </div> </div> </div> <div class="timeline_v class="timelinelem--left"> <div class="timeline_day">5</span></div> <div clasdate-day">5</span></div> <div class="timeline_title">Стать Руководителем Центevent-title">Стать Руководителем Центра AVON</h4> <div class="timeline_нтров, нам требуются ИП, для создания и руководства новыми Центрами по всей России!</p> </div> </div> </div> </div> </div> </div> </td> </tr> <script type="text/javascript"> const DOM = { timelineDate: document.querySelectorAll('.timeline__date'), timelineElem: document.querySedate'), timelineElem: document.querySelectorAll('.timeline_ctor('.timeline_bar') }; const _getDir = timelineElem =>bar') }; const _em.classList.contains('timeline__elem--left')) { return 'left'; } else if elem--left')) { return 'left'; } else if (timelineElem.classList.contains('timeline_st setDirEvent = () => { DOM.timelineElem.forEach(elem => { const direction = __getDir(elem); const timelineEvent = elem.quegetDir(elem); const timelineEvent = elem.querySelector('.timeline_e_event--${direction}`); }); }; const _getBGImevent--${direction}`); }); }; const _tedStyle(DOM.timelineBar); return compStyle.backgroundImage; }; const _getBGSizeheight = () => { const timebarHeight =getBGSizeneBar.offsetHeight; return timebarHeight; }; const _getBGPosy = dateElem => { const timelinebarBox = getBGPosneBar.getBoundingClientRect(); const dateBox = dateElem.getBoundingClientRect(); const posy = dateBox.top - timelinebarBox.top; return posy; y = dateBox.top - timelinebarBox.top; return posGImage(); const bgHeight = _getBGSizeheight(); getBGImage(); const bgHeight = _ elem.styleheight(); DOM.timelineDate.forEach(elem => { elem.style.backgroundImage = bgImg; elem.style.backgroundSize = 100% ${bgHeight}px; const dateOffset = _ateOffset}px`; }); }; window.addEventListener('load', () => { setDirEvent(); setDateBG(); }); </script> <tr class="dd-item dd3-item"> <td class="conten"> <div class="gallery js-flickity mt-20"> <div class="gallery-cell blurred"><img src="https://avatars.mds.yandex.net/get-pdb/2797211/f4780a5b-9604-4787-a1d8-3a6efbe14918/s1200" class="lazyload" /></div> <div class="gallery-cell"><img data-src="https://avatars.mds.yandex.net/get-pdb/2049822/040cd31f-7e97-404f-89b6-ae00a3e3483c/s1200" class="lazyload" /></div> <div class="gallery-cell"><img data-src="https://avatars.mds.yandex.net/get-pdb/1581201/956b29a9-e3e5-471c-8a44-4d50d62b7060/s1200" class="lazyload"/></div> <div class="gallery-cell"><img data-src="https://avatars.mds.yandex.net/get-pdb/2711790/c2bca57a-93ac-4ebf-b33d-30e56d3b71b4/s1200" class="lazyload" /></div> <div class="gallery-cell"><img data-src="https://avatars.mds.yandex.net/get-pdb/2796970/8f7a3872-6989-4189-84b5-e397ae36bd5a/s1200" class="lazyload" /></div> </div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten" data-toggle="modal" data-target="#request"> <style type="text/css"> .profile-card_button.button { font-weight: 600; border: 1px solid; font-size: 20px; color: #ffffff; border-color: #6c44fc; box-shadow: inset 0 0px 5px #000000; background: linear-gradient(117deg, #6c44fc, #ff003c); border-radius: 20px; padding: 0px; opacity: .9; } .profile-card_button.button:hover { color: #ffffff; background: linear-gradient(117deg, #6c44fc, #ff003c); opacity: 1; box-shadow: inset 0 0px 5px #000000; } </style> <div class="profile-card-form__bbottom"> <button class="profile-card_tton button js-message-btn" style="margin: 10px 0px;"> ОСТАВИТЬ ЗАЯВКУ</button> </div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <div class="profile-card-ctr"> <img style="max-width: 100%; height: auto; max-height: 50px; opacity: .79; margin: 0px 0px;" src="/page/img/separator/16.png" > </div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <div class="profile-card-ctr" style="text-align: initial;"><p style="text-align: center; "><span style="font-family: "Arial Black";"> </span><b style="color: rgb(156, 0, 255);"><span style="font-family: "Arial Black";">Мой Центр Avon находится в Ставрополе. Вы всегда можете ознакомиться с ассортиментом продукции, получить грамотную консультацию и пробные образцы.</span></b><span style="font-family: Commando;"> </span><span style="font-family: Arial;"> </span><span style="font-family: "Arial Black";"> </span></p><strong></strong></div> </td> </tr> <tr class="dd-item dd3-item" style="padding: 10px 0px;"> <td class="conten"> <div class="profile-card-ctr"> <script src="https://api-maps.yandex.ru/2.1/?load=package.standard,package.geoObjects&lang=ru-RU&apikey=c6550703-693d-458c-8047-00aae4af2642" type="text/javascript"></script> <div id="map" style="width:100%; height:300px"></div> <script type="text/javascript"> ymaps.ready(init); function init () { var myMap = new ymaps.Map("map", { center: [45.048654,41.983124], zoom: 12 }), myGeoObject = new ymaps.GeoObject({ geometry: { type: "Point", coordinates: [45.048654,41.983124] }, properties: { iconContent: "", balloonContent: "ЦЕНТР AVON" } }, { preset: 'twirl#blackStretchyIcon', }); myMap.geoObjects .add(myGeoObject); } </script> </div> </td> </tr> <tr class="dd-item dd3-item"> <td class="conten"> <div class="profile-card-ctr"> <img style="max-width: 100%; height: auto; max-height: 50px; opacity: .79; margin: 0px 0px;" src="/page/img/separator/16.png" > </div> </td> </tr> </tr> </table> </div> </div> <div class="profile-card-message js-message"> <div class="profile-card_overlay js-message-close"></div> <form class="profile-card-form" action="#" method="POST" class="form-horizontal"> <div class="profile-card-form_container"> <textarea name="youmail" style="display: none;">[email protected]</textarea> <textarea name="name" placeholder="Ваше имя"></textarea> <textarea name="email" type="email" placeholder="Ваша почта"></textarea> <textarea name="phone" placeholder="Ваш телефон" onkeyup="this.value = this.value.replace (/[^0-9+]/, '')"></textarea> </div> <div class="profile-card-form__bbottom"> <button class="profile-card_tton button" type="submit" name="request">Отправить</button> <button class="profile-card__button button js-message-close">Закрыть</button> </div> </form> </div </div> </div> <footer style="margin-bottom:-30px;font-size: 12px;opacity: .8"><center> <p><a href="http://cardweb.info" target="_blank"> Создана на CardWeb.info</a></p> </center></footer> </div> </div> <script src="/page/js/lazysizes.min.js"></script> <script src="/page/js/flickity.pkgd.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/plugins/CSSRulePlugin.min.js"></script> <!— set --> <script src="../vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="dist/js/form-file-upload-data.js"></script> <script src="../vendors/bower_components/dropify/dist/js/dropify.min.js"></script> <script src="dist/js/form-picker-data.js"></script> <script src="../vendors/bower_components/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script> <script src="/page/js/toastr.min.js"></script> <script src="/page/js/summernote.js"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var div, n, v = document.getElementsByClassName("youtube-player"); for (n = 0; n < v.length; n++) { div = document.createElement("div"); div.setAttribute("data-id", v[n].dataset.id); div.innerHTML = labnolThumb(v[n].dataset.id); div.onclick = labnolIframe; v[n].appendChild(div); } }); function labnolThumb(id) { var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">', play = '<div class="play"></div>'; return thumb.replace("ID", id) + play; } function labnolIframe() { var iframe = document.createElement("iframe"); var embed = "https://www.youtube.com/embed/ID?autoplay=1"; iframe.setAttribute("src", embed.replace("ID", this.dataset.id)); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); this.parentNode.replaceChild(iframe, this); } (function() { var content = "<p><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzC_Ho_08G0m7PyxJOPLpPujM9UTLxvaE-5nXewscnqa3GMWjGwg' alt='Image result for summernote.js'></p><h1>Summernote</h1>"; var $sumNote = $("#ta-1") .summernote({ callbacks: { onPaste: function(e,x,d) { $sumNote.code(($($sumNote.code()).find("font").remove())); } }, dialogsInBody: true, dialogsFade: true, disableDragAndDrop: true, height: "400px", tableClassName: function() { $(this) .addClass("table table-bordered") .attr("cellpadding", 0) .attr("cellspacing", 0) .attr("border", 1) .css("borderCollapse", "collapse") .css("table-layout", "fixed") .css("width", "99.5%"); $(this) .find("td") .css("borderColor", "#ccc") .css("padding", "4px"); } }) .data("summernote"); $("#btn-get-content").on("click", function() { var y =$($sumNote.code()); console.log(y[0]);console.log(y.find("p> font")); var x = y.find("font").remove(); $("#content").text($("#ta-1").val()); }); $("#btn-get-text").on("click", function() { $("#content").html($($sumNote.code()).text()); }); $("#btn-set-content").on("click", function() { $sumNote.code(content); }); $("#btn-reset").on("click", function() { $sumNote.reset(); $("#content").empty(); }); })(); (function() { var content = "<p><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzC_Ho_08G0m7PyxJOPLpPujM9UTLxvaE-5nXewscnqa3GMWjGwg' alt='Image result for summernote.js'></p><h1>Summernote</h1>"; var $sumNote2 = $("#ta-2") .summernote({ callbacks: { onPaste: function(e,x,d) { $sumNote2.code(($($sumNote2.code()).find("font").remove())); } }, dialogsInBody: true, dialogsFade: true, disableDragAndDrop: true, height: "400px", tableClassName: function() { $(this) .addClass("table table-bordered") .attr("cellpadding", 0) .attr("cellspacing", 0) .attr("border", 1) .css("borderCollapse", "collapse") .css("table-layout", "fixed") .css("width", "99.5%"); $(this) .find("td") .css("borderColor", "#ccc") .css("padding", "4px"); } }) .data("summernote"); $("#btn-get-content").on("click", function() { var y =$($sumNote2.code()); console.log(y[0]);console.log(y.find("p> font")); var x = y.find("font").remove(); $("#content").text($("#ta-2").val()); }); $("#btn-get-text").on("click", function() { $("#content").html($($sumNote2.code()).text()); }); $("#btn-set-content").on("click", function() { $sumNote2.code(content); }); $("#btn-reset").on("click", function() { $sumNote2.reset(); $("#content").empty(); }); })(); // range var rangeSlider = function(){ var slider = $('.range-slider'), range = $('.range-slider_range'), value = $('.range-slider_value'); slider.each(function(){ value.each(function(){ var value = $(this).prev().attr('value'); $(this).html(value); }); range.on('input', function(){ $(this).next(value).html(this.value); }); }); }; rangeSlider(); // Загрузка $(window).on('load', function () { var $preloader = $('#page-preloader'), $spinner = $preloader.find('.spinner'); $spinner.fadeOut(); $preloader.delay(280).fadeOut('slow'); }); /----— Wraps letters with spans, for css animations -----/ (function ($) { var s, spanizeLetters = { settings: { letters: $('.js-spanize'), }, init: function() { s = this.settings; this.bindEvents(); }, bindEvents: function(){ s.letters.html(function (i, el) { var spanizer = $.trim(el).split(""); return '<span>' + spanizer.join('</span><span>') + '</span>'; }); }, }; spanizeLetters.init(); })(jQuery); var messageBox = document.querySelector('.js-message'); var btn = document.querySelector('.js-message-btn'); var card = document.querySelector('.js-profile-card'); var closeBtn = document.querySelectorAll('.js-message-close'); btn.addEventListener('click',function (e) { e.preventDefault(); card.classList.add('active'); }); closeBtn.forEach(function (element, index) { console.log(element); element.addEventListener('click',function (e) { e.preventDefault(); card.classList.remove('active'); }); }); </script> </body> </html>