diff --git a/assets/css/style.css b/assets/css/style.css index 6a5f4b7..6355abd 100644 --- a/assets/css/style.css +++ b/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 */ diff --git a/assets/css/style.css.map b/assets/css/style.css.map index 82a65fb..c109c0b 100644 --- a/assets/css/style.css.map +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/assets/image/mobile-res.png b/assets/image/mobile-res.png new file mode 100644 index 0000000..c23c2b2 Binary files /dev/null and b/assets/image/mobile-res.png differ diff --git a/assets/js/main.js b/assets/js/main.js index e69de29..2453b2a 100644 --- a/assets/js/main.js +++ b/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') + } + }) + }) +} diff --git a/assets/scss/style.scss b/assets/scss/style.scss index a301a7c..0780f65 100644 --- a/assets/scss/style.scss +++ b/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------------- @@ -542,4 +568,147 @@ html body a:hover { .container { 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; + } } \ No newline at end of file diff --git a/contact-us.html b/contact-us.html index 76e2fc1..6665ee4 100644 --- a/contact-us.html +++ b/contact-us.html @@ -21,8 +21,15 @@ Contact us Login -
- eng +
+ +
+ + +
diff --git a/index.html b/index.html index 0d27b38..a89d4d3 100644 --- a/index.html +++ b/index.html @@ -17,19 +17,26 @@
-
+ -
- eng +
+ +
+ + +
- +
@@ -39,6 +46,10 @@

AI-Powered

+
+ + +

Tender
Management

Win more tenders, automatically!

Our platform finds tenders tailored to your business,
automates document handling, and @@ -48,7 +59,6 @@

-