add index

assets/css/style.css

@@ -26,6 +26,7 @@ html body {
   color: #505050;
   margin: 0;
   direction: ltr;
+  overflow-x: hidden;
 }
 
 html:focus,
@@ -117,6 +118,83 @@ html body a:hover {
   font-weight: 500;
 }
 
+.input-box {
+  margin-bottom: 25px;
+}
+.input-box label {
+  display: inline-block;
+  font-size: 16px;
+  margin-bottom: 12px;
+  color: #222;
+}
+.input-box div {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  height: 44px;
+  border: 1px solid #DADADA;
+  overflow: hidden;
+}
+.input-box div img {
+  margin-left: 15px;
+  margin-right: 5px;
+}
+.input-box div input {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  font-family: "Roboto-Med";
+}
+.input-box div input::placeholder {
+  font-family: "Roboto";
+}
+.input-box div:focus-within {
+  border: 1px solid #0164FF;
+}
+.input-box.textarea div {
+  height: 90px;
+}
+.input-box.textarea textarea {
+  width: 100%;
+  height: 100%;
+  padding-left: 20px;
+  padding-top: 10px;
+  border: none;
+  resize: none;
+  font-size: 14px;
+  font-family: "Roboto";
+}
+.input-box.submit {
+  padding-top: 15px;
+}
+.input-box.submit input[type=submit],
+.input-box.submit button {
+  width: 100%;
+  border: none;
+  font-size: 16px;
+  color: #fff;
+  padding: 18.5px 0;
+  background-color: #0164FF;
+  border-radius: 50px;
+}
+
+.select-box select {
+  position: relative;
+  border: none;
+  background-color: transparent;
+  padding: 15px 0;
+  cursor: pointer;
+}
+.select-box .flag {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 26px;
+  width: 45px;
+  background-color: #fff;
+}
+
 .main-section {
   position: relative;
 }
@@ -226,6 +304,14 @@ html body a:hover {
   background-clip: text;
   color: transparent;
 }
