question:сделайте более красивым @import url('https://fonts.googleapis.com/css?family=Material+Icons|Roboto+Condensed:300,400,700|Roboto:300,400,500,500i,700,700i,900,900i&subset=cyrillic'); article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} html{position:relative;margin-top:0;min-height:100%} img,object,iframe,audio,video,table,embed{max-width:100%} .myWinCont img{max-width:initial;} .myWinCont input.commFl { width: auto; } *{-webkit-box-sizing:border-box;box-sizing:border-box} .wysibb *,form#uf-register *:not(.customCheckbox):not(.customRadio):not(.captcha-answer),a.login-with i,ul.shop-tabs.with-clear li,ul.shop-tabs.with-clear{-webkit-box-sizing:content-box;box-sizing:content-box} body{margin:0;font-size:14px;line-height:1.5;font-family:'Roboto',serif;color:#70718e} body.tmpl_body{background-color:#f2f2f7} table{font-size:100%} .main_wrapper{min-height:calc(100vh - 200px)} img,form{border:0;margin:0} a,input,button:focus{outline:0} a{color:#fda649;text-decoration:none;-webkit-tap-highlight-color:transparent} a:hover,#header .user-btns a:hover{text-decoration:underline} .eTitle a:hover{color:#fda649} a:active,#header .user-btns a:active,.eTitle a:active{color:#fda649;text-decoration:none} #header .user-btns a,#user-box{color:#fff} #user-box{padding:50px 15px 0} .i_menu{font-size:54px;-moz-user-select:none;-khtml-user-select:none;user-select:none} h1,h2,h3,h4,h5,h6{font-weight:normal;margin:5px 0;padding:0;text-transform:uppercase;font-family:'Roboto Condensed'} h1{font-size:28px} h2{font-size:24px} h3{font-size:19px} h4{font-size:17px} h5{font-size:15px} h6{font-size:13px} ul{list-style:square} hr{clear:both;border:0;padding:10px 0 0;margin:0 0 10px} .x-scroll{overflow-x:auto} .x-scroll::-webkit-scrollbar{height:10px} .x-scroll::-webkit-scrollbar-track{border-radius:10px;background-color:rgba(0,0,0,0.14)} .x-scroll::-webkit-scrollbar-thumb{background-color:#fda649;border-radius:10px;border:1px solid #fff} .manTdSep hr{padding:5px 0 0} .wrapper:after,.wrapper:before,.uf-field:after,.uf-field:before,.head-t:before,.head-t:after,.head-r:before,.head-r:after,.inner:before,.inner:after,#casing:before,#casing:after,#header:before,#header:after{display:table;content:''} .wrapper:after,.uf-field:after,.head-t:after,.head-r:after,.inner:after,.wrapper:after,#casing:after,#header:after{clear:both} #casing input[type='submit'],#casing input[type='reset'],#casing input[type='button'],#casing button,a[role="button"]:not([class^="cke_"]){padding:8px 30px;color:#fda649;font-size:14px;border-radius:6px;border:0;background-color:transparent;border:2px solid #fda649;text-decoration:none;-webkit-transition:all .2s ease;transition:all .2s ease;width:auto!important;cursor:pointer;vertical-align:middle;text-transform:uppercase;font-weight:bold;font-family:'Roboto Condensed',sans-serif} input.button[value=" + "],input.button[value="+"]{padding:10px!important} #casing input[type='submit']:hover,#casing input[type='reset']:hover,#casing input[type='button']:hover,#casing button:hover{background:#fda649;color:#fff;-webkit-transition:all .2s ease;transition:all .2s ease} .cap-ds a[role="button"]{background:0;text-transform:uppercase;font-weight:bold;position:relative;z-index:1;color:#fff;border-radius:6px;font-size:20px;padding:15px 48px;border:2px solid #fff;transition:all .3s} .cap-ds a[role="button"]:hover{background:#fff;color:#fda649} #casing input[type='submit']:active,#casing input[type='reset']:active,#casing input[type='button']:active,#casing button:active,a[role="button"]:active,.sidebox .calMonth .calMonthLink:nth-child(odd):active{background:#fda649;color:#fff;-webkit-transition:all .2s ease;transition:all .2s ease;-webkit-box-shadow:none;box-shadow:none} #casing input[type='button'].u-comboedit{background:#fda649 url(/.s/t/1722/select_disabled_arrow.png) no-repeat;background-position:96% 50%,50% 50%;color:#fff;padding-right:35px!important} #casing input[type='button'].u-comboedit:active{background:#fda649 url(/.s/t/1722/select_disabled_arrow.png) no-repeat;background-position:96% 50%,50% 50%} .site-n a{-webkit-transition:all .15s ease-out;transition:all .15s ease-out} @supports((-webkit-appearance:none) or (-moz-appearance:none) or (appearance:none)){input[type="checkbox"]{width:16px;height:16px;background-color:transparent;border:2px solid #70718e;border-radius:2px;cursor:pointer;position:relative;margin:0 3px 4px 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;outline:0;min-width:16px;min-height:16px;box-sizing:border-box!important} input[type="checkbox"]:checked,input[type="checkbox"]:checked:hover{background-color:#fda649;border-color:#fda649} input[type="checkbox"]:checked:before{content:'';display:block;width:3px;height:9px;border:2px solid transparent;border-bottom-color:#fff;border-right-color:#fff;position:absolute;top:-3px;left:3px;-webkit-transform:rotate(43deg);-ms-transform:rotate(43deg);transform:rotate(43deg)} input[type="radio"]{display:inline-block;width:18px;min-width:18px;height:18px;padding:3px;border:2px solid #70718e;border-radius:50%;cursor:pointer;vertical-align:middle;margin:3px 3px 4px 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;position:relative;box-sizing:border-box!important} input[type="radio"]:hover,input[type="checkbox"]:hover{border:2px solid #fda649} input[type="radio"]:checked{border-color:#fda649;background:transparent} input[type="radio"]:checked:before{content:'';display:block;height:8px;width:8px;border-radius:50%;background-color:#fda649;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} input[type="checkbox"]:disabled,input[type="radio"]:disabled{cursor:default;opacity:.4;background-color:#ddd} }@supports(-ms-ime-align:auto){input[type="radio"]{-webkit-appearance:radio;width:auto;height:auto} input[type="checkbox"]{-webkit-appearance:checkbox;width:auto;height:auto;min-width:unset;min-height:unset} }.eVariant input,.eVariant label{vertical-align:middle} form#addEntForm #isontop~span.customCheckbox{display:inline-block} .ucf-option .customCheckbox,div.i_search,div.i_person,.nav-head,#shop-basket ul li a:before,.slide,.eBlock+br,#allEntries .eTitle:after,.module_search .eTitle:after,.module_stuff .eTitle+hr,.ed-sep,a.mcReloadBtn img,a.mcSmilesBtn img,a.mcBBcodesBtn img,a.mcManageBtn img,.module_tests .eTitle:after,table.uTable+hr,#addEntForm input[type='hidden']+br{display:none} .module_search form table td:first-child,.sidebox li.uWithSubmenu,.sidebox li.parent-li,.slide{position:relative} .customCheckbox:hover{border-color:#fda649} input[type="checkbox"]:checked+span.customCheckbox{background-color:#fda649;border-color:#fda649} input[type="checkbox"]:checked+span.customCheckbox:after{content:'';display:block;width:3px;height:9px;border:2px solid transparent;border-bottom-color:#fff;border-right-color:#fff;position:absolute;top:-3px;left:3px;-webkit-transform:rotate(43deg);transform:rotate(43deg)} input[type="checkbox"]:disabled+span.customCheckbox{opacity:.6;cursor:default} input[type="checkbox"]:disabled+span.customCheckbox:hover{border-color:#aaa} .clr{clear:both} .uf-with-tooltip:hover .uf-tooltip,.uf-wtt-hovered .uf-tooltip{z-index:9} .material-icons,b.shop-itempage-price *{vertical-align:middle} .wrapper{margin:0 auto;max-width:1230px;width:100%} #header{padding:10px 0 0} .head-l{float:left;width:55%;padding:15px 0 15px 30px} .head-r{float:right;width:45%;padding:0 0 15px 30px;text-align:right} .site-n{word-wrap:break-word;-ms-word-break:break-word;word-break:break-word;display:inline-block;vertical-align:middle} .site-n,.site-n a{color:#fff;font-family:"Roboto Condensed";font-size:20px;font-weight:700;line-height:1.33;text-transform:uppercase;letter-spacing:2px} .site-n a:hover{text-decoration:none} #sch-box{padding:20px 0;display:inline-block;width:100%;max-width:310px;vertical-align:middle;margin:0 5px} .head-r .user-btns{display:inline-block;vertical-align:middle;text-align:center;width:33%;margin:0 5px} .searchForm .search-box{position:relative;overflow:hidden;background:#fff;text-decoration:none} .searchForm .queryField{width:100%;border:1px solid #dadada;background-color:#fff;padding:5px 15px;margin:0;height:36px;line-height:30px;border-radius:5px;color:#212121;-webkit-transition:all .2s ease-in;transition:all .2s ease-in} .searchForm .queryField:focus,.searchForm .queryField:active{border:1px solid #fda649;-webkit-transition:all .2s ease-in;transition:all .2s ease-in} .searchForm{-webkit-box-shadow:0 0 0 rgba(0,0,0,0.15);box-shadow:0 0 0 rgba(0,0,0,0.15);-webkit-transition:all .2s ease-in;transition:all .2s ease-in;border-radius:5px;position:relative} #casing input.searchSbmFl[type='submit'],.searchForm .searchSbmFl{position:absolute;right:0;top:0;cursor:pointer;padding:0;margin:0;width:42px!important;height:36px;border:0;border-radius:0 3px 3px 0;white-space:nowrap;text-indent:150%;overflow:hidden;background:#fda649 url(/.s/t/1722/sch.png) 50% no-repeat!important} .module_search #content form table td input.queryField{width:100%!important;margin:auto} #casing .searchForm input.searchSbmFl[type='submit']:hover,.searchForm .searchSbmFl:hover,#casing .searchForm input.searchSbmFl[type='submit']:active,.searchForm .searchSbmFl:active{background:#fda649 url(/.s/t/1722/sch.png) 50% no-repeat!important} .caption{position:absolute;left:50%;top:45%;width:70%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff;text-align:center;z-index:15} .cap-ttl{padding:20px 20px 30px;text-transform:uppercase;font-family:'Roboto',sans-serif;font-size:115px;font-weight:900;line-height:1em;overflow:visible;margin:0 0 12px 0} .cap-ttl a{color:#fff} .cap-ds{padding:0 20px;font-size:22px;font-family:'Roboto Condensed',sans-serif;font-weight:300;letter-spacing:.2em;text-transform:uppercase;line-height:1.2em} a.mouse-scroll{border:1px solid #fff;-webkit-transition:none;transition:none;text-align:inherit;margin:0;padding:0;width:32px;height:48px;border-radius:50px;display:block;position:absolute;bottom:40px;z-index:9;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)} .mouse-scroll:after{content:'';width:4px;height:8px;position:absolute;left:50%;top:7px;border-radius:4px;background-color:#fff;margin-left:-2px;opacity:1;transform:translateY(0px) scaleY(1) scaleX(1) translateZ(0px);-webkit-transform:translateY(0px) scaleY(1) scaleX(1) translateZ(0px);animation:1.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s normal none infinite running scrollAnimation;-webkit-animation:1.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s normal none infinite scrollAnimation} @keyframes scrollAnimation{0%,20%{-webkit-transform:translateY(0px) scaleY(1) scaleX(1) translateZ(0px);transform:translateY(0px) scaleY(1) scaleX(1) translateZ(0px)} 10%{opacity:1;-webkit-transform:translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px);transform:translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px)} 100%{opacity:.01;-webkit-transform:translateY(16px) scaleY(2.5) scaleX(0.5) translateZ(0px);transform:translateY(16px) scaleY(2.5) scaleX(0.5) translateZ(0px)} }@-webkit-keyframes scrollAnimation{0%,20%{-webkit-transform:translateY(0px) scaleY(1) scaleX(1) translateZ(0px)} 10%{opacity:1;-webkit-transform:translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px)} 100%{opacity:.01;-webkit-transform:translateY(16px) scaleY(2.5) scaleX(0.5) translateZ(0px)} }.promo-wrap{position:relative;max-height:100vh;height:100vh;background-image:linear-gradient(-266deg,#fccb38 0,#fccb38 1%,#ff4d75 100%);overflow:hidden} .parallax-wrap{background:url("/.s/t/1722/svg/like.svg") no-repeat,url("/.s/t/1722/svg/settings.svg") no-repeat,url("/.s/t/1722/svg/phone-call.svg") no-repeat;background-position:12% 12%,50% 70%,80% 10%;background-size:40px,40px,50px;position:absolute;top:0;bottom:0;left:0;right:0;z-index:9;opacity:.4} .second-parallax-wrap{background:url("/.s/t/1722/svg/pie-chart.svg") no-repeat,url("/.s/t/1722/svg/envelope.svg") no-repeat,url("/.s/t/1722/svg/share.svg") no-repeat;background-position:8% 70%,21% 38%,54% 19%;background-size:60px,50px,45px;position:absolute;top:0;bottom:0;left:0;right:0;z-index:9;opacity:.7;-webkit-filter:blur(2px);filter:blur(2px)} .third-parallax-wrap{background:url("/.s/t/1722/svg/avatar.svg") no-repeat,url("/.s/t/1722/svg/upload.svg") no-repeat,url("/.s/t/1722/svg/pie-chart.svg") no-repeat;background-position:5% 90%,75% 75%,90% 29%;background-size:30px,25px,38px;position:absolute;top:0;bottom:0;left:0;right:0;z-index:9;opacity:.7} .fourth-parallax-wrap{background:url("/.s/t/1722/svg/chat.svg") no-repeat,url("/.s/t/1722/svg/settings.svg") no-repeat,url("/.s/t/1722/svg/envelope.svg") no-repeat;background-position:95% 90%,35% 5%,85% 50%;background-size:30px,25px,27px;position:absolute;top:0;bottom:0;left:0;right:0;z-index:9} .uf-reg-wrap h2{border-bottom:2px solid #fda649;font-size:37px;padding-bottom:10px;margin-bottom:10px} label#uf-terms-label{white-space:pre-wrap} #header nav,.sidetitle{position:relative;width:100%} .sitePage1 header{position:absolute;z-index:999;width:100%;background:transparent} header{background-image:linear-gradient(-266deg,#fccb38 0,#fccb38 1%,#ff4d75 100%)} .nav-head{padding:0 20px 0 5px;margin-left:10px;color:#fff;cursor:pointer;vertical-align:middle} .nav-head a{color:#fff;text-decoration:none;vertical-align:middle} #sidebar{float:right;width:28%;padding-top:30px;padding-right:30px} .sidebox{margin:30px 0;position:relative;-webkit-box-shadow:0 10px 20px rgba(217,213,230,0.5);box-shadow:0 10px 20px rgba(217,213,230,0.5);border-radius:7px;background-color:#fafaff} .no_avatar.material-icons{width:70px;height:70px;line-height:70px;background-color:rgba(209,206,219,0.82);border-radius:6px;color:#fff;font-size:32px;margin-bottom:10px} #casing #content input.loginField{margin:7px 0;display:block} form[id^="frmLg"]>div{width:320px!important} .sidetitle{padding:20px 15px;background:#fff;border-radius:7px 7px 0 0;color:#70718e;font-family:"Roboto Condensed";font-size:20px;line-height:1.14;text-transform:uppercase;text-align:center;letter-spacing:1.4px} .sidebox .inner{padding:25px 20px 50px} .sidebox ul,.sidebox .catsTable{margin:0;padding:0;list-style:none} .sidebox .catsTable,.sidebox .catsTable *{display:block;width:auto!important} .sidebox li{list-style:none;padding:0} .sidebox li a,.sidebox .catsTable a{display:inline-block;padding:10px 0 0} .sidebox li b{font-weight:normal} .sidebox li a:active,.sidebox .catsTable a:active{text-decoration:none} .sidebox .catsTable .catDescr{color:#727272;font-size:13px} .sidebox .catNumData{color:#212121;display:inline-block} .sidebox .calTable{width:100%;position:relative} .sidebox .calTable a.calMonthLink{font-size:16px} .sidebox .calTable tbody tr:before{content:''} .sidebox .calTable tbody tr:nth-child(2):after{-webkit-transform:translateY(33px);transform:translateY(33px)} .sidebox .calTable tbody tr:nth-child(2) td{padding-bottom:13px;font-size:16px;font-weight:500} .calTable td{text-align:center;padding:7px 2px} .calMonth,.calWday,.calWdaySe,.calWdaySu{font-size:13px} .sidebox .calTable tbody tr:nth-child(2){border-top:1px solid #dadada;border-bottom:1px solid #dadada} body:not(.tmpl_body) div[class^="cBlock"] .cMessage{padding-bottom:5px!important;line-height:16px} body:not(.tmpl_body) div[class^="cBlock"] a{font-size:16px;padding-right:10px!important} body:not(.tmpl_body) div[class^="cBlock"] a b{font-weight:400} .noEntry,.archiveNoEntry{padding:40px 0;text-align:center} .sidebox .calMonth{line-height:32px} .sidebox td.calMonth a{position:absolute;-webkit-transition:all .3s;transition:all .3s;border-radius:7px} .sidebox .calMonth .calMonthLink:nth-child(odd):hover{background-color:#fda649;border-radius:7px} .sidebox .calMonth .calMonthLink:nth-child(odd):hover:after{color:#fff} .sidebox td.calMonth a:first-child,.sidebox td.calMonth>a:first-child+a+a{display:block;text-align:center;line-height:20px;top:2px;right:10px} .sidebox td.calMonth a:first-child{right:55px} .sidebox td.calMonth a:first-child+a{font-size:14px;left:10px;top:0;display:inline-block;height:40px;line-height:40px} .sidebox .calMonth .calMonthLink:first-child,.sidebox .calMonth .calMonthLink:last-child{font-weight:normal;text-transform:none;padding:8px;line-height:1;font-size:0} .sidebox .calMonth .calMonthLink:first-child:after,.sidebox .calMonth .calMonthLink:last-child:after{display:inline-block;font-size:20px;font-family:'Material Icons';color:#70718e;-webkit-font-feature-settings:'liga' 1;font-feature-settings:'liga' 1;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased} a.swchItem:first-child span:after,a.swchItem:last-child span:after,.pgPrev span:after,.pgNext span:after{display:inline-block;font-size:20px;font-family:'Material Icons';color:#fff;-webkit-font-feature-settings:'liga' 1;font-feature-settings:'liga' 1;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased} .popupbody a.swchItem:last-child span:after,.popupbody a.swchItem:first-child span:after{font-size:17px} a.swchItem:first-child span:after,.sidebox .calMonth .calMonthLink:first-child:after,.pgPrev span:after{content:'keyboard_arrow_left'} a.swchItem:last-child span:after{content:'keyboard_arrow_right'} .pgNext span:after,.sidebox .calMonth .calMonthLink:last-child:after{content:'keyboard_arrow_right'} .calMdayLink,.calMdayA{font-weight:bold;text-decoration:none!important;position:relative} .sidebox ul ul{display:none;margin:0;padding:0 0 0 30px} .sidebox li.uWithSubmenu.over>ul,.sidebox li.parent-li.over>ul,.schQuery,.schBtn{display:block} .sidebox .answer{padding-top:5px} .sidebox .answer>div{background-color:#dadada;padding-top:0!important;margin-top:3px} .sidebox ul.rate-list{margin:0} #shop-basket ul li a{padding:0;margin:0} .user-box{text-align:center} .user-box img{margin:0 0 10px;width:70px;height:70px;-o-object-fit:cover;object-fit:cover;border-radius:50%} .user-ttl{padding:0 0 5px} #content{float:left;width:72%;padding:30px 30px 60px} #content .eBlock{-webkit-box-shadow:0 10px 20px rgba(217,213,230,0.5);box-shadow:0 10px 20px rgba(217,213,230,0.5);border-radius:7px;background-color:#fff;padding:30px 30px 0} #content fieldset{border:1px solid #dadada;padding:20px;margin:0 0 20px} #content .calTable{width:100%;margin:0 0 30px} #content .calTable tr:nth-child(2){background:#d4cfec} .calMdayIsA{display:block;width:100%;color:#fff;padding:7px 2px;-webkit-box-shadow:0 5px 10px rgba(217,213,230,0.5);box-shadow:0 5px 10px rgba(217,213,230,0.5);border-radius:7px;background-color:#fda649} .calMdayIsA a{color:#fff} .calMdayIs:hover,.calMdayIsA:hover{padding:0} .calMdayIs:hover .calMdayLink,.calMdayIsA:hover .calMdayLink{display:block;width:100%;color:#fff;padding:7px 2px;-webkit-box-shadow:0 5px 10px rgba(217,213,230,0.5);box-shadow:0 5px 10px rgba(217,213,230,0.5);border-radius:7px;background-color:#fda649} #content.wide-page{float:none;width:100%} #casing label{cursor:pointer;vertical-align:middle} .archActive{padding-top:10px} .eBlock{border-spacing:0;margin:0 0 30px;clear:both;table-layout:fixed} #content section>.eBlock{margin-top:10px} .eBlock+table,.vep-comments>table{margin:40px 0 0;border-spacing:0} #content .vcp-ratestars,.shop-item-brief{padding:5px 0} .eBlock+table td[width="60%"],.vep-comments table td[width="60%"],.v-channel-page+div+table td[width="60%"],.shop-info table td[width="60%"]{font-size:18px;padding:0 0 20px} .eBlock td{margin:0 -30px} .eTitle{color:#70718e;font-family:"Roboto Condensed";font-size:28px;font-weight:400;line-height:1.2;text-transform:uppercase;letter-spacing:1.4px} .module_tests .eTitle{font-size:25px} #allEntries .eTitle{font-size:25px} span[class^="sortBlock"]{line-height:42px} .eTitle a{color:#70718e;font-family:"Roboto Condensed";font-size:28px;line-height:1.2;text-transform:uppercase;letter-spacing:1.4px;text-decoration:none} .eTitle div[style^="float:right"] a{font-size:inherit} .u-star-rating-32+div{padding:10px 0} .u-current-rating,table.gTable .posttdMessage img{max-width:100%} #videocontent_comm,.vcp-details{color:#727272;font-size:12px} .eDetails,.eDetails1,.eDetails2{clear:both;font-size:14px;padding:13px 0!important;color:#727272;line-height:120%} .eDetails ul,.eDetails1 ul,.eDetails2 ul{line-height:normal} .eDetails{border-radius:0 0 7px 7px;padding:20px 0!important} #casing:not(.module_stuff) div[id^="entryID"] .eDetails{background-color:#fafaff;padding:20px 30px!important;margin:20px -33px -3px} .e-reads,.e-loads,.e-author,.e-date,.e-rating,.e-add,.e-tags,.e-category,.e-comments{margin:0 15px 0 0;display:inline-block;height:15px;line-height:20px} .eAnswer+div{padding:13px 0} .eBlock td.eMessage,.eBlock td.eText{padding:10px 0 20px!important} .e-reads,.e-loads,.e-author,.e-date,.e-rating,.e-add,.e-tags,.e-author-phone,.e-placed,.e-redirects,.e-category,.e-comments{position:relative;text-transform:uppercase;font-family:"Roboto Condensed";font-size:12px;letter-spacing:.91px;padding:0 0 0 20px;margin:0 20px 0 0;display:inline-block} .e-reads:before,.e-author-phone:before,.e-tags:before,.e-author:before,.e-category:before,.e-placed:before,.e-comments:before,.e-loads:before,.e-date:before,.e-add:before,.e-redirects:before{color:#70718e;font-family:"Material Icons";font-size:16px;font-weight:400;position:absolute;display:inline-block;font-feature-settings:'liga' 1;-webkit-font-feature-settings:liga;font-feature-settings:liga;ms-font-feature-settings:liga} .e-redirects::before{content:'E157';top:0;left:0} .e-reads::before{content:'E417';top:0;left:0} .e-category::before{content:'E2C8';top:-2px;left:0} .e-author-phone::before{content:'E0CD';top:-2px;left:-1px} .e-tags::before{content:'E893';top:-2px;left:0} .e-rating::before{content:'';background:url(/.s/t/1722/rating.png) no-repeat 0 2px;display:inline-block;width:16px;height:18px;position:absolute;left:0} .e-author::before{content:'E8A6';top:-1px;left:-3px} .e-add::before{content:'E7FD';top:-1px;left:-3px} .e-date::before,.e-placed::before{content:'E916';top:-2px;left:-2px} .e-loads::before{content:'E157';top:0;left:0} .e-comments::before{content:'E0CB';top:0;left:0}

