We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.

CSS inline make Volt template error

Hi pro,

I want to css inline but error. I think the special characters are the cause of the error {{ {%

Please help me.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>@font-face{font-family:'Open Sans';font-style:italic;font-weight:300;src:local('Open Sans Light Italic'),local('OpenSans-LightItalic'),url(https://fonts.gstatic.com/s/opensans/v15/PRmiXeptR36kaC0GEAetxrfB31yxOzP-czbf6AAKCVo.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local('Open Sans Italic'),local('OpenSans-Italic'),url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBp0EAVxt0G0biEntp43Qt6E.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:600;src:local('Open Sans SemiBold Italic'),local('OpenSans-SemiBoldItalic'),url(https://fonts.gstatic.com/s/opensans/v15/PRmiXeptR36kaC0GEAetxi8cqLH4MEiSE0ROcU-qHOA.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:700;src:local('Open Sans Bold Italic'),local('OpenSans-BoldItalic'),url(https://fonts.gstatic.com/s/opensans/v15/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:800;src:local('Open Sans ExtraBold Italic'),local('OpenSans-ExtraBoldItalic'),url(https://fonts.gstatic.com/s/opensans/v15/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local('Open Sans Light'),local('OpenSans-Light'),url(https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans SemiBold'),local('OpenSans-SemiBold'),url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSonF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(https://fonts.gstatic.com/s/opensans/v15/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:800;src:local('Open Sans ExtraBold'),local('OpenSans-ExtraBold'),url(https://fonts.gstatic.com/s/opensans/v15/EInbV5DfGHOiMmvb1Xr-honF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}header,main,nav,section{display:block}a{background-color:transparent}strong{font-weight:700}h1{margin:.67em 0;font-size:2em}img{border:0}button{margin:0;font:inherit;color:inherit}button{overflow:visible}button{text-transform:none}button{-webkit-appearance:button}button::-moz-focus-inner{padding:0;border:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}h1,h2,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h2,h3{margin-top:20px;margin-bottom:10px}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}p{margin:0 0 10px}.text-center{text-align:center}ul{margin-top:0;margin-bottom:10px}ul ul{margin-bottom:0}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-6,.col-md-6,.col-sm-10,.col-xs-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-12{float:left}.col-xs-12{width:100%}@media (min-width:768px){.col-sm-10{float:left}.col-sm-10{width:83.33333333%}.col-sm-offset-1{margin-left:8.33333333%}}@media (min-width:992px){.col-md-6{float:left}.col-md-6{width:50%}}@media (min-width:1200px){.col-lg-6{float:left}.col-lg-6{width:50%}.col-lg-offset-3{margin-left:25%}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;background-image:none;border:1px solid transparent;border-radius:4px}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.collapse{display:none}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}@media (min-width:768px){.navbar-right{float:right!important;margin-right:-15px}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse{border-color:#e7e7e7}.container-fluid:after,.container-fluid:before,.container:after,.container:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.row:after,.row:before{display:table;content:" "}.container-fluid:after,.container:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}@-ms-viewport{width:device-width}@media (max-width:767px){.hidden-xs{display:none!important}}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@font-face{font-family:'FontAwesome';src:url(../fonts/fontawesome-webfont.eot?v=4.7.0);src:url(../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'),url(../fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2'),url(../fonts/fontawesome-webfont.woff?v=4.7.0) format('woff'),url(../fonts/fontawesome-webfont.ttf?v=4.7.0) format('truetype'),url(../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format('svg');font-weight:400;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-home:before{content:"\f015"}.fa-book:before{content:"\f02d"}.fa-video-camera:before{content:"\f03d"}.fa-shopping-cart:before{content:"\f07a"}.fa-hand-o-right:before{content:"\f0a4"}.fa-caret-right:before{content:"\f0da"}.fa-envelope:before{content:"\f0e0"}.fa-life-ring:before{content:"\f1cd"}.fa-newspaper-o:before{content:"\f1ea"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@charset "UTF-8";.features-list img{vertical-align:top;max-width:100%;height:auto;width:100%}.features-list,.tick-list{margin:0;padding:0;list-style:none}#header:after,#header .holder:after{content:'';display:block;clear:both}img{max-width:100%;height:auto}div.aligncenter{margin:0 auto 1.2em}@font-face{font-family:empty;src:url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAQ0AAoAAAAAA+wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAJ4AAACeXQ48j09TLzIAAAGUAAAAYAAAAGAIIgbWY21hcAAAAfQAAABEAAAARAAyAGlnYXNwAAACOAAAAAgAAAAIAAAAEGhlYWQAAAJAAAAANgAAADb9mzB5aGhlYQAAAngAAAAkAAAAJAHiAeVobXR4AAACnAAAABAAAAAQAAAAAG1heHAAAAKsAAAABgAAAAYABFAAbmFtZQAAArQAAAFdAAABXVqZXRlwb3N0AAAEFAAAACAAAAAgAAMAAAEABAQAAQEBDHNwYWNlLWVtcHR5AAECAAEAOvgcAvgbA/gYBB4KABlT/4uLHgoAGVP/i4sMB4tr+JT4dAUdAAAAfA8dAAAAgREdAAAACR0AAACVEgAFAQEMFxkbHnNwYWNlLWVtcHR5c3BhY2UtZW1wdHl1MHUxdTIwAAACAYkAAgAEAQEEBwoN/JQO/JQO/JQO/JQO+JQU+JQViwwKAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAABAAAAAIAHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADAAAAAIAAgAAgAAAAEAIP/9//8AAAAAACD//f//AAH/4wADAAEAAAAAAAAAAAABAAH//wAPAAEAAAABAAAAeR2GXw889QALAgAAAAAAzz54vgAAAADPPni+AAAAAAAAAAAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAABQAAAEAAAAAAAOAK4AAQAAAAAAAQAWAAAAAQAAAAAAAgAOAGMAAQAAAAAAAwAWACwAAQAAAAAABAAWAHEAAQAAAAAABQAWABYAAQAAAAAABgALAEIAAQAAAAAACgAoAIcAAwABBAkAAQAWAAAAAwABBAkAAgAOAGMAAwABBAkAAwAWACwAAwABBAkABAAWAHEAAwABBAkABQAWABYAAwABBAkABgAWAE0AAwABBAkACgAoAIcAcwBwAGEAYwBlAC0AZQBtAHAAdAB5AFYAZQByAHMAaQBvAG4AIAAxAC4AMABzAHAAYQBjAGUALQBlAG0AcAB0AHlzcGFjZS1lbXB0eQBzAHAAYQBjAGUALQBlAG0AcAB0AHkAUgBlAGcAdQBsAGEAcgBzAHAAYQBjAGUALQBlAG0AcAB0AHkARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("woff")}@font-face{font-family:'icomoon';src:url(../css/fonts/icomoon.ttf?u6ufkh) format("truetype"),url(../css/fonts/icomoon.woff?u6ufkh) format("woff"),url(../css/fonts/icomoon.svg?u6ufkh#icomoon) format("svg");font-weight:400;font-style:normal}[class^="ico-"],[class*=" ico-"]{font-family:'icomoon'!important;speak:none;font-style:normal;font-weight:normal!important;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ico-menu:before{content:"\e91b"}.ico-play2:before{content:"\e91a"}body{font-weight:300;min-width:320px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}#wrapper{width:100%;overflow:hidden;position:relative}h1,h2,h3{text-transform:uppercase}h3 a{color:inherit}.bg-full{background-size:cover;background-position:center;background-repeat:no-repeat}.pad-top-lg{padding-top:60px!important}.mar-bottom-sm{margin-bottom:30px!important}.mar-bottom-md{margin-bottom:40px!important}.pad-bottom-sm{padding-bottom:0!important}.mar-bottom-lg{margin-bottom:60px!important}.btn{border-radius:0;border-width:2px;text-transform:uppercase;position:relative}.btn-info{font-weight:400;letter-spacing:1px;border-radius:99px;font-size:13px;line-height:16px;padding:13px 15px}#header{top:0;left:0;right:0;position:absolute;z-index:6;padding-top:15px;padding-bottom:11px}#header .holder{max-width:1518px}#header .icon-menu{float:right;margin:1px 0 0 26px;font-size:14px;color:#fff;padding:9px 10px;background:#222;border-radius:5px;position:relative;z-index:1}.logo{float:left;max-width:150px;min-height:35px!important}.logo .dark{display:none}.navbar-default{border:0;float:right;width:calc(100% - 150px);position:static;margin:-4px 0 0;padding:0}.navbar-default .navbar-header{float:right;margin:0 0 0 10px}.navbar-default .navbar-collapse{box-shadow:none;border:0;background:#fff;position:absolute;left:0;right:0;top:100%}.navbar-default .navbar-toggle{background:#000;margin:0}.navbar-default .navbar-nav{letter-spacing:1px;font:400 13px/17px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:capitalize}.navbar-default .navbar-nav>li{position:relative;letter-spacing:.3px}.navbar-default .navbar-nav>li>a{font:inherit;color:#222;text-align:center;position:relative;position:static}.navbar-default .navbar-nav>li>a:after{position:absolute;content:"";top:auto;bottom:0;left:0;right:0}.navbar-default .navbar-nav>li>a:after{border-bottom:1px solid #222;z-index:1;right:50.1%;left:50%}#main{width:100%;overflow:hidden;position:relative}.hero-area{overflow:visible;color:#fff;font:300 16px/30px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:56px 0 0;position:relative;z-index:1;background-size:cover;background-position:50% 50%;letter-spacing:1px}.hero-area:before{position:absolute;content:"";top:0;bottom:0;left:0;right:0}.hero-area:before{display:block;background:rgba(19,22,25,.6);z-index:-1}.hero-area h1{margin:0 0 26px;color:#fff;font:400 25px/33px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:none}.hero-area .align-holder{position:relative;z-index:2;min-height:calc(300px - 96px);white-space:nowrap;text-align:center}.hero-area .align-holder:before{content:'';display:inline-block;vertical-align:middle;width:0;min-height:inherit}.hero-area .align-holder .align,.hero-area .align-holder *{white-space:normal;display:inline-block;vertical-align:middle;max-width:99%}.hero-area .align-holder .align{text-align:left;padding:30px 0 42px}.hero-area p{margin:0 0 36px}.hero-area .video{top:0;left:0;right:0;bottom:0;position:absolute}.hero-area .tick-list{padding:0 2px;margin:0 0 30px}.hero-area .btns-wrap{padding:0 4px}.hero-area .icon-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:100%;color:#fff;font-size:22px;width:46px;height:46px}.hero-area .icon-play:before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.hero-area .btn,.hero-area .btn-info{border-radius:2px;vertical-align:middle;width:175px;margin:0 0 10px;padding:12px 10px 10px;font-size:14px;line-height:18px}.hero-area .more{font:400 14px/18px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;color:inherit;text-transform:uppercase;display:inline-block;vertical-align:middle;text-decoration:underline}.hero-area .right-col{position:relative;z-index:2}.hero-area .right-col:before{position:absolute;content:"";left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.7)}.hero-area .left-col:before{position:absolute;left:0;top:0;bottom:0;content:'';right:0;background:url(../images/bg04.jpg) no-repeat 50% 50%;background-size:cover}.heading-wrap h2{margin:0;font:20px/30px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:none}.features-area{color:#51595b}.features-area .aligncenter{overflow:hidden}.features-area .aligncenter img{width:100%}.features-list{font-size:14px;line-height:24px;font-family:empty}.features-list li{padding:0 15px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;overflow:hidden;letter-spacing:1px}.features-list h3{margin:0 0 16px;font:600 16px/20px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.features-list .icon-holder{text-align:center;width:64px;margin:0 auto 24px;text-align:center}.features-list p{margin:0}.tick-list{font-size:15px;line-height:18px;width:100%;text-transform:capitalize}.tick-list li{margin:0 0 13px;padding:0 0 0 27px;display:block!important;position:relative}.tick-list li:before{position:absolute;content:"";top:0;bottom:auto;left:0;right:auto}.tick-list li:before{content:"\e913";font-family:'icomoon'!important;speak:none;font-style:normal;font-weight:normal!important;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;top:3px}.navbar-default{background:none}.text-bright,.tick-list li:before,.hero-area .text-bright,.heading-wrap h2 .text-bright{color:#009bde}.btn-info{background-color:#009bde}.btn-info{border-color:#009bde}@charset "UTF-8";.hamburger{font:inherit;display:inline-block;overflow:visible;margin:0;padding:15px;text-transform:none;color:inherit;border:0;background-color:transparent}.hamburger-box{position:relative;display:inline-block;width:40px;height:24px}.hamburger-inner{top:50%;display:block;margin-top:-2px}.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:40px;height:4px;border-radius:4px;background-color:#000}.hamburger-inner:after,.hamburger-inner:before{display:block;content:""}.hamburger-inner:before{top:-10px}.hamburger-inner:after{bottom:-10px}.hamburger--collapse .hamburger-inner{top:auto;bottom:0}.hamburger--collapse .hamburger-inner:after{top:-20px}@media (min-width:480px){.hero-area .align-holder{text-align:center}.hero-area .align-holder .align{text-align:left;width:100%;max-width:100%;padding:30px 0}}@media (min-width:640px){.features-list li{display:inline-block;vertical-align:top;width:50%}}@media (min-width:768px){.pad-top-lg{padding-top:80px!important}.mar-bottom-md{margin-bottom:60px!important}.mar-bottom-sm{margin-bottom:50px!important}.mar-bottom-lg{margin-bottom:80px!important}.pad-bottom-sm{padding-bottom:30px!important}#header .icon-menu{margin:13px 0 0 26px;padding:0;background:none}.navbar-default{padding:0;margin:0;background:transparent}.navbar-default .navbar-collapse{float:right;position:static;background:none}.navbar-default .navbar-nav{padding:10px 0 0;text-align:right}.navbar-default .navbar-nav>li{margin:0 0 0 15px;padding:0 0 20px;float:none;display:inline-block;vertical-align:middle}.navbar-default .navbar-nav>li>a{color:#fff;display:inline;padding:0}.navbar-default .navbar-nav>li>a:after{border-color:#fff}.main-nav{position:absolute;left:0;top:0;opacity:0;visible:hidden;transform:translateX(100%)}.nav-active .main-nav{opacity:1;visible:visible;transform:translateX(0)}.hero-area{padding:0}.hero-area h1{font-size:28px;line-height:35px}.hero-area p{margin:0 0 54px}.hero-area .tick-list{margin:0 0 51px}.hero-area .icon-play{width:76px;height:76px}.hero-area .btn,.hero-area .btn-info{width:215px;margin:0 31px 0 0;padding:18px 10px 16px;font-size:14px;line-height:18px}.hero-area .align-holder{text-align:left;min-height:calc(617px - 96px)}.hero-area .align-holder .align{max-width:100%;width:100%;padding:109px 65px 72px 0;text-align:left}.product-features .descr *{white-space:normal;display:inline-block;vertical-align:middle;max-width:99%}}@media (min-width:992px){.pad-top-lg{padding-top:50px!important}.mar-bottom-md{margin-bottom:60px!important}.pad-bottom-sm{padding-bottom:50px!important}.mar-bottom-lg{margin-bottom:100px!important}#header{padding-top:44px}.navbar-default .navbar-nav>li{padding:0 0 20px}.hero-area{font-size:16px;line-height:30px}.hero-area h1{font-size:31px;line-height:44px}.hero-area .align-holder{min-height:667px}.hero-area .align-holder .align{max-width:100%;width:100%}.hero-area .left-col:before{right:0}.hero-area .left-col .align-holder{float:right;width:100%;max-width:578px}.heading-wrap h2{font-size:28px;line-height:38px}.features-list li{width:33.333%}.tick-list{font-size:18px;line-height:21px}}@media (min-width:1230px){.navbar-default .navbar-nav>li{margin:0 0 0 26px}.hero-area h1{font-size:36px;line-height:47px}.hero-area .align-holder{min-height:758px}.hero-area .icon-play{margin:28px 0 0 24px}}@media (max-width:991px){.features-list li{width:33.3%}}@media (max-width:767px){.features-list li{width:100%}}@charset 'UTF-8';ul.menu-child li a{font-weight:500;text-transform:uppercase;text-decoration:none}ul.menu-child{top:27px;position:absolute;list-style:none;width:200px;z-index:99999;background:#fff;margin-left:0;float:left;border-top:0;box-shadow:0 2px 4px rgba(0,0,0,.13);display:none}ul.menu-child li{padding:10px;border-bottom:1px solid #ddd}ul.menu-child li a{color:#333}li.sub-menu-parent{position:relative;margin:0 28px}.menu-child{padding:0;text-align:left}ul.menu-child li:last-child{border:none}.navbar-default .navbar-nav>li>a{display:inline;padding:0}div#page{display:none}.sub-menu-parent:after{content:'\f0d7';font-family:FontAwesome;margin-left:10px;color:#fff}@media (max-width:767px){.hamburger-box{width:38px!important}.hamburger-inner{top:22px!important}div#page{display:block;position:relative;z-index:9999}.navbar-default{display:none}nav#menu{z-index:999999999}.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{background-color:#fff;width:35px}.page-header1{position:relative;width:100%}.page-header1 .header{position:absolute;top:-40px;right:0;z-index:999}span#my-icon{background:#ddd;border-radius:5px;padding:5px}}.money-price{position:relative}.money-price img{position:absolute;animation:shake 1.5s;animation-iteration-count:infinite}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}100%{transform:translate(1px,-2px) rotate(-1deg)}}.logo .logo-wrap:before{width:50px;height:50px;top:calc(41% - 25px);left:calc(49% - 25px)}.logo-wrap:before{z-index:2;position:absolute;animation:star linear 1.75s infinite;-moz-animation:star linear 1.75s infinite;-webkit-animation:star linear 1.75s infinite;-o-animation:star linear 1.75s infinite;content:"";width:20px;height:20px;top:21px;left:21px;background:url(../images/saolaplanh.png) center no-repeat;background-size:cover}.logo{position:relative}.logo-wrap{position:absolute;left:34%;top:24px}@-webkit-keyframes star{0%{-webkit-transform:rotate(0) scale(0)}50%{-webkit-transform:rotate(180deg) scale(1.5)}100%{-webkit-transform:rotate(360deg) scale(0)}}@-o-keyframes star{0%{-o-transform:rotate(0) scale(0)}50%{-o-transform:rotate(180deg) scale(1.5)}100%{-o-transform:rotate(360deg) scale(0)}}@-moz-keyframes star{0%{-moz-transform:rotate(0) scale(0)}50%{-moz-transform:rotate(180deg) scale(1.5)}100%{-moz-transform:rotate(360deg) scale(0)}}</style>
</head>
<body class="nav-active">
    {{content()}}
</body>
</html>

what is the error?

edited Jan '18

You have two options:

a) put the CSS code into a seperate file and include it via the assets service

b) handle your stylesheet as a text literal (which would make autocomplete impossible in IDEs)

<script>{{ '@font-face{font-family: "BlaBla";}' }}</script>