Rip mẫu web mỹ phẩm bằng worpress sang LAVAREL hay .NET MVC đều dùng đc
- Rip theme .NET Cshap
-
admin
- 1 năm trước, Thứ sáu, 07 Tháng 1, 2022
- 557
- 66
Cách chôm giao diện 1 trang web mà bán muốn. Hoặc rip từ mẫu web wp không cần phải mua.
Phần 1. Tạo dữ liệu các bảng chức năng theo mẫu này
Các bảng dữ liệu: menu, product, blog,category, user,member, slider,settings,babner
Phần 2. Phân tích trang. chia bố cục 1 cột
Link: view-source:https://web206.123web.vn/+ Tách code chia bố cục layout: Phần đầu , phần giữa, phần cuối chân trang.
+ Phần đầu có menu chính, menu top, trượt ảnh
+ Phần body: load nội dung chính gồm giới thiệu, sản phẩm , tin tức , đối tác
+ Phần cuối : thông tin trang liên kết bản quyền
+ Tập hợp đổ dữ liệu ra web thông qua database
Phần đầu trang chia làm 3 block
Block giới thiệu
Block danh mục
Block sản phẩm nổi bật
Tin mới
Phần cuối trang
Phần 2. Lấy code từng phần xem tiếp bài kế nhé.
1. FILE HEADER.HTML
<!DOCTYPE html>
<!--[if IE 9 ]> <html lang="vi" class="ie9 loading-site no-js"> <![endif]-->
<!--[if IE 8 ]> <html lang="vi" class="ie8 loading-site no-js"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="vi" class="loading-site no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="https://web206.123web.vn/xmlrpc.php" />
<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
<title>WEB206 – 123web.vn</title>
<meta name='robots' content='noindex, nofollow' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /><link rel='dns-prefetch' href='//use.fontawesome.com' />
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.1\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/web206.123web.vn\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.7.4"}};
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([55357,56424,8205,55356,57212],[55357,56424,8203,55356,57212])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='wp-block-library-css' href='https://web206.123web.vn/wp-includes/css/dist/block-library/style.min.css?ver=5.7.4' type='text/css' media='all' />
<link rel='stylesheet' id='wc-block-vendors-style-css' href='https://web206.123web.vn/wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/vendors-style.css?ver=4.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='wc-block-style-css' href='https://web206.123web.vn/wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/style.css?ver=4.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css' href='https://web206.123web.vn/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.4' type='text/css' media='all' />
<link rel='stylesheet' id='twenty20-style-css' href='https://web206.123web.vn/wp-content/plugins/twenty20/assets/css/twenty20.css?ver=1.5.7' type='text/css' media='all' />
<style id='woocommerce-inline-inline-css' type='text/css'>
.woocommerce form .form-row .required { visibility: visible; }
</style>
<link rel='stylesheet' id='flatsome-icons-css' href='https://web206.123web.vn/wp-content/themes/flatsome/assets/css/fl-icons.css?ver=3.12' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-official-css' href='https://use.fontawesome.com/releases/v5.14.0/css/all.css' type='text/css' media='all' integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<link rel='stylesheet' id='flatsome-main-css' href='https://web206.123web.vn/wp-content/themes/flatsome/assets/css/flatsome.css?ver=3.13.2' type='text/css' media='all' />
<link rel='stylesheet' id='flatsome-shop-css' href='https://web206.123web.vn/wp-content/themes/flatsome/assets/css/flatsome-shop.css?ver=3.13.2' type='text/css' media='all' />
<link rel='stylesheet' id='flatsome-style-css' href='https://web206.123web.vn/wp-content/themes/web206/style.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='flatsome-googlefonts-css' href='//fonts.googleapis.com/css?family=Dancing+Script%3Aregular%2C600%7CQuicksand%3Aregular%2Cregular%2C600%7C-apple-system%2C+BlinkMacSystemFont%2C+%22Segoe+UI%22%2C+Roboto%2C+Oxygen-Sans%2C+Ubuntu%2C+Cantarell%2C+%22Helvetica+Neue%22%2C+sans-serif%3Aregular%2Cregular&display=block&ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-official-v4shim-css' href='https://use.fontawesome.com/releases/v5.14.0/css/v4-shims.css' type='text/css' media='all' integrity="sha384-9aKO2QU3KETrRCCXFbhLK16iRd15nC+OYEmpVb54jY8/CEXz/GVRsnM73wcbYw+m" crossorigin="anonymous" />
<style id='font-awesome-official-v4shim-inline-css' type='text/css'>
@font-face {
font-family: "FontAwesome";
src: url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-brands-400.eot"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-brands-400.woff2") format("woff2"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-brands-400.woff") format("woff"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-brands-400.ttf") format("truetype"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-brands-400.svg#fontawesome") format("svg");
}
@font-face {
font-family: "FontAwesome";
src: url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.eot"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.woff2") format("woff2"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.woff") format("woff"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.ttf") format("truetype"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}
@font-face {
font-family: "FontAwesome";
src: url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.eot"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.woff2") format("woff2"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.woff") format("woff"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.ttf") format("truetype"),
url("https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.svg#fontawesome") format("svg");
unicode-range: U+F004-F005,U+F007,U+F017,U+F022,U+F024,U+F02E,U+F03E,U+F044,U+F057-F059,U+F06E,U+F070,U+F075,U+F07B-F07C,U+F080,U+F086,U+F089,U+F094,U+F09D,U+F0A0,U+F0A4-F0A7,U+F0C5,U+F0C7-F0C8,U+F0E0,U+F0EB,U+F0F3,U+F0F8,U+F0FE,U+F111,U+F118-F11A,U+F11C,U+F133,U+F144,U+F146,U+F14A,U+F14D-F14E,U+F150-F152,U+F15B-F15C,U+F164-F165,U+F185-F186,U+F191-F192,U+F1AD,U+F1C1-F1C9,U+F1CD,U+F1D8,U+F1E3,U+F1EA,U+F1F6,U+F1F9,U+F20A,U+F247-F249,U+F24D,U+F254-F25B,U+F25D,U+F267,U+F271-F274,U+F279,U+F28B,U+F28D,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2BD,U+F2C1-F2C2,U+F2D0,U+F2D2,U+F2DC,U+F2ED,U+F328,U+F358-F35B,U+F3A5,U+F3D1,U+F410,U+F4AD;
}
</style>
<script type='text/javascript' src='https://web206.123web.vn/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
<script type='text/javascript' src='https://web206.123web.vn/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>
<link rel="https://api.w.org/" href="https://web206.123web.vn/wp-json/" /><link rel="alternate" type="application/json" href="https://web206.123web.vn/wp-json/wp/v2/pages/11" /><link rel="canonical" href="https://web206.123web.vn/" />
<link rel="alternate" type="application/json+oembed" href="https://web206.123web.vn/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fweb206.123web.vn%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://web206.123web.vn/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fweb206.123web.vn%2F&format=xml" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="https://web206.123web.vn/wp-content/themes/flatsome/assets/css/ie-fallback.css"><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><script>var head = document.getElementsByTagName('head')[0],style = document.createElement('style');style.type = 'text/css';style.styleSheet.cssText = ':before,:after{content:none !important';head.appendChild(style);setTimeout(function(){head.removeChild(style);}, 0);</script><script src="https://web206.123web.vn/wp-content/themes/flatsome/assets/libs/ie-flexibility.js"></script><![endif]--> <noscript><style>.woocommerce-product-gallery{ opacity: 1 !important; }</style></noscript>
<style id="custom-css" type="text/css">:root {--primary-color: #8c512d;}.full-width .ubermenu-nav, .container, .row{max-width: 1170px}.row.row-collapse{max-width: 1140px}.row.row-small{max-width: 1162.5px}.row.row-large{max-width: 1200px}.header-main{height: 68px}#logo img{max-height: 68px}#logo{width:200px;}.header-bottom{min-height: 50px}.header-top{min-height: 60px}.transparent .header-main{height: 90px}.transparent #logo img{max-height: 90px}.has-transparent + .page-title:first-of-type,.has-transparent + #main > .page-title,.has-transparent + #main > div > .page-title,.has-transparent + #main .page-header-wrapper:first-of-type .page-title{padding-top: 170px;}.header.show-on-scroll,.stuck .header-main{height:70px!important}.stuck #logo img{max-height: 70px!important}.search-form{ width: 100%;}.header-bg-color, .header-wrapper {background-color: rgba(255,255,255,0.9)}.header-bottom {background-color: #8c512d}.header-main .nav > li > a{line-height: 16px }.header-bottom-nav > li > a{line-height: 16px }@media (max-width: 549px) {.header-main{height: 70px}#logo img{max-height: 70px}}.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before{border-bottom-color: #ffffff;}.nav .nav-dropdown{border-color: #ffffff }.nav-dropdown{font-size:100%}.nav-dropdown-has-arrow li.has-dropdown:after{border-bottom-color: #ffffff;}.nav .nav-dropdown{background-color: #ffffff}.header-top{background-color:#8c512d!important;}/* Color */.accordion-title.active, .has-icon-bg .icon .icon-inner,.logo a, .primary.is-underline, .primary.is-link, .badge-outline .badge-inner, .nav-outline > li.active> a,.nav-outline >li.active > a, .cart-icon strong,[data-color='primary'], .is-outline.primary{color: #8c512d;}/* Color !important */[data-text-color="primary"]{color: #8c512d!important;}/* Background Color */[data-text-bg="primary"]{background-color: #8c512d;}/* Background */.scroll-to-bullets a,.featured-title, .label-new.menu-item > a:after, .nav-pagination > li > .current,.nav-pagination > li > span:hover,.nav-pagination > li > a:hover,.has-hover:hover .badge-outline .badge-inner,button[type="submit"], .button.wc-forward:not(.checkout):not(.checkout-button), .button.submit-button, .button.primary:not(.is-outline),.featured-table .title,.is-outline:hover, .has-icon:hover .icon-label,.nav-dropdown-bold .nav-column li > a:hover, .nav-dropdown.nav-dropdown-bold > li > a:hover, .nav-dropdown-bold.dark .nav-column li > a:hover, .nav-dropdown.nav-dropdown-bold.dark > li > a:hover, .is-outline:hover, .tagcloud a:hover,.grid-tools a, input[type='submit']:not(.is-form), .box-badge:hover .box-text, input.button.alt,.nav-box > li > a:hover,.nav-box > li.active > a,.nav-pills > li.active > a ,.current-dropdown .cart-icon strong, .cart-icon:hover strong, .nav-line-bottom > li > a:before, .nav-line-grow > li > a:before, .nav-line > li > a:before,.banner, .header-top, .slider-nav-circle .flickity-prev-next-button:hover svg, .slider-nav-circle .flickity-prev-next-button:hover .arrow, .primary.is-outline:hover, .button.primary:not(.is-outline), input[type='submit'].primary, input[type='submit'].primary, input[type='reset'].button, input[type='button'].primary, .badge-inner{background-color: #8c512d;}/* Border */.nav-vertical.nav-tabs > li.active > a,.scroll-to-bullets a.active,.nav-pagination > li > .current,.nav-pagination > li > span:hover,.nav-pagination > li > a:hover,.has-hover:hover .badge-outline .badge-inner,.accordion-title.active,.featured-table,.is-outline:hover, .tagcloud a:hover,blockquote, .has-border, .cart-icon strong:after,.cart-icon strong,.blockUI:before, .processing:before,.loading-spin, .slider-nav-circle .flickity-prev-next-button:hover svg, .slider-nav-circle .flickity-prev-next-button:hover .arrow, .primary.is-outline:hover{border-color: #8c512d}.nav-tabs > li.active > a{border-top-color: #8c512d}.widget_shopping_cart_content .blockUI.blockOverlay:before { border-left-color: #8c512d }.woocommerce-checkout-review-order .blockUI.blockOverlay:before { border-left-color: #8c512d }/* Fill */.slider .flickity-prev-next-button:hover svg,.slider .flickity-prev-next-button:hover .arrow{fill: #8c512d;}/* Background Color */[data-icon-label]:after, .secondary.is-underline:hover,.secondary.is-outline:hover,.icon-label,.button.secondary:not(.is-outline),.button.alt:not(.is-outline), .badge-inner.on-sale, .button.checkout, .single_add_to_cart_button, .current .breadcrumb-step{ background-color:#dfa26f; }[data-text-bg="secondary"]{background-color: #dfa26f;}/* Color */.secondary.is-underline,.secondary.is-link, .secondary.is-outline,.stars a.active, .star-rating:before, .woocommerce-page .star-rating:before,.star-rating span:before, .color-secondary{color: #dfa26f}/* Color !important */[data-text-color="secondary"]{color: #dfa26f!important;}/* Border */.secondary.is-outline:hover{border-color:#dfa26f}body{font-size: 100%;}@media screen and (max-width: 549px){body{font-size: 100%;}}body{font-family:"Quicksand", sans-serif}body{font-weight: 0}body{color: #8c512d}.nav > li > a {font-family:"Quicksand", sans-serif;}.mobile-sidebar-levels-2 .nav > li > ul > li > a {font-family:"Quicksand", sans-serif;}.nav > li > a {font-weight: 600;}.mobile-sidebar-levels-2 .nav > li > ul > li > a {font-weight: 600;}h1,h2,h3,h4,h5,h6,.heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a{font-family: "Dancing Script", sans-serif;}h1,h2,h3,h4,h5,h6,.heading-font,.banner h1,.banner h2{font-weight: 600;}h1,h2,h3,h4,h5,h6,.heading-font{color: #8c512d;}.breadcrumbs{text-transform: none;}button,.button{text-transform: none;}.nav > li > a, .links > li > a{text-transform: none;}.section-title span{text-transform: none;}h3.widget-title,span.widget-title{text-transform: none;}.alt-font{font-family: "-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif", sans-serif;}.alt-font{font-weight: 0!important;}.header:not(.transparent) .top-bar-nav > li > a {color: #ffffff;}.header:not(.transparent) .header-nav-main.nav > li > a {color: #8c512d;}.header:not(.transparent) .header-bottom-nav.nav > li > a{color: #f7e3ae;}a{color: #8c512d;}a:hover{color: #edca83;}.tagcloud a:hover{border-color: #edca83;background-color: #edca83;}.current .breadcrumb-step, [data-icon-label]:after, .button#place_order,.button.checkout,.checkout-button,.single_add_to_cart_button.button{background-color: #8c512d!important }.price del, .product_list_widget del, del .woocommerce-Price-amount { color: #8c512d; }ins .woocommerce-Price-amount { color: #8c512d; }@media screen and (min-width: 550px){.products .box-vertical .box-image{min-width: 300px!important;width: 300px!important;}}.absolute-footer, html{background-color: #8c512d}.label-new.menu-item > a:after{content:"New";}.label-hot.menu-item > a:after{content:"Hot";}.label-sale.menu-item > a:after{content:"Sale";}.label-popular.menu-item > a:after{content:"Popular";}</style></head>
<body class="home page-template-default page page-id-11 theme-flatsome woocommerce-no-js lightbox nav-dropdown-has-shadow nav-dropdown-has-border page-template-blank page-template-blank-php">
2. FILE BODY ĐỂ TRỐNG
<main>
@RenderBody()
</main>3. Footer
<footer id="footer" class="footer-wrapper">
<section class="section" id="section_1095360715">
<div class="bg section-bg fill bg-fill bg-loaded bg-loaded" >
</div>
<div class="section-content relative">
<div class="row" id="row-1702935408">
<div id="col-1287756528" class="col medium-4 small-12 large-4" >
<div class="col-inner" >
<p><span style="font-size: 120%;"><strong><span style="color: #8c512d;">LIÊN HỆ</span></strong></span></p>
<ul>
<li><i class="fas fa-map-marker-alt"></i> <span style="color: #8c512d;"><strong>VP đại diện</strong>: Tầng 6, Tòa Nhà Skycity, 88 Láng Hạ, Đống Đa, Hà Nội</span></li>
<li><i class="fas fa-map-marker-alt"></i> <span style="color: #8c512d;"><strong>VP làm việc</strong>: Số 68 Khúc Thừa Dụ, Cầu Giấy, Hà Nội</span></li>
<li><span style="color: #8c512d;"><strong>Hotline</strong>: 0909 123 456 - 0888 888 888</span></li>
</ul>
</div>
</div>
<div id="col-1854302476" class="col medium-4 small-12 large-4" >
<div class="col-inner" >
<div class="img has-hover x md-x lg-x y md-y lg-y" id="image_1424279493">
<div class="img-inner dark" >
<img width="598" height="414" src="https://web206.123web.vn/wp-content/uploads/2020/08/Logo-footer.jpg" class="attachment-original size-original" alt="" srcset="https://web206.123web.vn/wp-content/uploads/2020/08/Logo-footer.jpg 598w, https://web206.123web.vn/wp-content/uploads/2020/08/Logo-footer-300x208.jpg 300w, https://web206.123web.vn/wp-content/uploads/2020/08/Logo-footer-20x14.jpg 20w" sizes="(max-width: 598px) 100vw, 598px" />
</div>
<style>
#image_1424279493 {
width: 100%;
}
</style>
</div>
</div>
</div>
<div id="col-1750564474" class="col medium-4 small-12 large-4" >
<div class="col-inner" >
<p><iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fshopee.vn&tabs&width=340&height=197&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="197" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe></p>
</div>
</div>
</div>
<div class="row" id="row-1678796242">
<div id="col-871795634" class="col medium-6 small-12 large-6" >
<div class="col-inner" >
<ul class="sidebar-wrapper ul-reset"><div id="nav_menu-3" class="col pb-0 widget widget_nav_menu"><div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"><li id="menu-item-249" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-249"><a href="#">Chính sách và quy định chung</a></li>
<li id="menu-item-250" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-250"><a href="#">Chính sách thanh toán</a></li>
<li id="menu-item-251" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-251"><a href="#">Chính sách vận chuyển</a></li>
<li id="menu-item-252" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-252"><a href="#">Chính sách đổi trả, hoàn tiền</a></li>
<li id="menu-item-253" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-253"><a href="#">Chính sách bảo mật thông tin</a></li>
<li id="menu-item-254" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-254"><a href="#">Chính sách xử lý khiếu nại</a></li>
</ul></div></div></ul>
</div>
</div>
<div id="col-756456368" class="col medium-6 small-12 large-6" >
<div class="col-inner" >
<p><span style="color: #8c512d;"><strong>Công ty TNHH Mỹ Phẩm xxx.</strong></span></p>
<p><span style="color: #8c512d;">GPKD số 010783xxxx do Sở KH và ĐT TP Hà Nội cấp ngày 11/05/2017 – GĐ/Sở hữu website Nguyễn Văn A.</span></p>
<p><span style="color: #8c512d;">Địa Chỉ: Tầng 6, tòa nhà Sky City, 11 Láng Hạ, Phường Láng Hạ, Quận Đống Đa, Thành Phố Hà Nội.</span></p>
</div>
</div>
</div>
</div>
<style>
#section_1095360715 {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
</section>
<div class="absolute-footer dark medium-text-center text-center">
<div class="container clearfix">
<div class="footer-primary pull-left">
<div class="copyright-footer">
MẪU GIAO DIỆN WEB206<br>Thiết kế website bởi <a href="https://123web.vn/">123web.vn</a> </div>
</div>
</div>
</div>
</footer>
</div>
<div id="main-menu" class="mobile-sidebar no-scrollbar mfp-hide">
<div class="sidebar-menu no-scrollbar ">
<ul class="nav nav-sidebar nav-vertical nav-uppercase">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="https://web206.123web.vn/gioi-thieu/">Giới thiệu</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="https://web206.123web.vn/san-pham/">Sản phẩm</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="https://web206.123web.vn/san-uu-dai/">Săn ưu đãi</a></li>
</ul>
</div>
</div>
<div id="login-form-popup" class="lightbox-content mfp-hide">
<div class="woocommerce-notices-wrapper"></div>
<div class="account-container lightbox-inner">
<div class="account-login-inner">
<h3 class="uppercase">Đăng nhập</h3>
<form class="woocommerce-form woocommerce-form-login login" method="post">
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="username">Tên tài khoản hoặc địa chỉ email <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="" /> </p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="password">Mật khẩu <span class="required">*</span></label>
<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" />
</p>
<p class="form-row">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme">
<input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span>Ghi nhớ mật khẩu</span>
</label>
<input type="hidden" id="woocommerce-login-nonce" name="woocommerce-login-nonce" value="6772ab7c7f" /><input type="hidden" name="_wp_http_referer" value="/" /> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="Đăng nhập">Đăng nhập</button>
</p>
<p class="woocommerce-LostPassword lost_password">
<a href="https://web206.123web.vn/tai-khoan/lost-password/">Quên mật khẩu?</a>
</p>
</form>
</div>
</div>
</div>
<script type="text/javascript">
(function () {
var c = document.body.className;
c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
document.body.className = c;
})();
</script>
<script type='text/javascript' src='https://web206.123web.vn/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=7.4.4' id='wp-polyfill-js'></script>
<script type='text/javascript' id='wp-polyfill-js-after'>
( 'fetch' in window ) || document.write( '<script src="https://web206.123web.vn/wp-includes/js/dist/vendor/wp-polyfill-fetch.min.js?ver=3.0.0"></scr' + 'ipt>' );( document.contains ) || document.write( '<script src="https://web206.123web.vn/wp-includes/js/dist/vendor/wp-polyfill-node-contains.min.js?ver=3.42.0"></scr' + 'ipt>' );( window.DOMRect ) || document.write( '<script src="https://web206.123web.vn/wp-includes/js/dist/vendor/wp-polyfill-dom-rect.min.js?ver=3.42.0"></scr' + 'ipt>' );( window.URL && window.URL.prototype && window.URLSearchParams ) || document.write( '<script src="https://web206.123web.vn/wp-includes/js/dist/vendor/wp-polyfill-url.min.js?ver=3.6.4"></scr' + 'ipt>' );( window.FormData && window.FormData.prototype.keys ) || document.write( '<script src="https://web206.123web.vn/wp-includes/js/dist/vendor/wp-polyfill-formdata.min.js?ver=3.0.12"></scr' + 'ipt>' );( Element.prototype.matches && Element.prototype.closest ) || document.write( '<script src="https://web206.123web.vn/wp-includes/js/dist/vendor/wp-polyfill-element-closest.min.js?ver=2.0.2"></scr' + 'ipt>' );( 'objectFit' in document.documentElement.style ) || document.write( '<script src="https://web206.123web.vn/wp-includes/js/dist/vendor/wp-polyfill-object-fit.min.js?ver=2.3.4"></scr' + 'ipt>' );
</script>
<script type='text/javascript' src='https://web206.123web.vn/wp-includes/js/dist/hooks.min.js?ver=d0188aa6c336f8bb426fe5318b7f5b72' id='wp-hooks-js'></script>
<script type='text/javascript' src='https://web206.123web.vn/wp-includes/js/dist/i18n.min.js?ver=6ae7d829c963a7d8856558f3f9b32b43' id='wp-i18n-js'></script>
<script type='text/javascript' id='wp-i18n-js-after'>
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
<script type='text/javascript' src='https://web206.123web.vn/wp-includes/js/dist/vendor/lodash.min.js?ver=4.17.21' id='lodash-js'></script>
<script type='text/javascript' id='lodash-js-after'>
window.lodash = _.noConflict();
</script>
<script type='text/javascript' src='https://web206.123web.vn/wp-includes/js/dist/url.min.js?ver=b2a17503b1ff42b789ce34b159a311cf' id='wp-url-js'></script>
<script type='text/javascript' id='wp-api-fetch-js-translations'>
( function( domain, translations ) {
var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
localeData[""].domain = domain;
wp.i18n.setLocaleData( localeData, domain );
} )( "default", {"translation-revision-date":"2021-05-23 07:16:16+0000","generator":"GlotPress\/3.0.0-alpha.2","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=1; plural=0;","lang":"vi_VN"},"You are probably offline.":["C\u00f3 th\u1ec3 b\u1ea1n \u0111ang ngo\u1ea1i tuy\u1ebfn."],"Media upload failed. If this is a photo or a large image, please scale it down and try again.":["T\u1ea3i l\u00ean media kh\u00f4ng th\u00e0nh c\u00f4ng. N\u1ebfu \u0111\u00e2y l\u00e0 h\u00ecnh \u1ea3nh c\u00f3 k\u00edch th\u01b0\u1edbc l\u1edbn, vui l\u00f2ng thu nh\u1ecf n\u00f3 xu\u1ed1ng v\u00e0 th\u1eed l\u1ea1i."],"The response is not a valid JSON response.":["Ph\u1ea3n h\u1ed3i kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t JSON h\u1ee3p l\u1ec7."],"An unknown error occurred.":["C\u00f3 l\u1ed7i n\u00e0o \u0111\u00f3 \u0111\u00e3 x\u1ea3y ra."]}},"comment":{"reference":"wp-includes\/js\/dist\/api-fetch.js"}} );
</script>
<script type='text/javascript' src='https://web206.123web.vn/wp-includes/js/dist/api-fetch.min.js?ver=25cbf3644d200bdc5cab50e7966b5b03' id='wp-api-fetch-js'></script>
<script type='text/javascript' id='wp-api-fetch-js-after'>
wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( "https://web206.123web.vn/wp-json/" ) );
wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "6f322109a9" );
wp.apiFetch.use( wp.apiFetch.nonceMiddleware );
wp.apiFetch.use( wp.apiFetch.mediaUploadMiddleware );
wp.apiFetch.nonceEndpoint = "https://web206.123web.vn/wp-admin/admin-ajax.php?action=rest-nonce";
</script>
<script type='text/javascript' id='contact-form-7-js-extra'>
/* <![CDATA[ */
var wpcf7 = [];
/* ]]> */
</script>
<script type='text/javascript' src='https://web206.123web.vn/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.4' id='contact-form-7-js'></script>
<script type='text/javascript' src='https://web206.123web.vn/wp-content/plugins/twenty20/assets/js/jquery.twenty20.js?ver=1.5.7' id='twenty20-style-js'></script>
<script type='text/javascript' src='https://web206.123web.vn/wp-content/plugins/twenty20/assets/js/jquery.event.move.js?ver=1.5.7' id='twenty20-eventmove-style-js'></script>
<script type='text/javascript' src='https://web206.123web.vn/wp-content/themes/flatsome/inc/extensions/flatsome-live-search/flatsome-live-search.js?ver=3.13.2' id='flatsome-live-search-js'></script>
<script type='text/javascript' src='https://web206.123web.vn/wp-includes/js/hoverIntent.min.js?ver=1.8.1' id='hoverIntent-js'></script>
<script type='text/javascript' id='flatsome-js-js-extra'>
/* <![CDATA[ */
var flatsomeVars = {"ajaxurl":"https:\/\/web206.123web.vn\/wp-admin\/admin-ajax.php","rtl":"","sticky_height":"70","lightbox":{"close_markup":"<button title=\"%title%\" type=\"button\" class=\"mfp-close\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-x\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg><\/button>","close_btn_inside":false},"user":{"can_edit_pages":false},"i18n":{"mainMenu":"Main Menu"},"options":{"cookie_notice_version":"1"}};
/* ]]> */
</script>
<script type='text/javascript' src='https://web206.123web.vn/wp-content/themes/flatsome/assets/js/flatsome.js?ver=3.13.2' id='flatsome-js-js'></script>
<script type='text/javascript' src='https://web206.123web.vn/wp-content/themes/flatsome/assets/js/woocommerce.js?ver=3.13.2' id='flatsome-theme-woocommerce-js-js'></script>
<style>
.phone-mobile {display: none;}
.minhweb-nav {
position: fixed;
right: 15px;
background: #fff;
border-radius: 5px;
width: auto;
z-index: 150;
bottom: 50px;
padding: 10px 0;
border: 1px solid #f2f2f2;
}
.minhweb-nav ul {list-style: none;padding: 0;margin: 0;}
.minhweb-nav ul li {list-style: none!important;}
.minhweb-nav ul>li a {
border:none;
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;
}
.minhweb-nav ul>li .chat_animation{display:none}
.minhweb-nav ul>li a i.ticon-heart {
background: url(https://wpfast.vn/wp-content/uploads/2020/04/wpfast-icon-map.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}
.minhweb-nav ul>li a i.ticon-zalo-circle2 {
background: url(https://wpfast.vn/wp-content/uploads/2020/04/wpfast-icon-zalo.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.minhweb-nav li .button {
background: transparent;
}.minhweb-nav ul>li a i.ticon-angle-up {
background: url(https://wpfast.vn/wp-content/uploads/2020/04/wpfast-icon-angle-up.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.minhweb-nav ul>li a i {
width: 33px;
height: 33px;
display: block;
margin: auto;
}.minhweb-nav ul li .button .btn_phone_txt {
position: relative; top:35px;
font-size: 10px;
font-weight: bold;
text-transform: none;
}
.minhweb-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}.minhweb-nav ul>li a.chat_animation svg {
margin: -13px 0 -20px;
}
.minhweb-nav ul>li a i.ticon-messenger {
background: url(https://wpfast.vn/wp-content/uploads/2020/04/wpfast-icon-messenger.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.minhweb-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}
.minhweb-nav ul>li a i.ticon-chat-sms {
background: url(https://wpfast.vn/wp-content/uploads/2020/04/wpfast-icon-sms.jpg) no-repeat;
background-size: contain;
width: 38px;
height: 36px;
display: block;
}
.minhweb-nav ul>li a i.icon-phone-w {
background: url(https://wpfast.vn/wp-content/uploads/2020/04/wpfast-icon-phone.png) no-repeat;
background-size: contain;}
.minhweb-nav ul li .button .btn_phone_txt {
position: relative;
}
@media only screen and (max-width: 600px){
.minhweb-nav li .chat_animation{display:block !Important}
.minhweb-nav li .button .phone_animation {box-shadow: none;
position: absolute;
top: -16px;
left: 50%;
transform: translate(-50%,0);
width: 50px;
height: 50px;
border-radius: 100%;
background: #6cb917;
line-height: 15px;
border: 2px solid white;
}
.minhweb-nav ul>li a{padding:0; margin:0 auto}
.minhweb-nav {
background: white;
width: 100%; border-radius:0;
color: #fff;
height: 60px;
line-height: 50px;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
padding: 5px;
margin: 0;
box-shadow: 0 4px 10px 0 #000;
}
.minhweb-nav li {
float: left;
width: 20%;
list-style: none;
height: 50px;
}
.phone-mobile{display:block !important}}
</style>
<div class="minhweb-nav">
<ul>
<li><a href="https://g.page/wpfast?share" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Tìm đường</a></li>
<li><a href="https://zalo.me/0898048148" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li>
<li class="phone-mobile">
<a href="tel:0898048148" rel="nofollow" class="button">
<span class="phone_animation animation-shadow">
<i class="icon-phone-w" aria-hidden="true"></i>
</span>
<span class="btn_phone_txt">Gọi điện</span>
</a>
</li>
<li><a href="https://m.me/wpfastvn" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
<li><a href="sms:0898048148" class="chat_animation">
<i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>
Nhắn tin SMS</a>
</li>
<li class="to-top-pc">
<a href="#top" rel="nofollow">
<i class="ticon-angle-up" aria-hidden="true" title="Quay lên trên"></i>
</a>
</li>
</ul>
</div>
</body>
</html>Phần nội dung là BODY là động nên ta không code ở layout mà code ở trang index
Xem tiếp phần 2. Code cho trang chủ tại đây
Tin liên quan
Theo dõi chúng tôi
0 Nhận xét
Hãy trở thành người đầu tiên viết chia sẽ cảm nghĩ của mình bên dưới nhé!
Thêm Bình luận