question:измени каркас и подключи js react добавь современного всякого через html css импользуя картинки из инрнета

question:а мой код там не написан <html id="root"> <head> <meta charset="utf-8"> <title>[TITLE]</title> <link rel="stylesheet" href="/.s/src/css/1705.css" type="text/css" media="all" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <script type="text/javascript"> var browser = navigator.userAgent; var browserRegex = /(Android|BlackBerry|IEMobile|Nokia|iP(ad|hone|od)|Opera M(obi|ini))/; var isMobile = false; if(browser.match(browserRegex)) { isMobile = true; addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } } var currentPageIdTemplate = 'PAGE_ID'; var currentModuleTemplate = 'MODULE_ID'; var navTitle = 'Navigation'; </script> </head> <body> <!-- <header> --> <header> <div id="header"> <div class="wrapper"> <div id="site-logo"><span class="site-l"><span class="site-n"><a href="HOME_PAGE_LINK">SITE_NAME</a></span></span></div> <nav> <div id="catmenu"> <!-- <sblock_nmenu> -->CONTENT<!-- </sblock_nmenu> --> <div class="clr"></div> </div> </nav> <div class="clr"></div> </div> </div> </header> <!-- </header> --> <!-- <global_promo> --> <?if(URI_ID='page1')?> <div id="promo"> <div class="promo-wrapper"> <div class="promo-i"> <div class="promo-cap"> <div class="promo-ttl">Lorem ipsum dolor sit amet</div> <div class="promo-ds">Aliquam cursus tellus at nunc</div> <div class="promo-sds">Mauris commodo ante massa, eget feugiat mi dignissim nec</div> </div> </div> </div> </div> <?endif?> <!-- </global_promo> --> <div id="casing"> <div class="wrapper"> <?if(MODULE_ID='forum')?><div class="forum-box"><?endif?> <!-- <middle> --> <div id="content" <?if(HIDE_CLEFTER)?>class="wide-page"<?endif?>> <section class="module-MODULE_ID">[BODY]</section> </div> <?if(!HIDE_CLEFTER)?> <aside> <div id="sidebar"> <div class="sidebox"> <div class="inner"> <div style="text-align:center;"><?if(USERS_ON)?><?if(USER_LOGGED_IN)?><span>Hello, <a href="PERSONAL_PAGE_LINK"><b>USERNAME</b></a>!</span><?else?><span>Hello, <b>USERNAME</b>!</span><?endif?><br><?endif?> <?if(USERS_ON)?><?if(USER_LOGGED_IN)?><a title="Profile page" href="PERSONAL_PAGE_LINK">Profile page</a> | <a title="Log out" href="LOGOUT_LINK">Log out</a><?else?><a title="Register now" href="REGISTER_LINK">Register now</a> | <a title="Log in" href="LOGIN_LINK">Log in</a><?endif?><?endif?></div> </div> <div class="clr"></div> </div> <!-- <container> --><!-- <block> --> <div class="sidebox"><div class="sidetitle"><span>TITLE</span></div> <div class="inner"> CONTENT </div> <div class="clr"></div> </div> <!-- </block> --><!-- </container> --> </div> </aside> <?endif?> <!-- </middle> --> <div class="clr"></div> <?if(MODULE_ID='forum')?></div><?endif?> </div> </div> <!-- <footer> --> <footer> <div id="footer"> <div class="wrapper"> <div class="foot-l"> [COPYRIGHT]. POWERED_BY </div> <div class="foot-r"> <div id="soc-box"> <span><a href="https://twitter.com/" class="soc-tw" target="_blank"></a></span> <span><a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a></span> <span><a href="https://vimeo.com/" class="soc-vi" target="_blank"></a></span> <span><a href="http://vk.com/" class="soc-vk" target="_blank"></a></span> </div> </div> <div class="clr"></div> </div> </div> </footer> <!-- </footer> --> <script type="text/javascript" src="/.s/t/1705/ui.js"></script> <!-- <popup> --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <div id="casing" class="popuptable"> <div class="popuptitle"><div><span>[TITLE]</span></div></div><div class="popupbody">[BODY]</div> </div> <!-- </popup> --> </body> </html> <!-- <config> --> { "rstars_b_image" : "/.s/t/1705/brating.png", "rstars_b_size" : "32", "rstars_s_image" : "/.s/t/1705/rating.png", "rstars_s_size" : "16" } <!-- </config> -->

