categorized

css/style.css

@@ -320,9 +320,12 @@ body {
         .designers__card__imgfr {
           width: 125px;
           height: 125px; } }
-      @media screen and (max-width: 576px) {
-        .designers__card__imgfr img {
-          width: 120px; } }
+      .designers__card__imgfr img {
+        display: inline-block;
+        width: 100px; }
+        @media screen and (max-width: 576px) {
+          .designers__card__imgfr img {
+            width: 125px; } }
     .designers__card__text {
       font-weight: 350;
       margin-top: .6rem; }
@@ -924,3 +927,44 @@ input[type="checkbox"]:checked + .fs-label-info {
     opacity: 0; }
   100% {
     opacity: 1; } }
+
+.nav-tabs .nav-link {
+  font-size: 1.2rem;
+  color: #c2c2c2;
+  padding: 0 6px;
+  padding-bottom: 5px;
+  margin: 1rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 400; }
+  @media screen and (max-width: 576px) {
+    .nav-tabs .nav-link {
+      margin: .4rem .4rem; } }
+
+.nav-tabs .nav-link.active {
+  color: #F39800;
+  border-color: #F39800;
+  background-color: transparent;
+  font-weight: 500; }
+
+.nav {
+  justify-content: center; }
+  @media screen and (max-width: 576px) {
+    .nav {
+      /* display: inline-block;
+        width: max-content;
+        overflow: scroll;
+    } */ } }
+
+/* 
+  .tabdiv {
+      width: max-content;
+      overflow: scroll;
+  }
+
+  .nav-item {
+    @media screen and(max-width: 576px) {
+        display: inline-block;
+
+    }
+  } */

js/json.txt

@@ -0,0 +1,12 @@
+[
+    {
+        "name":"John",
+        "age":30,
+        "cars":["Ford", "BMW", "Fiat"]
+    },
+    {
+        "name":"Ken",
+        "age":30,
+        "cars":["Ford", "BMW", "Fiat"]
+    }
+]

js/scripts.js

@@ -1,5 +1,18 @@
+function getParameterByName(name, url = window.location.href) {
+	name = name.replace(/[\[\]]/g, '\\$&');
+	var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+		results = regex.exec(url);
+	if (!results) return null;
+	if (!results[2]) return '';
+	return decodeURIComponent(results[2].replace(/\+/g, ' '));
+}
+function getSource() {
+	let id = getParameterByName('utm_source');
+	$('#utm_source').val(id);
+  }
+  getSource();
 $('.owl-carousel-pc').owlCarousel({
-    loop:true,
+    loop: true,
     margin: 0,
 	nav:true,
 	autoWidth:true,
@@ -30,7 +43,55 @@ $('.owl-carousel-mb').owlCarousel({
     touchDrag: true,
     smartSpeed: 0,
     autoplay: true,
-    autoplayTimeout: 9000,
+    autoplayTimeout: 10000,
+    autoplayHoverPause: false,
+    responsive:{
+        0:{
+            items:1
+        },
+        600:{
+            items:1
+        },
+        1000:{
+            items:2
+        }
+    }
+});
+
+
+
+$('.owl-carousel-mb2').owlCarousel({
+    loop:true,
+    margin: 0,
+    nav:true,
+    mouseDrag: true,
+    touchDrag: true,
+    smartSpeed: 0,
+    autoplay: true,
+    autoplayTimeout: 10000,
+    autoplayHoverPause: false,
+    responsive:{
+        0:{
+            items:1
+        },
+        600:{
+            items:1
+        },
+        1000:{
+            items:2
+        }
+    }
+});
+
+$('.owl-carousel-mb3').owlCarousel({
+    loop:true,
+    margin: 0,
+    nav:true,
+    mouseDrag: true,
+    touchDrag: true,
+    smartSpeed: 0,
+    autoplay: true,
+    autoplayTimeout: 10000,
     autoplayHoverPause: false,
     responsive:{
         0:{
@@ -248,3 +309,12 @@ function validate() {
 
   return q2_validate() && q3_validate();
 }
+
+function getJson() {
+	$.getJSON("js/json.txt", function(data){
+		data.forEach((item, idx) => {
+			console.log(item);
+		})
+	})
+}
+getJson();

scss/main.scss

@@ -364,8 +364,10 @@ body {
                 
             }
             img {
+                display: inline-block;
+                width: 100px;
                 @media screen and(max-width: 576px) {
-                    width: 120px;
+                    width: 125px;
                 }
             }
         }
@@ -1066,3 +1068,48 @@ input[type="checkbox"]:checked + .fs-label-info {
         opacity: 1;
     }
   }
+
+
+  .nav-tabs .nav-link {
+      font-size: 1.2rem;
+      color: rgb(194, 194, 194);
+      padding: 0 6px;
+      padding-bottom: 5px;
+      margin: 1rem;
+      margin-top: 0;
+      margin-bottom: 0;
+      font-weight: 400;
+      @media screen and(max-width: 576px) {
+        margin: .4rem .4rem;
+    }
+  }
+  .nav-tabs .nav-link.active {
+    color: #F39800;
+    border-color: #F39800;
+    background-color: transparent;
+    font-weight: 500;
+  }
+
+  .nav {
+      justify-content: center;
+      @media screen and(max-width: 576px) {
+        /* display: inline-block;
+        width: max-content;
+        overflow: scroll;
+    } */
+  }
+
+  }
+  
+/* 
+  .tabdiv {
+      width: max-content;
+      overflow: scroll;
+  }
+
+  .nav-item {
+    @media screen and(max-width: 576px) {
+        display: inline-block;
+
+    }
+  } */