update responsive

assets/css/style.css

@@ -169,6 +169,7 @@ html body a:hover {
 }
 .input-box.submit input[type=submit],
 .input-box.submit button {
+  cursor: pointer;
   width: 100%;
   border: none;
   font-size: 16px;
@@ -195,6 +196,10 @@ html body a:hover {
   background-color: #fff;
 }
 
+.d-none {
+  display: none;
+}
+
 .main-section {
   position: relative;
 }
@@ -280,10 +285,6 @@ html body a:hover {
   padding-bottom: 15px;
 }
 
-.d-none {
-  display: none;
-}
-
 .slider {
   padding-top: 15px;
 }
@@ -479,6 +480,12 @@ html body a:hover {
   }
 }
 @media (max-width: 768px) {
+  .main-section.index .effect-one {
+    display: none;
+  }
+  .footer.index .effect-2 {
+    display: none;
+  }
   .blue-btn {
     padding: 11px 49px;
   }
@@ -514,9 +521,6 @@ html body a:hover {
     right: 0;
     top: 15px;
   }
-  .main-section .effect-one {
-    display: none;
-  }
   .slider .s-right {
     display: none;
   }
@@ -563,8 +567,35 @@ html body a:hover {
     justify-content: unset;
     margin-bottom: 15px;
   }
-  .footer .effect-2 {
+  .contact-us {
-    display: none;
+    padding-top: 35px;
+  }
+  .contact-us .contact-us-inner .cu-top h1 {
+    text-align: center;
+    font-size: 32px;
+    padding: 25px 0;
+  }
+  .contact-us .contact-us-inner .cu-top p {
+    text-align: center;
+    line-height: 24px;
+  }
+  .main-section .effect-one {
+    left: -133px;
+    top: 183px;
+  }
+  .contact-us .contact-us-inner .cu-main .cu-main-inner {
+    width: 100%;
+  }
+  .contact-us .contact-us-inner .cu-main {
+    padding: 40px 15px;
+  }
+  .contact-us .contact-us-inner .cu-main {
+    margin-bottom: 25px;
+  }
+  .footer.contact-us .effect-2 {
+    height: 336px;
+    right: -42px;
+    bottom: 344px;
   }
 }
 

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;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"}
+{"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;;;AAYF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;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;;AAGJ;EACE;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAUF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;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;;;AASR;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGJ;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;;AAMR;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAYR;EACE;;AAEE;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AASR;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;;;AAUJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;;AAKJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;IACA;;EACA;IACE;IACA;IACA;IACA;;EAIJ;IACE;IACA;;EACA;IACE;IACA;IACA;IACA;;EACA;IACE;;EAIN;IACE;IACA;IACA;;EAEF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;EAEF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;IACA;IACA;;EAEF;IACE;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;IACA","file":"style.css"}

assets/js/main.js

@@ -1,3 +1,6 @@
+alert('با توجه به اینکه فیگما روی برکپوینت 1440 طراحی شده . برای مشاهده دقیق به صورت فیگما رزولوشن مرورگر رو روی 1440 تنظیم کنید ')
+
+
 
 let flagBox = document.querySelector('.js-do-flag')
 if (flagBox) {

assets/scss/style.scss

@@ -113,7 +113,6 @@ html body a:hover {
 
 
 // =====================================
-
 .blue-btn {
   font-size: 14px;
   padding: 20px 49px;
@@ -123,7 +122,6 @@ html body a:hover {
   margin: 0 10px;
   font-weight: 500;
 }
-
 .white-btn {
   font-size: 14px;
   padding: 20px 10px;
@@ -133,16 +131,16 @@ html body a:hover {
   margin: 0 10px;
   font-weight: 500;
 }
-
-
 .input-box {
   margin-bottom: 25px;
+
   label {
     display: inline-block;
     font-size: 16px;
     margin-bottom: 12px;
     color: #222;
   }
+
   div {
     display: flex;
     align-items: center;
@@ -150,27 +148,33 @@ html body a:hover {
     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%;
@@ -182,12 +186,12 @@ html body a:hover {
       font-family: 'Roboto';
     }
   }
-
   &.submit {
     padding-top: 15px;
 
     & input[type="submit"],
     button {
+      cursor: pointer;
       width: 100%;
       border: none;
       font-size: 16px;
@@ -199,7 +203,6 @@ html body a:hover {
   }
 }
 
-
 .select-box {
   select {
     position: relative;
@@ -208,6 +211,7 @@ html body a:hover {
     padding: 15px 0;
     cursor: pointer;
   }
+
   .flag {
     position: absolute;
     display: flex;
@@ -219,6 +223,11 @@ html body a:hover {
   }
 }
 
+.d-none {
+  display: none;
+}
+
+
 
 
 
@@ -260,8 +269,6 @@ html body a:hover {
 }
 
 
-
-
 .footer {
   position: relative;
 
@@ -333,26 +340,14 @@ html body a:hover {
 }
 
 
-
-
-
-
-.d-none {
-  display: none;
-}
-
-
-
 // ------------------------------Index Page-------------
 
 .slider {
   padding-top: 15px;
-
   .slider-inner {
     display: flex;
     justify-content: space-between;
   }
-
   .s-left {
     width: 50%;
     padding-top: 50px;
@@ -366,14 +361,12 @@ html body a:hover {
       background-clip: text;
       color: transparent;
     }
-
+    .img {
-    .img{
       display: none;
-      // display: flex;
       align-items: center;
       justify-content: center;
 
-      img{
+      img {
         width: 60%;
       }
     }
@@ -401,7 +394,6 @@ html body a:hover {
       margin-top: 20px;
     }
   }
-
   .s-right {
     width: 50%;
 
@@ -417,23 +409,19 @@ html body a:hover {
   }
 }
 
-
 .our-sec {
   padding-top: 120px;
   padding-bottom: 130px;
-
   .our-sec-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
-
     .os-item {
       width: 30%;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
-
       h1 {
         font-family: 'Roboto-Bold';
         font-size: 89px;
@@ -444,13 +432,11 @@ html body a:hover {
         color: transparent;
         margin-bottom: 20px;
       }
-
       span {
         font-size: 20px;
         color: #000;
         font-weight: 600;
       }
-
       p {
         margin-top: 20px;
         font-size: 16px;
@@ -460,30 +446,21 @@ html body a:hover {
     }
   }
 }
-
 // ------------------------------Index Page END-------------
 
 
 
 
 
-
-
-
-
-
 // ------------------------------Contact Us page-------------
-
 .contact-us {
   padding-top: 50px;
-
   .contact-us-inner {
     .cu-top {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
-
       span {
         display: inline-block;
         padding: 7px 10px;
@@ -493,7 +470,6 @@ html body a:hover {
         border-radius: 50px;
         font-weight: 500;
       }
-
       h1 {
         font-family: 'Roboto-Bold';
         font-size: 48px;
@@ -501,7 +477,6 @@ html body a:hover {
         color: #222222;
         padding: 30px 0;
       }
-
       p {
         font-size: 16px;
         font-weight: 300;
@@ -512,7 +487,6 @@ html body a:hover {
         }
       }
     }
-
     .cu-main {
       margin-top: 70px;
       margin-bottom: 70px;
@@ -532,38 +506,28 @@ html body a:hover {
 }
 
 
-
-
 // ------------------------------Contact Us page End-------------
 
-
-
-
-
 @media (min-width: 576px) {
   .container {
     max-width: 540px;
   }
 }
-
 @media (min-width: 768px) {
   .container {
     max-width: 720px;
   }
 }
-
 @media (min-width: 992px) {
   .container {
     max-width: 960px;
   }
 }
-
 @media (min-width: 1200px) {
   .container {
     max-width: 1080px;
   }
 }
-
 @media (min-width: 1441px) {
   .container {
     max-width: 1280px;
@@ -577,49 +541,49 @@ html body a:hover {
 
 
 @media (max-width : 1200px) {
-  .slider .s-left h1{
+  .slider .s-left h1 {
     font-size: 68px;
   }
-  .slider .s-left h3{
+  .slider .s-left h3 {
     font-size: 46px;
   }
 }
 
 @media (max-width : 992px) {
-  .slider .s-left{
+  .slider .s-left {
     width: 70%;
   }
-  .slider .s-right{
+  .slider .s-right {
     width: 30%;
   }
-
+  .slider .s-right .s-right-inner img {
-  .slider .s-right .s-right-inner img{
     right: unset;
     left: -40%;
   }
-
+  .our-sec .our-sec-inner .os-item h1 {
-  .our-sec .our-sec-inner .os-item h1{
     font-size: 68px;
   }
 }
 
 
 @media (max-width : 768px) {
-
+  .main-section.index .effect-one {
-  .blue-btn{
+    display: none;
+  }
+  .footer.index .effect-2 {
+    display: none;
+  }
+  .blue-btn {
     padding: 11px 49px;
   }
-
+  .select-box .flag {
-  .select-box .flag{
     top: 10px;
   }
-
+  .header {
-  .header{
     height: unset;
     flex-direction: column;
     position: relative;
-
+    .header-logo {
-    .header-logo{
       width: 100%;
       padding-top: 25px;
       padding-bottom: 20px;
@@ -627,88 +591,99 @@ html body a:hover {
 
     }
   }
-  .header .header-side{
+  .header .header-side {
     width: 100%;
     padding-top: 12px;
-
+    .hs-side {
-    .hs-side{
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
-
+      a {
-      a{
         display: inline-block;
       }
     }
   }
-  
+  .header .select-box {
-
-  .header .select-box{
     position: absolute;
     right: 0;
     top: 15px;
   }
-
+  .slider .s-right {
-  .main-section .effect-one{
     display: none;
   }
-  .slider .s-right{
+  .slider .s-left {
-    display: none;
-  }
-  .slider .s-left{
     width: 100%;
     padding-top: 30px;
   }
-
+  .slider .s-left .img {
-  .slider .s-left .img{
     display: flex;
   }
-
+  .slider .s-left h1 {
-  .slider .s-left h1{
     font-size: 50px;
     text-align: center;
     margin-bottom: 10px;
   }
-
+  .slider .s-left h3 {
-  .slider .s-left h3{
     font-size: 32px;
     margin-bottom: 25px;
     margin-top: 10px;
   }
-  .slider .s-left strong{
+  .slider .s-left strong {
     font-size: 20px;
   }
-
+  .our-sec {
-  .our-sec{
     padding-top: 70px;
     padding-bottom: 40px;
   }
-
+  .our-sec .our-sec-inner {
-  .our-sec .our-sec-inner{
     flex-direction: column;
   }
-  .our-sec .our-sec-inner .os-item{
+  .our-sec .our-sec-inner .os-item {
     width: 100%;
     margin-bottom: 30px;
   }
-  .our-sec .our-sec-inner .os-item h1{
+  .our-sec .our-sec-inner .os-item h1 {
     font-size: 40px;
   }
-
+  .footer .footter-inner .f-midd {
-
-  .footer .footter-inner .f-midd{
     flex-direction: column;
   }
-
+  .footer .footter-inner .f-midd .footer-item {
-  .footer .footter-inner .f-midd .footer-item{
     width: 100%;
     align-items: unset;
     justify-content: unset;
     margin-bottom: 15px;
   }
-
+  .contact-us {
-  .footer .effect-2{
+    padding-top: 35px;
-    display: none;
   }
+  .contact-us .contact-us-inner .cu-top h1 {
+    text-align: center;
+    font-size: 32px;
+    padding: 25px 0;
+  }
+  .contact-us .contact-us-inner .cu-top p {
+    text-align: center;
+    line-height: 24px;
+  }
+  .main-section .effect-one {
+    left: -133px;
+    top: 183px;
+  }
+  .contact-us .contact-us-inner .cu-main .cu-main-inner {
+    width: 100%;
+  }
+  .contact-us .contact-us-inner .cu-main {
+    padding: 40px 15px;
+  }
+  .contact-us .contact-us-inner .cu-main {
+    margin-bottom: 25px;
+  }
+  .footer.contact-us .effect-2 {
+    height: 336px;
+    right: -42px;
+    bottom: 344px
+  }
+
 }

contact-us.html

@@ -17,8 +17,8 @@
                     <img src="./assets/image/logo.png" alt="">
                 </div>
                 <div class="header-side">
-                    <div>
+                    <div class="hs-side">
-                        <a class="white-btn" href="">Contact us</a>
+                        <a class="white-btn" href="./index.html">Home</a>
                         <a class="blue-btn" href="">Login</a>
                     </div>
                     <div class="select-box js-do-flag">
@@ -38,7 +38,7 @@
 
 
 
-    <section class="main-section">
+    <section class="main-section contact-us">
         <img class="effect-one" src="./assets/image/effect-1.svg" alt="">
 
         <div class="container">
@@ -108,7 +108,7 @@
 
 
     <footer>
-        <div class="footer">
+        <div class="footer contact-us">
             <img class="effect-2" src="./assets/image/effect-2.png" alt="">
 
             <div class="container">

index.html

@@ -38,7 +38,7 @@
 
 
 
-    <section class="main-section">
+    <section class="main-section index">
         <img class="effect-one" src="./assets/image/effect-1.svg" alt="">
 
         <div class="container">
@@ -103,7 +103,7 @@
 
 
     <footer>
-        <div class="footer">
+        <div class="footer index">
             <img class="effect-2" src="./assets/image/effect-2.png" alt="">
 
             <div class="container">