+.slider .s-left .img {
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+.slider .s-left .img img {
+  width: 60%;
+}
 .slider .s-left h3 {
   font-family: "Roboto-Bold";
   font-weight: 900;
@@ -344,66 +430,6 @@ html body a:hover {
   width: 60%;
 }
 
-.input-box {
-  margin-bottom: 25px;
-}
-.input-box label {
-  display: inline-block;
-  font-size: 16px;
-  margin-bottom: 12px;
-  color: #222;
-}
-.input-box div {
-  display: flex;
-  align-items: center;
-  border-radius: 10px;
-  height: 44px;
-  border: 1px solid #DADADA;
-  overflow: hidden;
-}
-.input-box div img {
-  margin-left: 15px;
-  margin-right: 5px;
-}
-.input-box div input {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  font-family: "Roboto-Med";
-}
-.input-box div input::placeholder {
-  font-family: "Roboto";
-}
-.input-box div:focus-within {
-  border: 1px solid #0164FF;
-}
-.input-box.textarea div {
-  height: 90px;
-}
-.input-box.textarea textarea {
-  width: 100%;
-  height: 100%;
-  padding-left: 20px;
-  padding-top: 10px;
-  border: none;
-  resize: none;
-  font-size: 14px;
-  font-family: "Roboto";
-}
-.input-box.submit {
-  padding-top: 15px;
-}
-.input-box.submit input[type=submit],
-.input-box.submit button {
-  width: 100%;
-  border: none;
-  font-size: 16px;
-  color: #fff;
-  padding: 18.5px 0;
-  background-color: #0164FF;
-  border-radius: 50px;
-}
-
 @media (min-width: 576px) {
   .container {
     max-width: 540px;
@@ -429,5 +455,117 @@ html body a:hover {
     max-width: 1280px;
   }
 }
+@media (max-width: 1200px) {
+  .slider .s-left h1 {
+    font-size: 68px;
+  }
+  .slider .s-left h3 {
+    font-size: 46px;
+  }
+}
+@media (max-width: 992px) {
+  .slider .s-left {
+    width: 70%;
+  }
+  .slider .s-right {
+    width: 30%;
+  }
+  .slider .s-right .s-right-inner img {
+    right: unset;
+    left: -40%;
+  }
+  .our-sec .our-sec-inner .os-item h1 {
+    font-size: 68px;
+  }
+}
+@media (max-width: 768px) {
+  .blue-btn {
+    padding: 11px 49px;
+  }
+  .select-box .flag {
+    top: 10px;
+  }
+  .header {
+    height: unset;
+    flex-direction: column;
+    position: relative;
+  }
+  .header .header-logo {
+    width: 100%;
+    padding-top: 25px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #E7E7E7;
+  }
+  .header .header-side {
+    width: 100%;
+    padding-top: 12px;
+  }
+  .header .header-side .hs-side {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .header .header-side .hs-side a {
+    display: inline-block;
+  }
+  .header .select-box {
+    position: absolute;
+    right: 0;
+    top: 15px;
+  }
+  .main-section .effect-one {
+    display: none;
+  }
+  .slider .s-right {
+    display: none;
+  }
+  .slider .s-left {
+    width: 100%;
+    padding-top: 30px;
+  }
+  .slider .s-left .img {
+    display: flex;
+  }
+  .slider .s-left h1 {
+    font-size: 50px;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .slider .s-left h3 {
+    font-size: 32px;
+    margin-bottom: 25px;
+    margin-top: 10px;
+  }
+  .slider .s-left strong {
+    font-size: 20px;
+  }
+  .our-sec {
+    padding-top: 70px;
+    padding-bottom: 40px;
+  }
+  .our-sec .our-sec-inner {
+    flex-direction: column;
+  }
+  .our-sec .our-sec-inner .os-item {
+    width: 100%;
+    margin-bottom: 30px;
+  }
+  .our-sec .our-sec-inner .os-item h1 {
+    font-size: 40px;
+  }
+  .footer .footter-inner .f-midd {
+    flex-direction: column;
+  }
+  .footer .footter-inner .f-midd .footer-item {
+    width: 100%;
+    align-items: unset;
+    justify-content: unset;
+    margin-bottom: 15px;
+  }
+  .footer .effect-2 {
+    display: none;
+  }
+}
 
 /*# sourceMappingURL=style.css.map */

assets/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/style.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAaF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAOJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAYN;EACE;EACA;EACA;EACA;;;AAWR;EACE;;;AAOF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;;AAOR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAmBR;EACE;;AAGE;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAQR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWN;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/style.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAaF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGJ;EACE;;AAIF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAUJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAOJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAYN;EACE;EACA;EACA;EACA;;;AAWR;EACE;;;AAOF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;;AAOR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAmBR;EACE;;AAGE;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAeR;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAUJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;;AAKJ;EAEE;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;;EAIJ;IACE;IACA;;EAEA;IACE;IACA;IACA;IACA;;EAEA;IACE;;EAMN;IACE;IACA;IACA;;EAGF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAIF;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE","file":"style.css"}

assets/js/main.js

@@ -0,0 +1,19 @@
+
+let flagBox = document.querySelector('.js-do-flag')
+if (flagBox) {
+    flagBox.querySelectorAll('select option').forEach(item => {
+        if (item.selected) {
+            let selectedFlag = item.getAttribute('data-flag');
+            flagBox.querySelector(`.flag img.${selectedFlag}`).classList.remove('d-none')
+        }
+        item.addEventListener('click', function () {
+            flagBox.querySelectorAll('.flag img').forEach(delActive => {
+                delActive.classList.add('d-none')
+            })
+            if (item.selected) {
+                let selectedFlag = item.getAttribute('data-flag');
+                flagBox.querySelector(`.flag img.${selectedFlag}`).classList.remove('d-none')
+            }
+        })
+    })
+}

assets/scss/style.scss

@@ -135,6 +135,92 @@ html body a:hover {
 }
 
 
+.input-box {
+  margin-bottom: 25px;
+  label {
+    display: inline-block;
+    font-size: 16px;
+    margin-bottom: 12px;
+    color: #222;
+  }
+  div {
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+    height: 44px;
+    border: 1px solid #DADADA;
+    overflow: hidden;
+    img {
+      margin-left: 15px;
+      margin-right: 5px;
+    }
+    input {
+      width: 100%;
+      height: 100%;
+      border: 0;
+      font-family: 'Roboto-Med';
+      &::placeholder {
+        font-family: 'Roboto';
+      }
+    }
+    &:focus-within {
+      border: 1px solid #0164FF;
+    }
+  }
+  &.textarea {
+    div {
+      height: 90px;
+    }
+    textarea {
+      width: 100%;
+      height: 100%;
+      padding-left: 20px;
+      padding-top: 10px;
+      border: none;
+      resize: none;
+      font-size: 14px;
+      font-family: 'Roboto';
+    }
+  }
+
+  &.submit {
+    padding-top: 15px;
+
+    & input[type="submit"],
+    button {
+      width: 100%;
+      border: none;
+      font-size: 16px;
+      color: #fff;
+      padding: 18.5px 0;
+      background-color: #0164FF;
+      border-radius: 50px;
+    }
+  }
+}
+
+
+.select-box {
+  select {
+    position: relative;
+    border: none;
+    background-color: transparent;
+    padding: 15px 0;
+    cursor: pointer;
+  }
+  .flag {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 26px;
+    width: 45px;
+    background-color: #fff;
+  }
+}
+
+
+
 
 // =====================================
 
@@ -281,6 +367,17 @@ html body a:hover {
       color: transparent;
     }
 
+    .img{
+      display: none;
+      // display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img{
+        width: 60%;
+      }
+    }
+
     h3 {
       font-family: 'Roboto-Bold';
       font-weight: 900;
@@ -436,77 +533,6 @@ html body a:hover {
 
 
 
-.input-box {
-  margin-bottom: 25px;
-
-  label {
-    display: inline-block;
-    font-size: 16px;
-    margin-bottom: 12px;
-    color: #222;
-  }
-
-  div {
-    display: flex;
-    align-items: center;
-    border-radius: 10px;
-    height: 44px;
-    border: 1px solid #DADADA;
-    overflow: hidden;
-
-    img {
-      margin-left: 15px;
-      margin-right: 5px;
-    }
-
-    input {
-      width: 100%;
-      height: 100%;
-      border: 0;
-      font-family: 'Roboto-Med';
-
-      &::placeholder {
-        font-family: 'Roboto';
-      }
-    }
-
-    &:focus-within {
-      border: 1px solid #0164FF;
-    }
-  }
-
-  &.textarea {
-    div {
-      height: 90px;
-    }
-
-    textarea {
-      width: 100%;
-      height: 100%;
-      padding-left: 20px;
-      padding-top: 10px;
-      border: none;
-      resize: none;
-      font-size: 14px;
-      font-family: 'Roboto';
-    }
-  }
-
-  &.submit {
-    padding-top: 15px;
-
-    & input[type="submit"],
-    button {
-      width: 100%;
-      border: none;
-      font-size: 16px;
-      color: #fff;
-      padding: 18.5px 0;
-      background-color: #0164FF;
-      border-radius: 50px;
-    }
-  }
-}
 
 // ------------------------------Contact Us page End-------------
 
@@ -543,3 +569,146 @@ html body a:hover {
     max-width: 1280px;
   }
 }
+
+
+
+
+
+
+
+@media (max-width : 1200px) {
+  .slider .s-left h1{
+    font-size: 68px;
+  }
+  .slider .s-left h3{
+    font-size: 46px;
+  }
+}
+
+@media (max-width : 992px) {
+  .slider .s-left{
+    width: 70%;
+  }
+  .slider .s-right{
+    width: 30%;
+  }
+
+  .slider .s-right .s-right-inner img{
+    right: unset;
+    left: -40%;
+  }
+
+  .our-sec .our-sec-inner .os-item h1{
+    font-size: 68px;
+  }
+}
+
+
+@media (max-width : 768px) {
+
+  .blue-btn{
+    padding: 11px 49px;
+  }
+
+  .select-box .flag{
+    top: 10px;
+  }
+
+  .header{
+    height: unset;
+    flex-direction: column;
+    position: relative;
+
+    .header-logo{
+      width: 100%;
+      padding-top: 25px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #E7E7E7;
+
+    }
+  }
+  .header .header-side{
+    width: 100%;
+    padding-top: 12px;
+
+    .hs-side{
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      a{
+        display: inline-block;
+      }
+    }
+  }
+  
+
+  .header .select-box{
+    position: absolute;
+    right: 0;
+    top: 15px;
+  }
+
+  .main-section .effect-one{
+    display: none;
+  }
+  .slider .s-right{
+    display: none;
+  }
+  .slider .s-left{
+    width: 100%;
+    padding-top: 30px;
+  }
+
+  .slider .s-left .img{
+    display: flex;
+  }
+
+  .slider .s-left h1{
+    font-size: 50px;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  .slider .s-left h3{
+    font-size: 32px;
+    margin-bottom: 25px;
+    margin-top: 10px;
+  }
+  .slider .s-left strong{
+    font-size: 20px;
+  }
+
+  .our-sec{
+    padding-top: 70px;
+    padding-bottom: 40px;
+  }
+
+  .our-sec .our-sec-inner{
+    flex-direction: column;
+  }
+  .our-sec .our-sec-inner .os-item{
+    width: 100%;
+    margin-bottom: 30px;
+  }
+  .our-sec .our-sec-inner .os-item h1{
+    font-size: 40px;
+  }
+
+
+  .footer .footter-inner .f-midd{
+    flex-direction: column;
+  }
+
+  .footer .footter-inner .f-midd .footer-item{
+    width: 100%;
+    align-items: unset;
+    justify-content: unset;
+    margin-bottom: 15px;
+  }
+
+  .footer .effect-2{
+    display: none;
+  }
+}

contact-us.html

@@ -21,8 +21,15 @@
                         <a class="white-btn" href="">Contact us</a>
                         <a class="blue-btn" href="">Login</a>
                     </div>
-                    <div>
+                    <div class="select-box js-do-flag">
-                        eng
+                        <select name="" id="">
+                            <option value="" data-flag="en">English</option>
+                            <option selected value="" data-flag="fa">Persian</option>
+                        </select>
+                        <div class="flag">
+                            <img class="en d-none" src="./assets/image/en-flag.png" alt="">
+                            <img class="fa d-none" src="./assets/image/fa-flag.png" alt="">
+                        </div>
                     </div>
                 </div>
             </div>

index.html

@@ -17,12 +17,19 @@
                     <img src="./assets/image/logo.png" alt="">
                 </div>
                 <div class="header-side">
-                    <div>
+                    <div class="hs-side">
                         <a class="white-btn" href="./contact-us.html">Contact us</a>
                         <a class="blue-btn" href="">Login</a>
                     </div>
-                    <div class="select-box">
+                    <div class="select-box js-do-flag">
-                        eng
+                        <select name="" id="">
+                            <option value="" data-flag="en">English</option>
+                            <option selected value="" data-flag="fa">Persian</option>
+                        </select>
+                        <div class="flag">
+                            <img class="en d-none" src="./assets/image/en-flag.png" alt="">
+                            <img class="fa d-none" src="./assets/image/fa-flag.png" alt="">
+                        </div>
                     </div>
                 </div>
             </div>
@@ -39,6 +46,10 @@
                 <div class="slider-inner">
                     <div class="s-left">
                         <h1>AI-Powered</h1>
+                        <div class="img">
+                            <img src="./assets/image/mobile-res.png" alt="">
+
+                        </div>
                         <h3>Tender <br> Management</h3>
                         <strong>Win more tenders, automatically!</strong>
                         <p>Our platform finds tenders tailored to your business, <br> automates document handling, and
@@ -48,7 +59,6 @@
                     <div class="s-right">
                         <div class="s-right-inner">
                             <img src="./assets/image/mobile.png" alt="">
-
                         </div>
                     </div>
                 </div>