/* Theme Name: DEV Wordpress Version:5.0 Author: Wordpress */ body{font-family: 'Montserrat', sans-serif;} .n2:nth-child(2n+1){clear: left;} .n3:nth-child(3n+1){clear: left;} .n4:nth-child(4n+1){clear: left;} .n5:nth-child(5n+1){clear: left;} .n6:nth-child(6n+1){clear: left;} #comments{margin: 20px auto;} #wpd-post-rating{margin-bottom: 20px;} #wpdcom .wpd-thread-list{padding: 20px 0;} .tagged_as{font-weight: 700;padding: 6px 0;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;margin: 10px 0} .tagged_as a{ font-size: 12px; color: #666; background: #f1f1f1; margin: 3px; display: inline-block; float: none;font-weight: 500; padding: 3px 7px; border-radius: 3px;} .head.navbar-fixed-top { animation: stuckMoveDown .6s; background: #fff; box-shadow: 1px 1px 10px rgba(0,0,0,0.15); } @keyframes stuckMoveDown { 0%{transform:translateY(-100%)} 100%{transform:translateY(0)} } @keyframes stuckMoveUp { 0%{transform:translateY(100%)} 100%{transform:translateY(0)} } @keyframes stuckFadeIn { 0%{opacity:0} 100%{opacity:1} } .container{} .row10{margin: 0 -10px;} .row5{margin: 0 -5px} .row10 >div{padding: 0 10px;} .row5 >div{padding: 0 5px} .center{text-align: center;} .left{text-align: left;} .right{text-align: right;} .bold{font-weight: bold;} .uppe{text-transform: uppercase;} .flex{display: flex;align-items: center;flex-wrap: wrap;} /* 'row-reverse' Dùng cho trường hợp đảo trái phải phần tử con */ .row-reverse{flex-direction: row-reverse;} .table_cell{display: table;} .table_cell>div{display: table-cell;} .modal-content { border: none; box-shadow: none; border-radius: .5rem; position: relative; background-color: #fff; background-clip: padding-box; outline: 0;} .modal-header { background-color: #045d2d; color: #fff; padding: 15px; border-bottom: 1px solid #e5e5e5; min-height: 16.42857143px;} .modal-header .modal-title { position: relative; min-height: 44px; font-weight: 400; font-size: 18px; line-height: normal; margin: 0; line-height: 44px; color: #fff;} button.close { position: absolute; right: 15px; top: 30px; color: #fff; opacity: 1;} .btn, input[type="submit"] { display: inline-block; height: 40px; line-height: 39px; padding: 0 20px; text-align: center; white-space: nowrap; outline: none!important; cursor: pointer; border: none; font-weight: 400; border-radius: 0; letter-spacing: 0; -webkit-transition: background-color .1s ease-in; -moz-transition: background-color .1s ease-in; -ms-transition: background-color .1s ease-in; -o-transition: background-color .1s ease-in; transition: background-color .1s ease-in; -webkit-border-radius: 0; border-radius: 0;} input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="file"], input[type="number"], input[type="tel"], textarea, select { border: 1px solid #e1e1e1; padding: 7px 10px; width: 100%;margin-bottom: 10px; max-width: 100%; display: block;} .pop_box input[type=submit] { background-color: #045d2d; color: #fff;margin-bottom: 0 margin-top: 15px;} .modal-dialog{margin: 80px auto 0} *{margin:0;padding:0;line-height:1.5} a:hover,a:focus,a:visited{text-decoration:none;outline:none} a{text-decoration:none;cursor:pointer;color:#333;transition: all 300ms ease-in-out;} a:hover{} img{max-width:100%;border:none;height:auto} p.wp-caption-text{text-align:center} #content_pages{padding:25px 0} .entry_content{font-size: 16px;} .content-post hr{margin:15px 0} .content-post iframe{display:block;margin:10px auto} .content-post p{margin-bottom:15px} .content-post p img{margin:0 auto} .content-post ul,.content-post ol{margin-left:18px;margin-bottom: 15px;} .content-post strong,.content-post b,.content-post i,.content-post a{line-height: normal;} .content-post ul li{margin-bottom: 10px;} .content-post table{margin-bottom:20px} .content-post h1{font-size:28px;margin-bottom: 15px;} .content-post h2{font-size:24px;margin-bottom: 15px;} .content-post h3{font-size:20px;margin-bottom: 15px;} .content-post h4{font-size:18px;margin-bottom: 15px;} .content-post h5,.content-post h6{font-size:16px;margin-bottom: 15px;} .content-post blockquote {padding: 0 0 0 15px;border-left: 3px solid #121c4d;font-size: 16px;} .content-post a{color:#2962ff} .content-post .wp-caption.aligncenter{max-width:100%!important} .content-post .alignnone{margin:5px 20px 20px 0} .content-post .aligncenter,.content-post div.aligncenter{display:block;margin:15px auto} .content-post .alignright{float:right;margin:5px 0 20px 20px} .content-post .alignleft{float:left;margin:5px 20px 20px 0} .content-post .aligncenter{display:block;margin:5px auto} a img.alignright{float:right;margin:5px 0 20px 20px} a img.alignnone{margin:5px 20px 20px 0} a img.alignleft{float:left;margin:5px 20px 20px 0} a img.aligncenter{display:block;margin-left:auto;margin-right:auto} .wp-caption{border:none;max-width:96%;padding:0;text-align:center} .wp-caption.alignnone{margin:5px 20px 20px 0} .wp-caption.alignleft{margin:5px 20px 20px 0} .wp-caption.alignright{margin:5px 0 20px 20px} .wp-caption img{border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto} .wp-caption p.wp-caption-text{font-size:13px;line-height:17px;text-align:center;margin:0;padding:10px 5px 5px} div.wpcf7 .ajax-loader{position:absolute} .widget-tabs{padding:7px;margin-bottom:0;border:0;list-style:none;margin-left:0;margin-right:0;background-color:#33b5e5;margin-bottom:1.7rem;word-wrap:break-word} .tabs-2 li{width:50%} .nav-tabs .nav-link,.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{border:0;color:#fff} .nav-tabs .nav-item.active .nav-link,.nav>li>a:focus,.nav>li>a:hover,.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{background-color:rgba(255,255,255,0.2);color:#fff;-webkit-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;-ms-transition:all 1s;transition:all 1s;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px} .form-group{margin-bottom:20px;position:relative} .form-group input[type='email'],.form-group input[type='date'],.form-group input[type='search'],.form-group input[type='number'],.form-group input[type='text'],.form-group input[type='tel'],.form-group input[type='url'],.form-group input[type='password'],.form-group textarea,.form-group select{margin:0;outline:none;padding:10px 20px;line-height: 20px; box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);color:#9e9e9e;transition:color .3s,border .3s,background .3s,opacity .3s} .form-group select{height: 42px;} .form-group input[type='file']{width: auto;border: none;} .form-group input[type='email']:focus,.form-group input[type='date']:focus,.form-group input[type='search']:focus,.form-group input[type='number']:focus,.form-group input[type='text']:focus,.form-group input[type='tel']:focus,.form-group input[type='url']:focus,.form-group input[type='password']:focus,.form-group textarea:focus,.form-group select:focus{box-shadow:0 0 5px #ccc} .form-button input[type="submit"]{color:#fff;text-transform:uppercase;font-size:14px;height: 42px;line-height: 42px; letter-spacing: 1px;min-width: 160px; background:#000;transition:transform .3s,border .3s,background .3s,box-shadow .3s,opacity .3s,color .3s} .form-button input[type="submit"]:hover{box-shadow:inset 0 0 0 100px rgba(0,0,0,0.2)} .wpcf7-form-control-wrap{position:initial} .wpcf7 .wpcf7-not-valid-tip{position:relative;padding:5px 10px!important;line-height:1.2em;left:auto!important;border-radius:3px;background-color:#f1f1f1!important;border:0!important;color:#000;position:absolute;right:0;top:40px;z-index:99;font-size:12px;margin-bottom:5px} .wpcf7 .wpcf7-not-valid-tip:after{bottom:100%;left:30px;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-bottom-color:#f1f1f1;border-width:5px;margin-left:-10px} .wpcf7 .wpcf7-validation-errors{display:none!important} .owl-carousel .owl-dots{text-align: center;margin-top: 10px;} .owl-carousel .owl-dots > *{display: inline-block;zoom: 1;} .owl-carousel .owl-dots .owl-dot{outline: none;background: none;} .owl-carousel .owl-dots .owl-dot span {width: 10px;height: 10px;background: #ccc; border-radius: 10px;margin: 0 5px;display: block;} .owl-carousel .owl-dots .owl-dot.active span{background: #003EA5;width: 30px;} .owl-carousel .owl-nav button{position: absolute;top: 50%;transform: translateY(-50%);outline: none;background: none;} .owl-carousel .owl-nav button i{width: 36px;height: 36px;border: 1px solid #003EA5;border-radius: 50%;line-height: 34px;text-align: center;} .owl-carousel .owl-nav button span{display: block;height: 50px;line-height: 40px;font-size: 45px;width: 50px;text-align: center; border-radius: 50%; font-family: -webkit-body;} .owl-carousel .owl-nav button.owl-prev{left: -50px;} .owl-carousel .owl-nav button.owl-next{right: -50px;} .this_mb{display: none;} .widget .gallery{display: grid;grid-column-gap: 10px;grid-row-gap: 10px;} .widget .gallery br{display: none;} .widget .gallery.gallery-columns-2{grid-template-columns: repeat(2,1fr);} .widget .gallery.gallery-columns-4{grid-template-columns: repeat(4,1fr);} .widget .gallery.gallery-columns-3{grid-template-columns: repeat(3,1fr);} .widget .gallery.gallery-columns-5{grid-template-columns: repeat(5,1fr);} .widget .gallery-item{margin: 0 !important;width: 100% !important;display: flex;align-items: center;float: none;} .widget .gallery-item img{border: none !important} h1,h2,h3,h4,h5,h6{margin-top: 0;line-height: 1.5;} .img img{width: 100%;height: auto;object-fit: cover;} .columns-2{grid-template-columns: repeat(2,1fr);display: grid;grid-gap: 30px;} .columns-3{grid-template-columns: repeat(3,1fr);display: grid;grid-gap: 30px;} .columns-4{grid-template-columns: repeat(4,1fr);display: grid;grid-gap: 30px;} .columns-5{grid-template-columns: repeat(5,1fr);display: grid;grid-gap: 30px;} .columns-6{grid-template-columns: repeat(6,1fr);display: grid;grid-gap: 30px;} .box_hidden{height: 300px;overflow-y: scroll;padding-right: 10px;} .box_hidden::-webkit-scrollbar{ width: 8px;background-color: #F5F5F5;} .box_hidden::-webkit-scrollbar-thumb{border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #154589;} .box_hidden::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #F5F5F5;} .capt a,.title a,.title span,.title a{line-height: normal;} .button_home{font-size: 15px;text-transform: uppercase; line-height: 40px;padding: 0 25px;border-radius: 5px;border: 1px solid #003EA5;background: #003EA5;color: #fff;font-weight: 500;letter-spacing: 0.5px;} .button_home:hover{box-shadow: inset 0 0 0 100px rgba(0,0,0,0.2);} .block_slider{margin: 0 -15px;} .item_slider{padding: 15px;} .box_shadow{box-shadow: 1px 3px 7px 0 rgb(0 0 0 / 30%);} #back-top { position: fixed; bottom: 30px; right: 20px; z-index: 9999;text-align: center;font-weight:500;font-size: 16px;text-transform: uppercase;line-height: 30px;color: #666;} #back-top a{display: block;} #back-top .icon_up {border-radius: 50%;display: block;margin-bottom: 3px; width: 40px; height: 40px; background-image: url(images/up_ic.png) !important;background-size: 40px;background-repeat: no-repeat;background-position: center;} .supports{ position: fixed; right:20px; border-radius: 5px; width: auto; z-index: 150; bottom: 20%; padding: 10px 0;} .supports ul{list-style: none;margin: 0;} .supports ul li{margin: 5px 0;} .supports ul li:first-child{margin-bottom: 10px;} .supports ul li a{ border: none;position: relative;z-index: 99; padding: 3px; display: block; border-radius: 5px; text-align: center; font-size: 10px; line-height: 15px; color: #515151; font-weight: 700; max-width: 72.19px; max-height: 54px; text-decoration: none;} .supports ul li a .icon{width: 40px;height: 40px;border-radius:50%;display: block; background-repeat: no-repeat;background-size: 40px;margin: 0 auto;background-position: center center} .supports ul li a .icon_zalo{background-image: url(images/zalo_ic.png) !important;} .supports ul li a .icon_call{background-image: url(images/phone_ic.png) !important;} .supports ul li a .icon_mess{background-image: url(images/mess_ic.png) !important;} .supports ul li a .icon_cart{background-image: url(images/cart_ic.png) !important;} .supports_mb{display: none;} /* Header */ .header_mobile{display: none;} .header_menu ul{list-style:none;margin:0} .header_menu .menu li{position:relative} .header_menu .menu {display: flex;flex-wrap: wrap;justify-content: flex-end;} .header_menu .menu>li{display:block;margin-left: 40px;} .header_menu .menu .sub-menu{opacity:0;visibility:hidden; border-top: 2px solid #000; position:absolute;z-index:99;background:#fff;width:auto; min-width: 180px; -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%); -moz-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%); -o-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%); -ms-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%); box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);transition:all .3s} .header_menu .menu>li>a{display:block;line-height:70px; font-family: 'Oswald', sans-serif;text-transform:uppercase;letter-spacing: 2px; font-size:16px;color:#121c4d;padding: 20px 0; font-weight:bold;position: relative;} .header_menu .menu>li>a:before{position: absolute; content: ''; bottom: 35px; left: 0;height: 1px; width: 100%; opacity: 0; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left center; transform-origin: left center; background:#121c4d; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;} .header_menu .menu>li:hover>a:before,.header_menu .menu>li.current-menu-item>a:before{ opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1);} .header_menu .menu>li.menu-item-has-children>a:after{content:"\f107";font-family:"Font Awesome 5 Free";font-size:14px;position: absolute;right: 0;top: 20px; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s;} .header_menu .menu>li.menu-item-has-children>a{padding-right: 18px;} .header_menu .menu>li.menu-item-has-children:hover>a:after{ -webkit-transform: rotate( 180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate( 180deg);} .header_menu .menu>li>.sub-menu{top:calc(100% - 2px);left:0;font-size:16px;transform:scaleY(0);transform-origin:0 0} .header_menu .menu>li>.sub-menu li>.sub-menu{top:-2px;left:100%;transform:scaleX(0);transform-origin:0 0} .header_menu .menu>li>.sub-menu li>a{display:block;padding:8px 0;margin: 0 10px 0 20px;border-bottom: 1px dashed #ecf0f1;white-space: nowrap;padding-right: 20px;} .header_menu .menu>li>.sub-menu li:last-child>a{border-bottom: none;} .header_menu .menu>li>.sub-menu li.menu-item-has-children>a:after{content:"\f105";font-family:"Font Awesome 5 Free";font-size:14px;font-weight: 900;position: absolute;right: 10px;top: 50%;transform: translateY(-50%);} .header_menu .menu li:hover>.sub-menu{opacity:1;visibility:visible} .header_menu .menu>li:hover>.sub-menu{transform:scaleY(1)} .header_menu .menu>li>.sub-menu li:hover>.sub-menu{transform:scaleX(1)} /* Footer */ /* News */ .item_news{display: flex;flex-wrap: wrap;align-items: flex-start;margin-bottom: 25px;} .item_news .img{width: 35%;position: relative;overflow: hidden;padding-top: 21%;} .item_news .img img{top: 0;left: 0;position: absolute;height: 100%;transition: all .4s;} .item_news .img:hover img{transform: scale(1.1);} .item_news .info{width: 65%;padding-left: 15px;} .item_news .info .capt{font-size: 20px;font-weight: bold;} .item_news .info .meta_single{margin-bottom: 10px;} .wp-pagenavi { text-align: center; padding: 20px 0;} .wp-pagenavi a, .wp-pagenavi span { width: 38px; height: 38px;border: none; line-height: 38px; font-size: 16px; border-radius: 4px;text-align: center;display: inline-block;padding: 0 10px;margin: 0 5px;} .wp-pagenavi span.pages, .wp-pagenavi a.last, .wp-pagenavi a.first {width: auto;display: none;} .wp-pagenavi span.current, .wp-pagenavi a:hover {background: #003EA5;color: #fff; border: none;} .paginate_links{overflow:hidden;text-align:center;display:table;margin:30px auto} .paginate_links .page-numbers{width:32px;height:32px;display:inline-block;float:left;margin:0 5px;padding-top:7px;color:#c8102e;border:1px solid #c8102e;margin-bottom:5px} .paginate_links .page-numbers:hover{background:#c8102e;color:#fff} .paginate_links .page-numbers.prev,.paginate_links .page-numbers.next{background:transparent;width:auto;border:none} .paginate_links .page-numbers.prev:hover,.paginate_links .page-numbers.next:hover{text-decoration:underline;color:#007BB6} .paginate_links .page-numbers.current{background:#c8102e;color:#fff} /* Single */ .meta_single {font-size: 13px;margin-bottom: 15px;} .meta_single span:not(:last-child){margin-right: 15px;} .meta_single span i{margin-right: 4px;} .title_single{font-size: 28px;font-weight: 600;} .before_after_post{padding: 10px 0;display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;} .before_after_post .item{font-weight: 600;font-size: 16px;} .before_after_post .item i{font-size: 14px;} .before_after_post .item.it_left i{margin-right: 3px;} .before_after_post .item.it_right i{margin-left: 3px;} /* Sidebar */ .sidebar .widget:not(:last-child){margin-bottom: 30px;} .sidebar-title{font-size: 18px;font-weight: bold;text-transform: uppercase;} .sidebar-title:after{content: "";display: block;height: 2px;width: 50px;margin: 0 auto 10px 0;background: #212121;} .sidebar .single-post{padding: 15px 0 12px;border-bottom: 1px dashed #e7e7e7;position: relative;} .sidebar .single-post:last-child{border-bottom: 0;} .sidebar .single-post .img{width: 100%;position: relative;padding-top: 90%;overflow: hidden;} .sidebar .single-post .img img{height: 100%;position: absolute;top: 0;left: 0;} .sidebar .single-post .info .capt{font-size: 14px;margin-bottom: 5px;font-weight:500;} .sidebar .single-post .info .capt a{line-height: normal;overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} .sidebar .single-post .info .meta_single {color: #9a9a9a;margin-bottom: 0;} .sidebar .single-post .info .meta_single .author{font-size: 12px;margin-bottom: 2px;} .sidebar .single-post .info .meta_single span:not(:last-child){margin-right: 8px;} /* Pages */ .breadcrumbs{padding:15px 0;background:#fafafa;color: #777;} .breadcrumbs .separator{margin:0 7px;color: #ccc;} .breadcrumbs *{margin-bottom: 0;} /* Contact */ /* About */ /* Home */ .bg_section{background-size: cover;background-repeat: no-repeat;background-position: center;} .section_home{position: relative;padding: 50px 0;} @media screen and (max-width: 1024px) { /* Màn hình Ipad - ngang */ } @media(max-width:768px) { .n3:nth-child(2n+1){clear: left;} .n3:nth-child(3n+1){clear: none;} .n5:nth-child(2n+1){clear: none;} .n5:nth-child(2n+1){clear: left;} .container{width:100%;padding:0 10px;overflow:hidden} .row{margin: 0 -10px} .row>div{padding: 0 10px;} iframe{width: 100%} .fixed{position:fixed!important;z-index:1000000;width:100%;background:#fff;top:0;-webkit-box-shadow:0 2px 3px 0 rgba(0,0,0,.3);-moz-box-shadow:0 2px 7px 0 rgba(0,0,0,.1);box-shadow:0 2px 7px 0 rgba(0,0,0,.1)} .this_pc{display: none;} .this_mb{display: block;} .flex,.flex_al{display: block;} .columns-4,.columns-5,.columns-6{grid-template-columns: repeat(2,1fr);grid-gap: 15px;} .columns-3,.columns-2{grid-template-columns: repeat(1,1fr);grid-gap: 15px;} #back-top{bottom: 100px;} .supports{display: none;} .supports_mb{display: block;} .supports_mb {width: 100%;padding: 6px 0 3px;position: fixed;bottom: 0;z-index: 99;background: #fff;box-shadow: 0px -1px 10px rgba(153, 153, 153, 0.1);} .supports_mb ul{list-style: none;margin: 0;display: flex;align-items: center;justify-content: center;} .supports_mb ul li{width: 80px;font-size: 12px;color: #999;text-align: center;} .supports_mb ul li img{display: block;height: 32px;margin: 0 auto 5px;width: 32px;} .supports_mb ul li a{color: #999;position: relative;} .entry_content{font-size: 14px;} .content-post h1{font-size: 24px;} .content-post h2{font-size: 20px;} .content-post h3{font-size: 18px;} .content-post h4{font-size: 16px;} .content-post h5,.content-post h6{font-size: 14px;} .wp-pagenavi a, .wp-pagenavi span{height: 28px;line-height: 26px;} .button_home{font-size: 13px;line-height: 36px;padding: 0 15px;} .block_slider{margin: 0 -8px;} .item_slider{padding: 8px;} /* Header MB */ .header_menu .menu-items .sub-menu{background: #ffffff69 !important;} .header_mobile{display: block;} #header{display: none;} #header_mb{box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);position: relative;z-index: 99} .header_top_mb .nav_supports{display: flex;align-items: center;justify-content: space-between;padding: 8px 0;font-size: 12px;flex-wrap: wrap; border-bottom: 1px solid #d0d0d0} .header_main_mb .row_flex{padding:6px 0;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;} .header_main_mb .logo_mb{display: flex;align-items: center;justify-content: center;width: calc(100% - 80px);padding: 0 10px;} .header_main_mb .logo_mb img{max-width: 160px;max-height: 60px;} .header_main_mb .box_right{width: 40px;height: 40px;cursor: pointer;} .header_search_mb{padding: 8px 12px; border-top: 1px solid #ededed;background: #121c4d;} .header_search_mb form{position: relative;width: 100%;} .header_search_mb form .search-field{width: 100%;outline: none;padding: 0 40px 0 15px;border: none;border-radius: 3px;height: 32px;line-height: 32px;margin-bottom: 0;font-size: 13px;} .header_search_mb form button{width: 32px;height: 32px;outline: none;background: none;border: none;position: absolute;top: 0;right: 0;border-radius: 3px;} .touch_menu {width: 40px;height: 40px;display: flex;align-items: center; justify-content: center;position: relative; cursor: pointer;} .touch_menu:after, .touch_menu:before {content: ""; -moz-transition: 0.3s ease; -o-transition: 0.3s ease;-webkit-transition: 0.3s ease; transition: 0.3s ease;height: 2px; width: 24px;position: absolute;left: 8px;background: #333;} .touch_menu:before {top: 10px;} .touch_menu:after {bottom: 10px;} .touch_menu .line {width: 24px;display: block;height: 2px; background: #333;} .touch_menu.opened .line { display: none;} .touch_menu.opened:before {transform: rotate(-45deg);top: 22px;} .touch_menu.opened:after {transform: rotate(45deg);bottom: 16px;} #menu_bar_mobile { position: fixed; width: 300px;padding: 8px; height: 100%; overflow: scroll; background: #fff;box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -moz-transition: left 0.5s ease; z-index: 999; -o-transition: left 0.5s ease; -webkit-transition: left 0.5s ease; transition: left 0.5s ease; top: 0; left: -320px;} #menu_bar_mobile.opened { left: 0; } .menu_mobile {list-style: none;margin: 0;} .menu_mobile ul{list-style: none;margin: 0;display: none;} .menu_mobile>li{display: block;position: relative;border-bottom: 1px solid #3333331c;} .menu_mobile>li>a{display: block;padding: 10px;line-height: 26px; font-size: 14px;text-transform: uppercase;font-weight: 600;} .menu_mobile li>i{width: 30px;height: 30px;position: absolute;top: 10px;right: 10px;line-height: 30px;text-align: center;cursor: pointer;font-size: 16px;} .menu_mobile>li ul{padding-left: 20px;padding-bottom: 10px;} .menu_mobile>li ul>li{display: block;position: relative;} .menu_mobile>li ul>li>a{font-size: 14px;display: block;padding: 6px;line-height: 22px;} .menu_mobile>li li>i{top: 2px;font-size: 13px;} .menu_mobile>li.opened{background:#1d1d1d08;} .line_dark{width: 100%;height: 100%;position: fixed;top: 0;left: 0; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; -webkit-transition: 0.3s ease; transition: 0.3s ease;background: rgba(0,0,0,0.5);z-index: 101;opacity: 0;visibility: hidden;} .line_dark.opened{opacity: 1;visibility: visible;} /* Footer MB */ /* News MB */ .item_news .img{width: 100%;padding-top: 60%;} .item_news .info{width: 100%;padding-left: 0;padding-top: 15px;} .item_news .info .capt{font-size: 18px;} .wp-pagenavi a, .wp-pagenavi span{height: 32px;width: 32px;line-height: 30px;font-size: 13px;} /* Single MB */ /* Sidebar */ .sidebar .widget:not(:last-child){margin-bottom: 20px;} /* Pages MB */ #partners .logo-item {height: 150px !important} /* Contact MB */ /* About MB */ /* Home MB */ } @media screen and (max-width: 1023px) and (min-width: 768px) { /* Màn hình Ipad - dọc */ }
Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML
. You can also specify the stylesheet information in styles.css
tab and scripts information in scripts.js
tab and start coding.
HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.
<!DOCTYPE html>
<html>
and ends with </html>
<h1>
to <h6>
where <h1>
is the highest important heading and <h6>
is the least important sub-heading.<p>..</p>
tag.<a>
tag.
<a href="https://onecompiler.com/html">HTML online compiler</a>
<img>
tag, where src
attribute consists of image name.<button>..</button>
tag<ul>
for unordered/bullet list and <ol>
for ordered/number list, and the list items are defined in <li>
.<a href="https://onecompiler.com/html">HTML online compiler</a>
CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.
Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.
body{
padding: 25px;
}
.title {
color: #228B22;
font-family: Candara;
}
<table>
tag.<tr>
tag<th>
tag<td>
tag<caption>
tag<script>
is the tag used to write scripts in HTML<script src="script.js"></script>