Develop

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -13,6 +13,9 @@ cách 2: npm run scss
    - Đọc trong file package.json > scripts > và thực thi lên scss
 Dọc trong file package.json > scripts > đọc lệnh
 
+Compile build
+npm install grunt-cli > grunt
+
 # menu mobile
 1/ nằm bên trái width 80%, height 100%
 2/ nút danh sách nằm cạnh logo

package.json

@@ -7,9 +7,8 @@
     "grunt-contrib-uglify": "^5.2.2",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-sass": "^3.1.0",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.2",
     "gulp-uglify": "^3.0.2",
-    "node-sass": "^7.0.3",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0"
   },
@@ -51,11 +50,12 @@
     "mime-types": "^2.1.35",
     "neo-async": "^2.6.2",
     "node-releases": "^2.0.5",
+    "node-sass": "^9.0.0",
     "picocolors": "^1.0.0",
     "punycode": "^2.1.1",
     "randombytes": "^2.1.0",
     "safe-buffer": "^5.2.1",
-    "sass": "^1.54.3",
+    "sass": "^1.65.1",
     "schema-utils": "^3.1.1",
     "serialize-javascript": "^6.0.0",
     "source-map": "^0.6.1",
@@ -72,7 +72,7 @@
   "scripts": {
     "test": "test",
     "scss": "sass --watch ./src/assets/scss/index.scss ./src/dist/css/index.css",
-    "scssbuild": "sass --watch ./src/assets/scss/index.scss ./src/dist/css/index.css --style compressed",
+    "scssbuild": "sass --watch ./src/assets/scss/index.scss ./src/dist/css/index.min.css --style compressed",
     "build": "webpack --config webpack.config.js",
     "watch": "webpack --watch"
   },

src/assets/js/app.js

@@ -66,7 +66,7 @@ $(document).ready(function () {
             {
                 breakpoint: 1024,
                 settings: {
-                    slidesToShow: 3,
+                    slidesToShow: 2,
                     slidesToScroll: 1,
                     arrows: false
                 }

src/assets/scss/components/_base.scss

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght@400;500;600&family=Lato:ital,wght@0,400;0,700;0,900;1,300;1,700&family=Mukta:wght@200;400;500;800&family=Roboto+Condensed:ital,wght@0,300;0,700;1,300;1,400&family=Sono:wght@300;400;500;600;700;800&display=swap');
+
 * {
     box-sizing: border-box;
     margin: 0;
@@ -6,18 +8,27 @@
 
 html {
     font-size: 62.5%;
+    font-family: 'Lato', sans-serif, 'arial';
+}
 
-    font-family: 'Roboto', Times, serif, sans-serif;
+body {
+    background-color: #ffffff;
 }
+
+.single-post {
+    font-size: 14px;
+}
+
 a {
     text-decoration: none;
 }
+
 img {
     object-fit: cover;
 }
 
 .space-top {
-    margin-top: 80px;
+    margin-top: 60px;
 }
 
 .grid {
@@ -34,7 +45,8 @@ img {
 .gutter-top {
     margin-top: 12px;
 }
-.no-gutter{
+
+.no-gutter {
     padding-left: 0;
     padding-right: 0;
 }
@@ -45,19 +57,23 @@ img {
     margin-left: -8px;
     margin-right: -8px
 }
+
 @import './_grid';
 
 .btn {
-    width: 118px;
-    background-color: $primari-color;
+    background-color: #FF6922;
     outline: none;
     border: none;
-    padding: 15px;
+    padding: 20px;
     text-align: center;
-    color: $white-color;
-    font-size: 1.6em;
+    color: #fff;
+    font-size: 1.6rem;
     font-weight: 600;
     cursor: pointer;
+    border-radius: 30px;
+    padding-left: 30px;
+    padding-right: 30px;
+    margin-top: 20px;
 
     &:hover {
         background-color: $btn-hover;
@@ -69,7 +85,7 @@ img {
 }
 
 .line-height {
-    line-height: 1.6;
+    line-height: 1.5;
 }
 
 .max-width {
@@ -82,6 +98,7 @@ img {
     display: none;
 
 }
+
 @keyframes opacity {
     from {
 
@@ -145,6 +162,7 @@ img {
 .hide {
     display: none !important;
 }
+
 .show {
     display: block !important;
 }