question:теперь измени дизайн и добавь 10 разных эффектов, и напиши код моего с реактом <html id="root"> <head> <meta charset="utf-8"> <title>[TITLE]</title> <link rel="stylesheet" href="/.s/src/css/1705.css" type="text/css" media="all" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <script type="text/javascript"> var browser = navigator.userAgent; var browserRegex = /(Android|BlackBerry|IEMobile|Nokia|iP(ad|hone|od)|Opera M(obi|ini))/; var isMobile = false; if(browser.match(browserRegex)) { isMobile = true; addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } } var currentPageIdTemplate = 'PAGE_ID'; var currentModuleTemplate = 'MODULE_ID'; var navTitle = 'Navigation'; </script> </head> <body> <!-- <header> --> <header> <div id="header"> <div class="wrapper"> <div id="site-logo"><span class="site-l"><span class="site-n"><a href="HOME_PAGE_LINK">SITE_NAME</a></span></span></div> <nav> <div id="catmenu"> <!-- <sblock_nmenu> -->CONTENT<!-- </sblock_nmenu> --> <div class="clr"></div> </div> </nav> <div class="clr"></div> </div> </div> </header> <!-- </header> --> <!-- <global_promo> --> <?if(URI_ID='page1')?> <div id="promo"> <div class="promo-wrapper"> <div class="promo-i"> <div class="promo-cap"> <div class="promo-ttl">Lorem ipsum dolor sit amet</div> <div class="promo-ds">Aliquam cursus tellus at nunc</div> <div class="promo-sds">Mauris commodo ante massa, eget feugiat mi dignissim nec</div> </div> </div> </div> </div> <?endif?> <!-- </global_promo> --> <div id="casing"> <div class="wrapper"> <?if(MODULE_ID='forum')?><div class="forum-box"><?endif?> <!-- <middle> --> <div id="content" <?if(HIDE_CLEFTER)?>class="wide-page"<?endif?>> <section class="module-MODULE_ID">[BODY]</section> </div> <?if(!HIDE_CLEFTER)?> <aside> <div id="sidebar"> <div class="sidebox"> <div class="inner"> <div style="text-align:center;"><?if(USERS_ON)?><?if(USER_LOGGED_IN)?><span>Hello, <a href="PERSONAL_PAGE_LINK"><b>USERNAME</b></a>!</span><?else?><span>Hello, <b>USERNAME</b>!</span><?endif?><br><?endif?> <?if(USERS_ON)?><?if(USER_LOGGED_IN)?><a title="Profile page" href="PERSONAL_PAGE_LINK">Profile page</a> | <a title="Log out" href="LOGOUT_LINK">Log out</a><?else?><a title="Register now" href="REGISTER_LINK">Register now</a> | <a title="Log in" href="LOGIN_LINK">Log in</a><?endif?><?endif?></div> </div> <div class="clr"></div> </div> <!-- <container> --><!-- <block> --> <div class="sidebox"><div class="sidetitle"><span>TITLE</span></div> <div class="inner"> CONTENT </div> <div class="clr"></div> </div> <!-- </block> --><!-- </container> --> </div> </aside> <?endif?> <!-- </middle> --> <div class="clr"></div> <?if(MODULE_ID='forum')?></div><?endif?> </div> </div> <!-- <footer> --> <footer> <div id="footer"> <div class="wrapper"> <div class="foot-l"> [COPYRIGHT]. POWERED_BY </div> <div class="foot-r"> <div id="soc-box"> <span><a href="https://twitter.com/" class="soc-tw" target="_blank"></a></span> <span><a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a></span> <span><a href="https://vimeo.com/" class="soc-vi" target="_blank"></a></span> <span><a href="http://vk.com/" class="soc-vk" target="_blank"></a></span> </div> </div> <div class="clr"></div> </div> </div> </footer> <!-- </footer> --> <script type="text/javascript" src="/.s/t/1705/ui.js"></script> <!-- <popup> --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <div id="casing" class="popuptable"> <div class="popuptitle"><div><span>[TITLE]</span></div></div><div class="popupbody">[BODY]</div> </div> <!-- </popup> --> </body> </html> <!-- <config> --> { "rstars_b_image" : "/.s/t/1705/brating.png", "rstars_b_size" : "32", "rstars_s_image" : "/.s/t/1705/rating.png", "rstars_s_size" : "16" } <!-- </config> -->