diff --git a/README.md b/README.md
new file mode 100644
index 00000000..9be5ce60
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+# thiep-mung
diff --git a/config.js b/config.js
index ff2e8f64..0c6c2319 100644
--- a/config.js
+++ b/config.js
@@ -1,8 +1,8 @@
 const nameGirl = 'Em';
 const giftUrl = 'http://nodemy.vn';
 const eventName = 'Chúc Mừng 20-10';
-const titleCard = 'Tặng người ấy';
-const contentCard = 'Chúc honey của anh 20/10 tràn ngập niềm vui và những nụ cười. Mong điều đẹp nhất sẽ đến với em trong hôm nay và cả những ngày sau';
+const titleCard = 'Tặng Em';
+const contentCard = 'Chúc em có ngày 20/10 tràn ngập niềm vui và những nụ cười. Mong điều đẹp nhất sẽ đến với em trong hôm nay và cả những ngày sau';
 
 // phần dưới dành cho các bạn biết code, nếu muốn chỉnh ảnh đơn giản với base64
 // Cần hỗ trợ hãy liên hệ: 
diff --git a/hot-girl.png b/hot-girl.png
index 66c58b6f..a9a7efba 100644
Binary files a/hot-girl.png and b/hot-girl.png differ
diff --git a/hot-girl.png.png b/hot-girl.png.png
new file mode 100644
index 00000000..a9a7efba
Binary files /dev/null and b/hot-girl.png.png differ
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..21b68fcb
--- /dev/null
+++ b/index.js
@@ -0,0 +1,221 @@
+$(document).ready(function(){
+
+    // banner owl carousel
+    $("#banner-area .owl-carousel").owlCarousel({
+        dots: true,
+        items: 1
+    });
+
+    // top sale owl carousel
+    $("#top-sale .owl-carousel").owlCarousel({
+        loop: true,
+        nav: true,
+        dots: false,
+        responsive : {
+            0: {
+                items: 1
+            },
+            600: {
+                items: 3
+            },
+            1000 : {
+                items: 5
+            }
+        }
+    });
+
+    // isotope filter
+    var $grid = $(".grid").isotope({
+        itemSelector : '.grid-item',
+        layoutMode : 'fitRows'
+    });
+
+    // filter items on button click
+    $(".button-group").on("click", "button", function(){
+        var filterValue = $(this).attr('data-filter');
+        $grid.isotope({ filter: filterValue});
+    })
+
+
+    // new phones owl carousel
+    $("#new-phones .owl-carousel").owlCarousel({
+        loop: true,
+        nav: false,
+        dots: true,
+        responsive : {
+            0: {
+                items: 1
+            },
+            600: {
+                items: 3
+            },
+            1000 : {
+                items: 5
+            }
+        }
+    });
+
+    // blogs owl carousel
+    $("#blogs .owl-carousel").owlCarousel({
+        loop: true,
+        nav: false,
+        dots: true,
+        responsive : {
+            0: {
+                items: 1
+            },
+            600: {
+                items: 3
+            }
+        }
+    })
+
+
+    // product qty section
+    let $qty_up = $(".qty .qty-up");
+    let $qty_down = $(".qty .qty-down");
+    // let $input = $(".qty .qty_input");
+
+    // click on qty up button
+    $qty_up.click(function(e){
+        let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
+        if($input.val() >= 1 && $input.val() <= 9){
+            $input.val(function(i, oldval){
+                return ++oldval;
+            });
+        }
+    });
+
+       // click on qty down button
+       $qty_down.click(function(e){
+        let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
+        if($input.val() > 1 && $input.val() <= 10){
+            $input.val(function(i, oldval){
+                return --oldval;
+            });
+        }
+    });
+
+
+});
+//search
+const people = [
+  { name: 'iphone'},
+  { name: 'samsung'},
+  { name: 'redmi'},
+  { name: 'dillon'},
+  { name: 'evan'},
+  { name: 'frank'},
+  { name: 'georgette'},
+]
+whateverElement.addEventListener("event type"), () => {
+}
+const searchInput = document.querySelector('.input')
+searchInput.addEventListener("input"), (e) => {
+  // inside, we will need to achieve a few things:
+  // 1. declare and assign the value of the event's target to a variable AKA whatever is typed in the search bar
+  let value = e.target.value
+
+  // 2. check: if input exists and if input is larger than 0
+  if (value && value.trim().length > 0){
+      // 3. redefine 'value' to exclude white space and change input to all lowercase
+       value = value.trim().toLowerCase()
+      // 4. return the results only if the value of the search is included in the person's name
+      // we need to write code (a function for filtering through our data to include the search input value)
+  } else {
+      // 5. return nothing
+      // input is invalid -- show an error message or show no results
+
+  }
+
+}
+const clearButton = document.getElementById('clear')
+
+clearButton.addEventListener("click", () => {
+    // 1. write a function that removes any previous results from the page
+})
+// creating and declaring a function called "setList"
+// setList takes in a param of "results"
+function setList(results){
+
+  for (const person of results){
+      // creating a li element for each result item
+      const resultItem = document.createElement('li')
+
+      // adding a class to each item of the results
+      resultItem.classList.add('result-item')
+
+      // grabbing the name of the current point of the loop and adding the name as the list item's text
+      const text = document.createTextNode(person.name)
+
+      // appending the text to the result item
+      resultItem.appendChild(text)
+
+      // appending the result item to the list
+      list.appendChild(resultItem)
+  }
+}
+searchInput.addEventListener("input"), (e) => {
+  let value = e.target.value
+}
+  if (value && value.trim().length > 0){
+       value = value.trim().toLowerCase()
+  }
+      //returning only the results of setList if the value of the search is included in the person's name
+      setList(people.filter(person => {
+          return person.name.includes(value)
+      }))
+      function clearList(){
+        // looping through each child of the search results list and remove each child
+        while (list.firstChild){
+            list.removeChild(list.firstChild)
+        }
+    }
+    searchInput.addEventListener("input"), (e) => {
+      // inside, we will need to achieve a few things:
+      // 1. declare and assign the value of the event's target to a variable AKA whatever is typed in the search bar
+      let value = e.target.value
+  
+      // 2. check: if input exists and if input is larger than 0
+      if (value && value.trim().length > 0){
+          // 3. redefine 'value' to exclude white space and change input to all lowercase
+           value = value.trim().toLowerCase()
+          // 4. return the results only if the value of the search is included in the person's name
+          // we need to write code (a function for filtering through our data to include the search input value)
+      } else {
+          // 5. return nothing
+          clearList()
+  
+      }
+  
+  }
+  clearButton.addEventListener("click", () => {
+    clearList()
+})
+function noResults(){
+  // create an element for the error; a list item ("li")
+  const error = document.createElement('li')
+  // adding a class name of "error-message" to our error element
+  error.classList.add('error-message')
+
+  // creating text for our element
+  const text = document.createTextNode('No results found. Sorry!')
+  // appending the text to our element
+  error.appendChild(text)
+  // appending the error to our list element
+  list.appendChild(error)
+}
+function setList(results){
+  clearList()
+  for (const person of results){
+      const resultItem = document.createElement('li')
+      resultItem.classList.add('result-item')
+      const text = document.createTextNode(person.name)
+      resultItem.appendChild(text)
+      list.appendChild(resultItem)
+  }
+
+  if (results.length === 0 ){
+      noResults()
+  }
+}
\ No newline at end of file
diff --git a/login.css b/login.css
new file mode 100644
index 00000000..26fc86fa
--- /dev/null
+++ b/login.css
@@ -0,0 +1,612 @@
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/* -------------------------------- 
+Primary style
+-------------------------------- */
+html * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+*,
+*:after,
+*:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+body {
+  font-size: 100%;
+  font-family: "PT Sans", sans-serif;
+  color: #505260;
+}
+a {
+  color: #2f889a;
+  text-decoration: none;
+}
+img {
+  max-width: 100%;
+}
+input,
+textarea {
+  font-family: "PT Sans", sans-serif;
+  font-size: 16px;
+  font-size: 1rem;
+}
+input::-ms-clear,
+textarea::-ms-clear {
+  display: none;
+}
+/* -------------------------------- 
+xcody-info 
+-------------------------------- */
+#cody-info {
+  position: relative;
+  background: #fff;
+  height: 44px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+#cody-info .cody-info-logo {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -15px;
+  margin-top: -13px;
+}
+#cody-info .cody-info-logo svg {
+  display: block;
+  -webkit-transition: opacity, 0.2s;
+  -moz-transition: opacity, 0.2s;
+  transition: opacity, 0.2s;
+}
+#cody-info .cody-info-logo svg:hover {
+  opacity: 0.9;
+}
+#cody-info .cody-info-logo .cody-info-logo-svg {
+  fill: #343642;
+}
+#cody-info li {
+  position: absolute;
+  top: 0;
+}
+#cody-info li:first-child {
+  left: 0;
+}
+#cody-info li:last-child {
+  right: 0;
+}
+#cody-info li a {
+  display: block;
+  width: 44px;
+  height: 44px;
+  position: relative;
+  -webkit-transition: background 0.2s;
+  -moz-transition: background 0.2s;
+  transition: background 0.2s;
+}
+#cody-info li a:hover {
+  background-color: #29889b;
+}
+#cody-info li a:hover .cody-info-buttons-svg {
+  fill: #fff;
+}
+#cody-info li svg {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -16px;
+  margin-left: -16px;
+}
+#cody-info li .cody-info-buttons-svg {
+  fill: #29889b;
+}
+#cody-info.cody-info-bottom {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
+}
+#cody-info::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+@media only screen and (min-width: 600px) {
+  #cody-info {
+    height: 60px;
+  }
+  #cody-info li a {
+    height: 60px;
+    width: 60px;
+  }
+}
+/* -------------------------------- 
+Main components 
+-------------------------------- */
+header[role="banner"] {
+  position: relative;
+  height: 50px;
+  background: #343642;
+}
+header[role="banner"] #cd-logo {
+  float: left;
+  margin: 4px 0 0 5%;
+  /* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
+  -webkit-transform-origin: 0 50%;
+  -moz-transform-origin: 0 50%;
+  -ms-transform-origin: 0 50%;
+  -o-transform-origin: 0 50%;
+  transform-origin: 0 50%;
+  -webkit-transform: scale(0.8);
+  -moz-transform: scale(0.8);
+  -ms-transform: scale(0.8);
+  -o-transform: scale(0.8);
+  transform: scale(0.8);
+}
+header[role="banner"] #cd-logo img {
+  display: block;
+}
+header[role="banner"]::after {
+  /* clearfix */
+  content: "";
+  display: table;
+  clear: both;
+}
+@media only screen and (min-width: 768px) {
+  header[role="banner"] {
+    height: 80px;
+  }
+  header[role="banner"] #cd-logo {
+    margin: 20px 0 0 5%;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+}
+.main-nav {
+  float: right;
+  margin-right: 5%;
+  width: 44px;
+  height: 100%;
+  background: url("../img/cd-icon-menu.svg") no-repeat center center;
+  cursor: pointer;
+}
+.main-nav ul {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+.main-nav ul.is-visible {
+  -webkit-transform: translateY(50px);
+  -moz-transform: translateY(50px);
+  -ms-transform: translateY(50px);
+  -o-transform: translateY(50px);
+  transform: translateY(50px);
+}
+.main-nav a {
+  text-decoration-line: none;
+  display: block;
+  height: 50px;
+  line-height: 50px;
+  padding-left: 5%;
+  background: #292a34;
+  border-top: 1px solid #3b3d4b;
+  color: #fff;
+}
+@media only screen and (min-width: 768px) {
+  .main-nav {
+    width: auto;
+    height: auto;
+    background: none;
+    cursor: auto;
+  }
+  .main-nav ul {
+    position: static;
+    width: auto;
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    -o-transform: translateY(0);
+    transform: translateY(0);
+    line-height: 80px;
+  }
+  .main-nav ul.is-visible {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    -o-transform: translateY(0);
+    transform: translateY(0);
+  }
+  .main-nav li {
+    display: inline-block;
+    margin-left: 1em;
+  }
+  .main-nav li:nth-last-child(2) {
+    margin-left: 2em;
+  }
+  .main-nav a {
+    display: inline-block;
+    height: auto;
+    line-height: normal;
+    background: transparent;
+  }
+  .main-nav a.cd-signin,
+  .main-nav a.cd-signup {
+    padding: 0.6em 1em;
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    border-radius: 50em;
+  }
+  .main-nav a.cd-signup {
+    background: #2f889a;
+    border: none;
+  }
+}
+/* -------------------------------- 
+xsigin/signup popup 
+-------------------------------- */
+.cd-user-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(52, 54, 66, 0.9);
+  z-index: 3;
+  overflow-y: auto;
+  cursor: pointer;
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity 0.3s 0, visibility 0 0.3s;
+  -moz-transition: opacity 0.3s 0, visibility 0 0.3s;
+  transition: opacity 0.3s 0, visibility 0 0.3s;
+}
+.cd-user-modal.is-visible {
+  visibility: visible;
+  opacity: 1;
+  -webkit-transition: opacity 0.3s 0, visibility 0 0;
+  -moz-transition: opacity 0.3s 0, visibility 0 0;
+  transition: opacity 0.3s 0, visibility 0 0;
+}
+.cd-user-modal.is-visible .cd-user-modal-container {
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+.cd-user-modal-container {
+  position: relative;
+  width: 90%;
+  max-width: 600px;
+  background: #fff;
+  margin: 3em auto 4em;
+  cursor: auto;
+  border-radius: 0.25em;
+  -webkit-transform: translateY(-30px);
+  -moz-transform: translateY(-30px);
+  -ms-transform: translateY(-30px);
+  -o-transform: translateY(-30px);
+  transform: translateY(-30px);
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  transition-property: transform;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+.cd-user-modal-container .cd-switcher:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.cd-user-modal-container .cd-switcher li {
+  width: 50%;
+  float: left;
+  text-align: center;
+}
+.cd-user-modal-container .cd-switcher li:first-child a {
+  border-radius: 0.25em 0 0 0;
+}
+.cd-user-modal-container .cd-switcher li:last-child a {
+  border-radius: 0 0.25em 0 0;
+}
+.cd-user-modal-container .cd-switcher a {
+  display: block;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #d2d8d8;
+  color: #809191;
+}
+.cd-user-modal-container .cd-switcher a.selected {
+  background: #fff;
+  color: #505260;
+}
+@media only screen and (min-width: 600px) {
+  .cd-user-modal-container {
+    margin: 4em auto;
+  }
+  .cd-user-modal-container .cd-switcher a {
+    height: 70px;
+    line-height: 70px;
+  }
+}
+.cd-form {
+  padding: 1.4em;
+}
+.cd-form .fieldset {
+  position: relative;
+  margin: 1.4em 0;
+}
+.cd-form .fieldset:first-child {
+  margin-top: 0;
+}
+.cd-form .fieldset:last-child {
+  margin-bottom: 0;
+}
+.cd-form label {
+  font-size: 14px;
+  font-size: 0.875rem;
+}
+.cd-form label.image-replace {
+  /* replace text with an icon */
+  display: inline-block;
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  bottom: auto;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  transform: translateY(-50%);
+  height: 20px;
+  width: 20px;
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+  color: transparent;
+  text-shadow: none;
+  background-repeat: no-repeat;
+  background-position: 50% 0;
+}
+.cd-form label.cd-username {
+  background-image: url("../img/cd-icon-username.svg");
+}
+.cd-form label.cd-email {
+  background-image: url("../img/cd-icon-email.svg");
+}
+.cd-form label.cd-password {
+  background-image: url("../img/cd-icon-password.svg");
+}
+.cd-form input {
+  margin: 0;
+  padding: 0;
+  border-radius: 0.25em;
+}
+.cd-form input.full-width {
+  width: 100%;
+}
+.cd-form input.has-padding {
+  padding: 12px 20px 12px 50px;
+}
+.cd-form input.has-border {
+  border: 1px solid #d2d8d8;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+}
+.cd-form input.has-border:focus {
+  border-color: #343642;
+  box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
+  outline: none;
+}
+.cd-form input.has-error {
+  border: 1px solid #d76666;
+}
+.cd-form input[type="password"] {
+  /* space left for the HIDE button */
+  padding-right: 65px;
+}
+.cd-form input[type="submit"] {
+  padding: 16px 0;
+  cursor: pointer;
+  background: #2f889a;
+  color: #fff;
+  font-weight: bold;
+  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+}
+.no-touch .cd-form input[type="submit"]:hover,
+.no-touch .cd-form input[type="submit"]:focus {
+  background: #3599ae;
+  outline: none;
+}
+.cd-form .hide-password {
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 6px 15px;
+  border-left: 1px solid #d2d8d8;
+  top: 50%;
+  bottom: auto;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  transform: translateY(-50%);
+  font-size: 14px;
+  font-size: 0.875rem;
+  color: #343642;
+}
+.cd-form .cd-error-message {
+  display: inline-block;
+  position: absolute;
+  left: -5px;
+  bottom: -35px;
+  background: rgba(215, 102, 102, 0.9);
+  padding: 0.8em;
+  z-index: 2;
+  color: #fff;
+  font-size: 13px;
+  font-size: 0.8125rem;
+  border-radius: 0.25em;
+  /* prevent click and touch events */
+  pointer-events: none;
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity 0.2s 0, visibility 0 0.2s;
+  -moz-transition: opacity 0.2s 0, visibility 0 0.2s;
+  transition: opacity 0.2s 0, visibility 0 0.2s;
+}
+.cd-form .cd-error-message::after {
+  /* triangle */
+  content: "";
+  position: absolute;
+  left: 22px;
+  bottom: 100%;
+  height: 0;
+  width: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid rgba(215, 102, 102, 0.9);
+}
+.cd-form .cd-error-message.is-visible {
+  opacity: 1;
+  visibility: visible;
+  -webkit-transition: opacity 0.2s 0, visibility 0 0;
+  -moz-transition: opacity 0.2s 0, visibility 0 0;
+  transition: opacity 0.2s 0, visibility 0 0;
+}
+@media only screen and (min-width: 600px) {
+  .cd-form {
+    padding: 2em;
+  }
+  .cd-form .fieldset {
+    margin: 2em 0;
+  }
+  .cd-form .fieldset:first-child {
+    margin-top: 0;
+  }
+  .cd-form .fieldset:last-child {
+    margin-bottom: 0;
+  }
+  .cd-form input.has-padding {
+    padding: 16px 20px 16px 50px;
+  }
+  .cd-form input[type="submit"] {
+    padding: 16px 0;
+  }
+}
+.cd-form-message {
+  padding: 1.4em 1.4em 0;
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  text-align: center;
+}
+@media only screen and (min-width: 600px) {
+  .cd-form-message {
+    padding: 2em 2em 0;
+  }
+}
+.cd-form-bottom-message {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  bottom: -30px;
+  text-align: center;
+  font-size: 14px;
+  font-size: 0.875rem;
+}
+.cd-form-bottom-message a {
+  color: #fff;
+  text-decoration: underline;
+}
+.cd-close-form {
+  /* form X button on top right */
+  display: block;
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  right: 0;
+  top: -40px;
+  background: url("../img/cd-icon-close.svg") no-repeat center center;
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+@media only screen and (min-width: 1170px) {
+  .cd-close-form {
+    display: none;
+  }
+}
+#cd-login,
+#cd-signup,
+#cd-reset-password {
+  display: none;
+}
+#cd-login.is-selected,
+#cd-signup.is-selected,
+#cd-reset-password.is-selected {
+  display: block;
+}
\ No newline at end of file
diff --git a/login.js b/login.js
new file mode 100644
index 00000000..dde323df
--- /dev/null
+++ b/login.js
@@ -0,0 +1,146 @@
+jQuery(document).ready(function($){
+    var $form_modal = $('.cd-user-modal'),
+        $form_login = $form_modal.find('#cd-login'),
+        $form_signup = $form_modal.find('#cd-signup'),
+        $form_forgot_password = $form_modal.find('#cd-reset-password'),
+        $form_modal_tab = $('.cd-switcher'),
+        $tab_login = $form_modal_tab.children('li').eq(0).children('a'),
+        $tab_signup = $form_modal_tab.children('li').eq(1).children('a'),
+        $forgot_password_link = $form_login.find('.cd-form-bottom-message a'),
+        $back_to_login_link = $form_forgot_password.find('.cd-form-bottom-message a'),
+        $main_nav = $('.main-nav');
+    //open modal
+    $main_nav.on('click', function(event){
+      if( $(event.target).is($main_nav) ) {
+        // on mobile open the submenu
+        $(this).children('ul').toggleClass('is-visible');
+      }
+      else {
+        // on mobile close submenu
+        $main_nav.children('ul').removeClass('is-visible');
+        //show modal layer
+        $form_modal.addClass('is-visible');
+        //show the selected form
+        ( $(event.target).is('.cd-signup') ) ? signup_selected() : login_selected();
+      }
+    }
+                );
+    //close modal
+    $('.cd-user-modal').on('click', function(event){
+      if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) {
+        $form_modal.removeClass('is-visible');
+      }
+    }
+                          );
+    //close modal when clicking the esc keyboard button
+    $(document).keyup(function(event){
+      if(event.which=='27'){
+        $form_modal.removeClass('is-visible');
+      }
+    }
+                     );
+    //switch from a tab to another
+    $form_modal_tab.on('click', function(event) {
+      event.preventDefault();
+      ( $(event.target).is( $tab_login ) ) ? login_selected() : signup_selected();
+    }
+                      );
+    //hide or show password
+    $('.hide-password').on('click', function(){
+      var $this= $(this),
+          $password_field = $this.prev('input');
+      ( 'password' == $password_field.attr('type') ) ? $password_field.attr('type', 'text') : $password_field.attr('type', 'password');
+      ( 'Hide' == $this.text() ) ? $this.text('Show') : $this.text('Hide');
+      //focus and move cursor to the end of input field
+      $password_field.putCursorAtEnd();
+    }
+                          );
+    //show forgot-password form 
+    $forgot_password_link.on('click', function(event){
+      event.preventDefault();
+      forgot_password_selected();
+    }
+                            );
+    //back to login from the forgot-password form
+    $back_to_login_link.on('click', function(event){
+      event.preventDefault();
+      login_selected();
+    }
+                          );
+    function login_selected(){
+      $form_login.addClass('is-selected');
+      $form_signup.removeClass('is-selected');
+      $form_forgot_password.removeClass('is-selected');
+      $tab_login.addClass('selected');
+      $tab_signup.removeClass('selected');
+    }
+    function signup_selected(){
+      $form_login.removeClass('is-selected');
+      $form_signup.addClass('is-selected');
+      $form_forgot_password.removeClass('is-selected');
+      $tab_login.removeClass('selected');
+      $tab_signup.addClass('selected');
+    }
+    function forgot_password_selected(){
+      $form_login.removeClass('is-selected');
+      $form_signup.removeClass('is-selected');
+      $form_forgot_password.addClass('is-selected');
+    }
+    //Kiểm tra form hợp lệ 
+    $form_login.find('input[type="submit"]').on('click', function(event){
+      event.preventDefault();
+      if ($('#signin-email').val() == ''){
+        $form_login.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
+      }
+    }
+                                               );
+    //IE9 placeholder fallback
+    //credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
+    if(!Modernizr.input.placeholder){
+      $('[placeholder]').focus(function() {
+        var input = $(this);
+        if (input.val() == input.attr('placeholder')) {
+          input.val('');
+        }
+      }
+                              ).blur(function() {
+        var input = $(this);
+        if (input.val() == '' || input.val() == input.attr('placeholder')) {
+          input.val(input.attr('placeholder'));
+        }
+      }
+                                    ).blur();
+      $('[placeholder]').parents('form').submit(function() {
+        $(this).find('[placeholder]').each(function() {
+          var input = $(this);
+          if (input.val() == input.attr('placeholder')) {
+            input.val('');
+          }
+        }
+                                          )
+      }
+                                               );
+    }
+  }
+                        );
+  //credits https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
+  jQuery.fn.putCursorAtEnd = function() {
+    return this.each(function() {
+      // If this function exists...
+      if (this.setSelectionRange) {
+        // ... then use it (Doesn't work in IE)
+        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
+        var len = $(this).val().length * 2;
+        this.setSelectionRange(len, len);
+      }
+      else {
+        // ... otherwise replace the contents with itself
+        // (Doesn't work in Google Chrome)
+        $(this).val($(this).val());
+      }
+    }
+                    );
+  };
+  jQuery('#cody-info ul li').eq(1).on('click', function(){
+    $('#cody-info').hide();
+  });
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 00000000..5be563e9
--- /dev/null
+++ b/main.css
@@ -0,0 +1,185 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+html,body{
+  display: grid;
+  height: 100%;
+  width: 100%;
+  place-items: center;
+  background: -webkit-linear-gradient(left, #003366,#004080,#0059b3
+, #0073e6);
+}
+::selection{
+  background: #1a75ff;
+  color: #fff;
+}
+.wrapper{
+  overflow: hidden;
+  max-width: 390px;
+  background: #fff;
+  padding: 30px;
+  border-radius: 15px;
+  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
+}
+.wrapper .title-text{
+  display: flex;
+  width: 200%;
+}
+.wrapper .title{
+  width: 50%;
+  font-size: 35px;
+  font-weight: 600;
+  text-align: center;
+  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
+}
+.wrapper .slide-controls{
+  position: relative;
+  display: flex;
+  height: 50px;
+  width: 100%;
+  overflow: hidden;
+  margin: 30px 0 10px 0;
+  justify-content: space-between;
+  border: 1px solid lightgrey;
+  border-radius: 15px;
+}
+.slide-controls .slide{
+  height: 100%;
+  width: 100%;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 500;
+  text-align: center;
+  line-height: 48px;
+  cursor: pointer;
+  z-index: 1;
+  transition: all 0.6s ease;
+}
+.slide-controls label.signup{
+  color: #000;
+}
+.slide-controls .slider-tab{
+  position: absolute;
+  height: 100%;
+  width: 50%;
+  left: 0;
+  z-index: 0;
+  border-radius: 15px;
+  background: -webkit-linear-gradient(left,#003366,#004080,#0059b3
+, #0073e6);
+  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
+}
+input[type="radio"]{
+  display: none;
+}
+#signup:checked ~ .slider-tab{
+  left: 50%;
+}
+#signup:checked ~ label.signup{
+  color: #fff;
+  cursor: default;
+  user-select: none;
+}
+#signup:checked ~ label.login{
+  color: #000;
+}
+#login:checked ~ label.signup{
+  color: #000;
+}
+#login:checked ~ label.login{
+  cursor: default;
+  user-select: none;
+}
+.wrapper .form-container{
+  width: 100%;
+  overflow: hidden;
+}
+.form-container .form-inner{
+  display: flex;
+  width: 200%;
+}
+.form-container .form-inner form{
+  width: 50%;
+  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
+}
+.form-inner form .field{
+  height: 50px;
+  width: 100%;
+  margin-top: 20px;
+}
+.form-inner form .field input{
+  height: 100%;
+  width: 100%;
+  outline: none;
+  padding-left: 15px;
+  border-radius: 15px;
+  border: 1px solid lightgrey;
+  border-bottom-width: 2px;
+  font-size: 17px;
+  transition: all 0.3s ease;
+}
+.form-inner form .field input:focus{
+  border-color: #1a75ff;
+  /* box-shadow: inset 0 0 3px #fb6aae; */
+}
+.form-inner form .field input::placeholder{
+  color: #999;
+  transition: all 0.3s ease;
+}
+form .field input:focus::placeholder{
+  color: #1a75ff;
+}
+.form-inner form .pass-link{
+  margin-top: 5px;
+}
+.form-inner form .signup-link{
+  text-align: center;
+  margin-top: 30px;
+}
+.form-inner form .pass-link a,
+.form-inner form .signup-link a{
+  color: #1a75ff;
+  text-decoration: none;
+}
+.form-inner form .pass-link a:hover,
+.form-inner form .signup-link a:hover{
+  text-decoration: underline;
+}
+form .btn{
+  height: 50px;
+  width: 100%;
+  border-radius: 15px;
+  position: relative;
+  overflow: hidden;
+}
+form .btn .btn-layer{
+  height: 100%;
+  width: 300%;
+  position: absolute;
+  left: -100%;
+  background: -webkit-linear-gradient(right,#003366,#004080,#0059b3
+, #0073e6);
+  border-radius: 15px;
+  transition: all 0.4s ease;;
+}
+form .btn:hover .btn-layer{
+  left: 0;
+}
+form .btn input[type="submit"]{
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+  position: relative;
+  background: none;
+  border: none;
+  color: #fff;
+  padding-left: 0;
+  border-radius: 15px;
+  font-size: 20px;
+  font-weight: 500;
+  cursor: pointer;
+}
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..5834b30b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,227 @@
+@import url("https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Raleway&family=Rubik&display=swap");
+/*              Sass Template           */
+/*  global classes  */
+button,
+button:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* typography classes */
+.font-baloo {
+  font-family: "Baloo Thambi 2", cursive;
+}
+
+.font-rale {
+  font-family: "Raleway", cursive;
+}
+
+.font-rubik {
+  font-family: "Rubik", cursive;
+}
+
+.font-size-12 {
+  color: white !important;
+  font-size: 20px;
+}
+
+.font-size-14 {
+  font-size: 18px;
+}
+
+.font-size-16 {
+  font-size: 16px;
+}
+
+.font-size-20 {
+  font-size: 20px;
+}
+
+/* Color Template  */
+.color-primary {
+  color: #003859;
+}
+
+.color-primary-bg {
+  background: #003859;
+}
+
+.color-second {
+  color: #00a5c4;
+}
+
+.color-second-bg {
+  background: #48a1ff;
+}
+
+.color-yellow {
+  color: #ffd289;
+}
+
+.color-yellow-bg {
+  background: #ffd289;
+}
+
+/*  top sale template   */
+#top-sale .owl-carousel .item .product a {
+  overflow: hidden;
+  text-decoration: none;
+}
+#top-sale .owl-carousel .item .product img {
+  transition: transform 0.5s ease;
+}
+#top-sale .owl-carousel .item .product img:hover {
+  transform: scale(1.1);
+
+}
+#top-sale .owl-carousel .owl-nav button {
+  position: absolute;
+  top: 30%;
+  outline: none;
+}
+#top-sale .owl-carousel .owl-nav button.owl-prev {
+  left: 0;
+}
+#top-sale .owl-carousel .owl-nav button.owl-prev span,
+#top-sale .owl-carousel .owl-nav button.owl-next span {
+  font-size: 35px;
+  color: #003859;
+  padding: 0 1rem;
+}
+#top-sale .owl-carousel .owl-nav button.owl-prev span {
+  margin-left: -4rem;
+}
+#top-sale .owl-carousel .owl-nav button.owl-next {
+  right: 0;
+}
+#top-sale .owl-carousel .owl-nav button.owl-next span {
+  margin-right: -4rem;
+}
+
+/*   Special Price Section Template */
+#special-price .grid .grid-item {
+  margin-right: 1.2rem;
+  margin-top: 1rem;
+}
+.btn a {
+  text-decoration: none;
+}
+.card a {
+  text-decoration: none;
+}
+/*# sourceMappingURL=style.css.map */
+
+.fa {
+  margin-left: 3px;
+  color: white;
+  font-size:20px;
+}
+a.px-3:hover {
+  text-decoration: none;
+}
+.fa:hover{
+  cursor: pointer;
+
+}
+.d-flex a {
+  text-decoration: none;
+}
+#filters .btn {
+  background-color:rgb(255, 200, 21);
+}
+#filters .btn:hover {
+  background-color:rgb(207, 168, 39);
+}
+
+
+.col a {
+  color: black;
+}
+
+#header .bg-light {
+  background-color: #7785ff!important;
+}
+.text-dark {
+  color: white!important;
+}
+#footer #contact .container h3  {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 44%;
+  font-size:40px;
+}
+#footer #contact .container p  {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 38%;
+
+}
+#footer #contact .container span {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 38%;
+
+}
+#footer #contact .container hr {
+  width: 50%;
+  background-color:white;
+}
+#footer #contact .container .location_icon{
+  list-style-type: none;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding-top: 5px;
+  text-align:center;
+  
+}
+#footer #contact .container li{
+  padding-right: 20px;
+  height :60px;
+}
+#footer #contact .container li a{
+  
+    color: #fff;
+    width: 40px;
+    height: 40px;
+    border: solid #fff 1px;
+    float: left;
+    text-align: center;
+    line-height: 38px;
+    border-radius: 100%;
+    font-size: 19px;
+}
+.fa-facebook-f {
+  color: #2a86ff;
+}
+.fa-twitter {
+  color: #00a5c4;
+}
+.fa-instagram {
+  color: rgb(232, 80, 148);
+}
+input[type="text"] {
+  width: 150px;
+  box-sizing: border-box;
+  border: 1px solid black;
+  border-radius: 4px;
+  outline:none;
+  padding: 4px 14px;
+}
+input[type="text"]:focus{
+  width:500px; 
+}
+input[type="text"] {
+  width: 130px;
+  box-sizing: border-box;
+  border: 1px solid black;
+  border-radius: 4px;
+  outline:none;
+  padding: 4px 14px;
+
+  transition:0.6s ease-in-out;
+}
+
+
+
+