Библиотека

Библиотека блоков

Голосовалка

Смотреть

2.1

<style>.t-popup__container {background:#000;}
.popup-footer {padding:18px 20px 18px 20px !important; z-index:99999;}
.opros1 h2 {font-size: 24px; color: #fff; line-heigh: 28px; font-family: arial; font-weight: 400; text-align: left; padding-bottom: 12px; padding-left:4px; padding-right:4px;}
#otvet1 {width: calc(100% - 20px);}
.opros1 textarea {width: calc(100% - 32px); background: #fff; color: #303C49; font-weight: 400; border: 2px solid #fff; font-family: arial; font-size: 16px; line-height: 20px; height: auto; font-weight: 400; border-radius: 4px; margin-top: 12px; margin-bottom: 6px; margin-left:4px; margin-right:4px; padding:10px;}
.opros1 textarea:active, .opros1 textarea:focus {outline:none; border: 2px solid #B3D7FF;}
.opros1 textarea:placeholder {color: AFAFAF;}
.opros1 input {display:inline-block; background: #303C49; color: #fff; font-weight: 400; border: none; font-family: arial; font-size: 16px; line-height: 20px; width: calc(50% - 22px); height: 48px; font-weight: 400; border-radius: 4px;
margin-top: 6px; margin-bottom: 6px; margin-left:4px; margin-right:4px;}
/*Юра, сможешь сделать чтоб кнопка submit была скрыта
и появлялась только когда в text-area что-то ввели?*/
.opros1 input[type=submit] {display:inline-block; background: #E50045; color: #fff; font-weight: 400; border: none; font-family: arial; font-size: 16px; line-height: 20px; width: calc(100% - 20px); height: 48px; font-weight: 400; border-radius: 4px; margin-top: 2px; margin-bottom: 6px; margin-left:4px; margin-right:4px;}
.opros1 input:active, .opros1 input:focus, .opros1 input[type=submit]:active, .opros1 input[type=submit]:focus{outline:none;}
.opros1 input:focus {background:#E50045;}
.opros1 input:hover {background:#415263;}
.opros1 input:focus:hover, .opros1 input[type=submit]:hover {background:#B10037;}
.kascl:focus {border-bottom: 2px solid #23D1AE !important;}
.kascl:hover {border-color:#BDE0F5;}
.iframekasper {width:960px; height:540px;}
@media all and (max-width:480px) {
.iframekasper {width:320px !important; height:180px !important;}
.chstream {position:relative!important; right:initial!important; width:288px; margin:32px 0px 16px 0px;}
.t-form__inputsbox {width:288px !important; display:block !important; margin-bottom:8px;}
.popup-footer {width:100%;}
}
.t-input-block span {left:0px !important; margin-bottom:8px !important;}
.tn-form__submit {display:block!important;}
.tn-form__submit button {width:288px!important; display:block;}
#epromo span {position:relative !important; top:2px !important; padding-bottom: 8px; display:block;}
.email-promo {width:288px;}
@media all and (max-width:1024px) {
.iframekasper {width:768px; height:432px;}
.t-input-block input {width:216px;}
.tn-form__submit button {width:216px;}
}
@media all and (max-width:820px) {
.iframekasper {width:640px; height:360px;}
.email-promo {width:216px;}
.t-input-block input {width:216px;}
.tn-form__submit button {width:216px;}
}
@media all and (max-width:640px) {
.popup-footer {width:100%; padding:16px 16px 16px 16px !important;}
.iframekasper {width:480px; height:270px;}
.email-promo {width:216px;}
.chstream { position:relative!important; right: initial!important; width:216px; margin:24px 0px 16px 0px;}
.tn-form__submit button {width:216px; display:inline-block;}
.t-input-block input {width:216px;}
.t-input-block span {left:0px !important; margin-bottom:8px !important;}
}</style><div id="streamcont" data-nd="facecast"><iframe class="iframekasper" src="https://facecast.net/v/0ldqiv?css=https://di.softmaster.tech/kasp/fcast_test.css" style="border:none" allow="autoplay; fullscreen" allowfullscreen></iframe></div><div class="popup-footer"> <div class="opros1"> <h2>Какой из перечисленных вариантов будет хуже?</h2> <input type="button" id="otvet1" value="Отлично"><br> <input type="button" id="otvet2" value="Хорошо"> <input type="button" id="otvet3" value="Удовлетворительно"> <input type="button" id="otvet4" value="Плохо"> <input type="button" id="otvet4" value="Очень плохо"> <form> <textarea id="comment" rows="3" placeholder="Свой вариант">

Голосовалка — результаты

Смотреть

2.2

<style>.t-popup__container {background:#000;}
.popup-footer {padding:18px 20px 18px 20px !important; z-index:99999;}
.opros1 h2 {font-size: 24px; color: #fff; line-heigh: 28px; font-family: arial; font-weight: 400; text-align: left; padding-bottom: 12px; padding-left:4px; padding-right:4px;}
.opros1 div#results1 {width: calc(100% - 20px);}
.opros1 div {display:inline-block; background: #303C49; color: #fff; font-weight: 400; border: none; font-family: arial; font-size: 16px; line-height: 20px; width: calc(50% - 22px); height: 20px; font-weight: 400; border-radius: 4px; margin-top: 6px; margin-bottom: 6px; margin-left:4px; margin-right:4px; padding:14px 0px;}
.results span {display:inline-block; position:relative; margin-left:12px; margin-right:12px;}
.results div {display:block; position:relative; height:4px; margin-left:0px; top:4px; background:#E50045; padding:0px 0px 0px 0px;}
.t-input-block span {left:0px !important; margin-bottom:8px !important;}
.tn-form__submit {display:block !important;}
.tn-form__submit button {width:288px!important; display:block;}
.opros1 input :hover {background:#AFAFAF;}
.kascl:focus {border-bottom: 2px solid #23D1AE !important;}
.kascl:hover {border-color:#BDE0F5;}
.iframe_player {width:960px; height:540px;}
#epromo span {position:relative !important; top:2px !important; padding-bottom: 8px; display:block;}
.email-promo {width:288px;}
@media all and (max-width:1024px) {
.iframe_player {width:768px; height:432px;}
.t-input-block input {width:216px;}
.tn-form__submit button {width:216px;}
}
@media all and (max-width:820px) {
.iframe_player {width:640px; height:360px;}
.email-promo {width:216px;}
.t-input-block input {width:216px;}
.tn-form__submit button {width:216px;}
}
@media all and (max-width:640px) {
.popup-footer {width:100%; padding:16px 16px 16px 16px !important;}
.iframe_player {width:480px; height:270px;}
.email-promo {width:216px;}
.chstream { position:relative !important; right: initial !important; width: 216px; margin: 24px 0px 16px 0px;}
.tn-form__submit button {width:216px; display:inline-block;}
.t-input-block input {width:216px;}
.t-input-block span {left:0px !important; margin-bottom:8px !important;}
}
@media all and (max-width:480px) {
.iframe_player {width:320px !important; height:180px !important;}
.chstream {position:relative!important; right:initial!important; width:288px; margin:32px 0px 16px 0px;}
.t-form__inputsbox {width:288px !important; display:block !important; margin-bottom:8px;}
.popup-footer {width:100%;}
}</style><div id="streamcont" data-nd="facecast"><iframe class="iframe_player" src="https://facecast.net/v/0ldqiv?css=https://di.softmaster.tech/kasp/fcast_test.css" style="border:none" allow="autoplay; fullscreen" allowfullscreen></iframe></div> <div class="popup-footer"> <div class="opros1"> <h2>Какой из перечисленных вариантов будет хуже?</h2> <div class="results" id="result1"> <span>Отлично — 25%</span><div style="width:25%"></div> </div> <div class="results" id="result2"> <span>Хорошо — 100%</span><div style="width:100%"></div> </div> <div class="results" id="result3"> <span>Удовлетворительно — 1%</span><div style="width:1%"></div> </div> <div class="results" id="result4"> <span>Плохо — 30%</span><div style="width:30%"></div> </div> <div class="results" id="result5"> <span>Очень плохо — 15%</span><div style="width:15%"></div> </div> </div> </div>