...
 
Commits (3)
.companyInfoContainer {
display: flex;
display: flex;
}
.infoLeft {
width: 50%;
width: 50%;
display: flex;
align-items: center;
}
.infoLeft img {
width: 200px;
height: 70px;
width: 200px;
height: 70px;
}
.infoRight {
width: 50%;
display: flex;
width: 50%;
display: flex;
}
.phoneHolder {
display: flex;
display: flex;
}
.phoneHolder h1 {
font-size: 18px;
line-height: 26px;
font-size: 18px;
line-height: 26px;
}
.phoneHolder div {
display: flex;
margin: 0 16px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
display: flex;
margin: 0 16px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.phoneHolder div span {
margin: 4px;
font-family: openSans, serif;
font-size: 14px;
color: #3f485d;
margin: 4px;
font-family: openSans, serif;
font-size: 14px;
color: #3f485d;
}
.leaflet-container {
width: 100vw;
height: 100%;
width: 100vw;
height: 100%;
}
.agentList {
width: 300px;
color: white;
display: flex;
flex-direction: column;
margin-top: 50px;
width: 300px;
color: white;
display: flex;
flex-direction: column;
margin-top: 50px;
}
.agentList h1 {
background-color: #06163a;
padding: 20px;
font-size: 26px;
line-height: 36px;
font-weight: bold;
background-color: #06163a;
padding: 20px;
font-size: 26px;
line-height: 36px;
font-weight: bold;
}
.warehouseContainer {
display: flex;
flex-direction: column;
height: 300px;
overflow: auto;
display: flex;
flex-direction: column;
height: 300px;
overflow: auto;
}
.warehouseContainer span {
padding: 16px;
background-color: white;
color: black;
font-size: 14px;
font-family: openSans, serif;
border-bottom: 1px solid #ededed;
cursor: pointer;
padding: 16px;
background-color: white;
color: black;
font-size: 14px;
font-family: openSans, serif;
border-bottom: 1px solid #ededed;
cursor: pointer;
}
.agentListContainer {
width: 50%;
position: absolute;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1500;
top: 0;
width: 50%;
position: absolute;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1500;
top: 0;
}
.mapContainer {
position: relative;
}
\ No newline at end of file
position: relative;
height: 500px;
}
/* =============== @media================ */
@media (max-width: 800px) {
.infoLeft {
width: 40%;
}
.infoRight {
width: 60%;
}
.infoLeft img {
width: 170px;
}
}
@media (max-width: 700px) {
.companyInfoContainer {
flex-direction: column;
align-items: center;
}
.infoRight {
margin: 25px 0 0 0;
}
.infoLeft {
width: unset;
}
.infoRight {
width: unset;
}
.phoneHolder {
flex: 1;
}
.agentListContainer {
position: unset;
width: 100%;
}
.mapContainer {
height: auto;
}
.agentList {
width: 100%;
}
.warehouseContainer {
height: auto;
}
.leaflet-container.leaflet-touch {
position: relative;
height: 500px;
}
}
@media (max-width: 500px) {
.phoneHolder {
display: unset;
text-align: center;
}
.phoneHolder div {
text-align: center;
align-items: unset;
}
}
.counterContainer {
margin: 80px 300px;
background: url("https://morz.vamtam.com/wp-content/uploads/2018/01/map-dots-trans.svg") no-repeat scroll center center;
margin: 80px 300px;
background: url("https://morz.vamtam.com/wp-content/uploads/2018/01/map-dots-trans.svg")
no-repeat scroll center center;
}
.counterContainer h4 {
font-size: 80px;
margin-bottom: 40px;
font-family: cabin;
font-size: 80px;
margin-bottom: 40px;
font-family: cabin;
}
.counters {
display: flex;
display: flex;
}
.counters div {
display: flex;
flex-direction: column;
margin-right: 80px;
.counters > div {
display: flex;
}
.counters .conters-row {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.counters div img {
width: 64px;
height: 64px;
margin-bottom: 16px;
.counters .conters-row img {
width: 64px;
height: 64px;
margin-bottom: 16px;
}
.counters h1 {
color: red;
font-size: 48px;
margin-bottom: 16px;
font-family: openSans, serif;
color: red;
font-size: 48px;
margin-bottom: 16px;
font-family: openSans, serif;
}
.counters h2 {
font-size: 18px;
margin-bottom: 16px;
font-weight: bold;
color: #06163a;
font-size: 18px;
margin-bottom: 16px;
font-weight: bold;
color: #06163a;
}
.counters h3 {
font-family: openSans, serif;
font-size: 14px;
color: #3f485d;
line-height: 22px;
font-family: openSans, serif;
font-size: 14px;
color: #3f485d;
line-height: 22px;
text-align: center;
}
.counter{
color: red;
font-size: 48px;
margin-bottom: 16px;
font-family: openSans, serif;
}
\ No newline at end of file
.counter {
color: red;
font-size: 48px;
margin-bottom: 16px;
font-family: openSans, serif;
}
/* ===================== @mdia =============== */
@media (max-width: 800px) {
.counter {
font-size: 2em;
}
.counters .conters-row {
margin: 0 6px;
}
}
@media (max-width: 736px) {
.counters > div {
display: block;
}
.counters .conters-row {
margin: 25px 6px;
}
}
......@@ -26,40 +26,44 @@ const Counter = () => {
<h4>Statistics</h4>
<div className={"counters"}>
<div>
<img src={icTruckDelivery} alt={"package"} />
{isStartCounter ? <CountUp end={100} className={"counter"} /> : ""}
<h2>Delivered Packages</h2>
<h3>
We strongly support best practice sharing across our operations
around the world.
</h3>
<div className="conters-row">
<img src={icTruckDelivery} alt={"package"} />
{isStartCounter ? <CountUp end={100} className={"counter"} /> : ""}
<h2>Delivered Packages</h2>
<h3>
We strongly support best practice sharing across our operations
around the world.
</h3>
</div>
<div className="conters-row">
<img src={icEarth} alt={"package"} />
{isStartCounter ? <CountUp end={100} className={"counter"} /> : ""}
<h2>Delivered Packages</h2>
<h3>
We strongly support best practice sharing across our operations
around the world.
</h3>
</div>
</div>
<div>
<img src={icEarth} alt={"package"} />
{isStartCounter ? <CountUp end={100} className={"counter"} /> : ""}
<h2>Delivered Packages</h2>
<h3>
We strongly support best practice sharing across our operations
around the world.
</h3>
</div>
<div>
<img src={icClient} alt={"package"} />
{isStartCounter ? <CountUp end={100} className={"counter"} /> : ""}
<h2>Delivered Packages</h2>
<h3>
We strongly support best practice sharing across our operations
around the world.
</h3>
</div>
<div>
<img src={icPackage} alt={"package"} />
{isStartCounter ? <CountUp end={100} className={"counter"} /> : ""}
<h2>Delivered Packages</h2>
<h3>
We strongly support best practice sharing across our operations
around the world.
</h3>
<div className="conters-row">
<img src={icClient} alt={"package"} />
{isStartCounter ? <CountUp end={100} className={"counter"} /> : ""}
<h2>Delivered Packages</h2>
<h3>
We strongly support best practice sharing across our operations
around the world.
</h3>
</div>
<div className="conters-row">
<img src={icPackage} alt={"package"} />
{isStartCounter ? <CountUp end={100} className={"counter"} /> : ""}
<h2>Delivered Packages</h2>
<h3>
We strongly support best practice sharing across our operations
around the world.
</h3>
</div>
</div>
</div>
</div>
......
......@@ -4,9 +4,8 @@
/* padding: 0 251px;
height: 250px; */
}
.footerContainer >div{
.footerContainer > div {
display: flex;
}
.footerRight {
display: flex;
......@@ -27,9 +26,13 @@
justify-content: space-evenly;
align-items: flex-start;
height: 100%;
padding-right: 10px;
line-height: normal;
}
.footerRightHolder > div {
margin: 10px 0;
width: 100%;
display: flex;
}
.tradeMark {
......@@ -72,13 +75,15 @@
justify-content: space-evenly;
align-items: flex-start;
height: 100%;
width: 100%;
}
.footerRightEmail input {
width: 450px;
width: 100%;
}
.btnFooterEmail {
/* width: 100%; */
display: inline-block;
text-align: center;
cursor: pointer;
......@@ -86,9 +91,10 @@
z-index: 0;
vertical-align: middle;
padding: 15px 30px;
white-space: nowrap;
color: white;
background-color: #ff3514;
border: 1px solid transparent;
/* margin-top: 10px; */
}
......@@ -96,4 +102,37 @@
margin: 0 8px;
font-family: openSans, serif;
font-size: 14px;
white-space: nowrap;
}
/* ================ @media ==================== */
@media (max-width: 830px) {
.footerContainer > div {
flex-direction: column;
}
.footerLeft {
width: 100%;
}
.footerRight {
width: 100%;
}
.footerLeftHolder {
align-items: center;
}
.footerLeftHolder > div {
margin: 5px 0;
}
}
@media (max-width: 800px) {
.leftTitle {
font-size: 1.3em;
}
.footerRightMenu span {
font-size: 12px;
}
}
@media (max-width: 400px) {
.footerRightMenu span {
letter-spacing: -1px;
margin: 0 4px;
}
}
......@@ -9,7 +9,8 @@
.footerMenuHolder {
display: flex;
flex-direction: column;
width: 33%;
/* width: 33%; */
text-align: center;
}
.footerMenuHolder span {
......@@ -33,4 +34,25 @@
display: inline-block;
font-family: openSans, serif;
font-size: 14px;
white-space: nowrap;
}
.footerMenuContainer > div {
display: flex;
flex: 1;
justify-content: space-around;
}
/* ============================= @media =================== */
@media (max-width: 700px) {
.footerMenuContainer > div {
flex-direction: column;
}
.footerMenuHolder {
margin: 20px 0;
}
}
@media (max-width: 368px) {
.footerMenuHolder button {
padding: 15px 15px;
}
}
......@@ -4,46 +4,51 @@ import "./index.css";
const FooterMenu = () => {
return (
<div className={"footerMenuContainer componentRow"}>
<div className={"footerMenuHolder"}>
<span>Services</span>
<span>Air Freight</span>
<span>Sea Freight</span>
<span>Land Transport</span>
<span>Groupage</span>
<span>Consultancy</span>
<span>Value Added Services</span>
</div>
<div className={"footerMenuHolder"}>
<span>Company</span>
<span>About</span>
<span>Expertise</span>
<span>Sustainability</span>
<span>News & Media</span>
<span>Case Studies</span>
<span>Contacts</span>
</div>
<div className={"footerMenuHolder"}>
<span>Industries</span>
<span>Chemicals</span>
<span>DIY</span>
<span>Automotive</span>
<span>Consumer Goods</span>
<span>Life Science</span>
<span>Foreign Trade</span>
<div>
<div className={"footerMenuHolder"}>
<span>Services</span>
<span>Air Freight</span>
<span>Sea Freight</span>
<span>Land Transport</span>
<span>Groupage</span>
<span>Consultancy</span>
<span>Value Added Services</span>
</div>
<div className={"footerMenuHolder"}>
<span>Company</span>
<span>About</span>
<span>Expertise</span>
<span>Sustainability</span>
<span>News & Media</span>
<span>Case Studies</span>
<span>Contacts</span>
</div>
</div>
<div className={"footerMenuHolder"}>
<span>Usefull links</span>
<span>Track Shipment</span>
<span>Warehouse Logistics</span>
<span>Global Agents Network</span>
<span>FAQ</span>
<div>
<button>Get a free rate</button>
<div>
<div className={"footerMenuHolder"}>
<span>Industries</span>
<span>Chemicals</span>
<span>DIY</span>
<span>Automotive</span>
<span>Consumer Goods</span>
<span>Life Science</span>
<span>Foreign Trade</span>
</div>
<div className={"footerMenuHolder"}>
<span>Usefull links</span>
<span>Track Shipment</span>
<span>Warehouse Logistics</span>
<span>Global Agents Network</span>
<span>FAQ</span>
<div>
<button>Get a free rate</button>
</div>
</div>
</div>
<div className={"comapnyMenu"} />
{/* <div className={"comapnyMenu"} />
<div className={"IndustriesMenu"} />
<div className={"usefullLink"} />
<div className={"usefullLink"} /> */}
</div>
);
};
......
.h-bottom-place {
border-top: 1px solid rgba(255, 255, 255, 0.2);
height: 30px;
color: white;
border-top: 1px solid rgba(255, 255, 255, 0.2);
height: 30px;
color: white;
}
.h-bottom-place {
display: flex;
position: relative;
display: flex;
position: relative;
}
.b-left-navbar {
display: flex;
width: 85%;
display: flex;
width: 85%;
}
.b-left-navbar > ul {
display: flex;
padding: 10px 0;
display: flex;
padding: 10px 0;
}
.b-left-navbar > ul > li {
margin: 0 20px;
cursor: pointer;
position: relative;
margin: 0 1em;
cursor: pointer;
position: relative;
white-space: nowrap;
}
.b-left-navbar ul.hover {
display: block;
display: block;
}
.b-left-navbar > ul ul {
position: absolute;
background-color: white;
color: black;
box-shadow: 1px 1px 30px -10px rgba(0, 0, 0, 0.7);
display: none;
top: 30px;
position: absolute;
background-color: white;
color: black;
box-shadow: 1px 1px 30px -10px rgba(0, 0, 0, 0.7);
display: none;
top: 30px;
}
.b-left-navbar > ul ul.navbarShowDetails {
display: block;
-webkit-animation: scale-up-ver-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
animation: scale-up-ver-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
z-index: 5;
display: block;
-webkit-animation: scale-up-ver-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1)
both;
animation: scale-up-ver-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
z-index: 5;
}
.b-left-navbar > ul ul.navbarShowDetails:before {
content: "";
position: absolute;
left: 10px;
top: -12px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
content: "";
position: absolute;
left: 10px;
top: -12px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
border-bottom: 15px solid white;
}
.b-left-navbar > ul ul.navbarHideDetails {
display: block;
-webkit-transform: scaleX(0) scaleY(0);
transform: scaleX(0) scaleY(0);
-webkit-transform-origin: 0;
transform-origin: 0;
-webkit-animation: scale-down-ver-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation: scale-down-ver-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: block;
-webkit-transform: scaleX(0) scaleY(0);
transform: scaleX(0) scaleY(0);
-webkit-transform-origin: 0;
transform-origin: 0;
-webkit-animation: scale-down-ver-top 0.4s
cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation: scale-down-ver-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.b-left-navbar > ul ul li {
padding: 15px 50px;
white-space: nowrap;
transition: color 0.2s linear;
padding: 15px 50px;
white-space: nowrap;
transition: color 0.2s linear;
}
.b-left-navbar > ul ul li:hover {
transition: color 0.2s linear;
background-color: rgb(238, 238, 238);
color: rgb(255, 81, 0);
transition: color 0.2s linear;
background-color: rgb(238, 238, 238);
color: rgb(255, 81, 0);
}
#navBox-holder a{
font-family: openSans, serif;
font-size: 16px;
#navBox-holder a {
font-family: openSans, serif;
font-size: 1em;
}
.b-right-search {
width: 15%;
width: 15%;
}
@-webkit-keyframes scale-down-ver-top {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 0;
}
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 0;
}
}
@keyframes scale-down-ver-top {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 0;
}
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 0;
}
}
@-webkit-keyframes scale-up-ver-top {
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
}
@keyframes scale-up-ver-top {
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
}
......@@ -2,73 +2,73 @@ import React from "react";
import "./index.css";
const HeaderBottom = props => {
const navBar = props.data;
let timer = {};
const navBar = props.data;
let timer = {};
const mouseOut = e => {
let menu = e.currentTarget;
let timerAttr = menu.attributes.dataTime;
const mouseOut = e => {
let menu = e.currentTarget;
let timerAttr = menu.attributes.dataTime;
clearTimeout(timer[timerAttr]);
clearTimeout(timer[timerAttr]);
timer[timerAttr] = setTimeout(() => {
menu.lastChild.classList.remove = "navbarShowDetails";
menu.lastChild.className = "navbarHideDetails";
}, 400);
};
timer[timerAttr] = setTimeout(() => {
menu.lastChild.classList.remove = "navbarShowDetails";
menu.lastChild.className = "navbarHideDetails";
}, 400);
};
const mouseEnter = e => {
let menu = e.currentTarget;
let timerAttr = menu.attributes.dataTime;
// console.log({ menu });
const mouseEnter = e => {
let menu = e.currentTarget;
let timerAttr = menu.attributes.dataTime;
// console.log({ menu });
clearTimeout(timer[timerAttr]);
clearTimeout(timer[timerAttr]);
timer[timerAttr] = setTimeout(() => {
let currentUl = null;
let ulParent = menu.parentElement;
let allLi = Object.values(ulParent.childNodes);
currentUl = allLi.filter(li => {
return li.lastChild.className === "navbarShowDetails";
});
if (currentUl.length) {
currentUl[0].lastChild.classList.remove = "navbarShowDetails";
currentUl[0].lastChild.className = "navbarHideDetails";
}
menu.lastChild.className = "navbarShowDetails";
}, 400);
};
timer[timerAttr] = setTimeout(() => {
let currentUl = null;
let ulParent = menu.parentElement;
let allLi = Object.values(ulParent.childNodes);
currentUl = allLi.filter(li => {
return li.lastChild.className === "navbarShowDetails";
});
if (currentUl.length) {
currentUl[0].lastChild.classList.remove = "navbarShowDetails";
currentUl[0].lastChild.className = "navbarHideDetails";
}
menu.lastChild.className = "navbarShowDetails";
}, 400);
};
const nav_map = navBar.map((a, index) => {
return (
<li
key={index}
id="li-hover-check"
onMouseOver={mouseEnter}
onMouseLeave={mouseOut}
dataTime={index * 0.9}
>
<a>{a.title}</a>
<ul dataTime={index === 0 ? index + 100 : index / 0.9} className="drop">
{a.child.map((b, index) => {
return (
<li key={index}>
<a>{b}</a>
</li>
);
})}
</ul>
</li>
);
});
return (
<div className="h-bottom-place">
<div className="b-left-navbar">
<ul id="navBox-holder">{nav_map}</ul>
</div>
<div className="b-right-search"></div>
</div>
);
const nav_map = navBar.map((a, index) => {
return (
<li
key={index}
id="li-hover-check"
// onMouseOver={mouseEnter}
// onMouseLeave={mouseOut}
dataTime={index * 0.9}
>
<a>{a.title}</a>
<ul dataTime={index === 0 ? index + 100 : index / 0.9} className="drop">
{a.child.map((b, index) => {
return (
<li key={index}>
<a>{b}</a>
</li>
);
})}
</ul>
</li>
);
});
return (
<div className="h-bottom-place">
<div className="b-left-navbar">
<ul id="navBox-holder">{nav_map}</ul>
</div>
<div className="b-right-search"></div>
</div>
);
};
export default HeaderBottom;
.h-Top-place {
flex: 1;
display: flex;
padding: 10px 0;
flex: 1;
display: flex;
padding: 10px 0;
}
.h-p-left {
display: flex;
height: 100%;
width: 140px;
display: flex;
height: 100%;
width: 140px;
}
.web-logo {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*background: rgba(255, 255, 255, 0.4);*/
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*background: rgba(255, 255, 255, 0.4);*/
border-radius: 10px;
}
.web-logo img{
width: 100%;
.web-logo img {
width: 100%;
}
.h-p-right {
width: calc(100% - 210px);
}
/* width: calc(100% - 210px); */
flex: 1;
display: flex;
.h-p-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.r-col-left {
width: calc(100% - 260px);
display: flex;
padding-right: 15px;
justify-content: flex-end;
align-items: center;
width: calc(100% - 260px);
display: flex;
padding-right: 15px;
justify-content: flex-end;
align-items: center;
}
.r-col-left ul {
display: flex;
display: flex;
}
.r-col-left ul li {
margin: 5px;
cursor: pointer;
margin: 5px;
cursor: pointer;
}
.r-col-right {
width: 260px;
display: flex;
width: 260px;
display: flex;
justify-content: center;
justify-content: center;
align-items: center;
align-items: center;
}
.r-get-free {
padding: 15px 30px;
border: 1px solid white;
cursor: pointer;
width: 100%;
transition: all 0.3s linear;
padding: 15px 30px;
border: 1px solid white;
cursor: pointer;
width: 100%;
transition: all 0.3s linear;
}
.r-get-free:hover {
transition: all 0.3s linear;
border: 1px solid orangered;
color: orangered;
transition: all 0.3s linear;
border: 1px solid orangered;
color: orangered;
}
.search-icon {
width: 20px;
height: 20px;
}
.search-icon img {
width: 100%;
cursor: pointer;
}
.menuIcon {
width: 20px;
height: 20px;
margin: 14px;
}
.menuIcon span {
width: 100%;
border-bottom: 2px solid black;
display: flex;
flex-direction: column;
/* line-height: normal; */
height: 4px;
}
/* ============= @media =================== */
@media (max-width: 800px) {
.h-Top-place {
padding: unset;
}
.h-p-left {
}
}
import React from 'react';
import React from "react";
import "./index.css";
import logo from "../../../Assets/Image/lg_kws.png"
import lgWhite from "../../../Assets/Image/lg_kwsl_white.png"
const HeaderTop = () => {
return (
<div className="h-Top-place">
<div className="h-p-left">
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="web-logo">
<img alt="logo" src={lgWhite}/>
{/*<img alt="logo" src={logo}/>*/}
</a>
</div>
<div className="h-p-right">
</div>
</div>);
import logo from "../../../Assets/Image/lg_kws.png";
import lgWhite from "../../../Assets/Image/lg_kwsl_white.png";
import search from "../../../Assets/Icon/search.png";
const HeaderTop = props => {
return (
<div className="h-Top-place">
<div className="h-p-left">
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="web-logo">
{props.width > 800 ? (
<img alt="logo" src={lgWhite} />
) : (
<img alt="logo" src={logo} />
)}
</a>
</div>
{props.width < 800 ? (
<div className="h-p-right">
<div className="search-icon">
<img src={search} alt="search" />
</div>
<div className="menuIcon">
<span></span>
<span></span>
<span></span>
</div>
</div>
) : (
""
)}
</div>
);
};
export default HeaderTop;
\ No newline at end of file
export default HeaderTop;
.header-container {
height: 135px;
display: flex;
flex-direction: column;
padding: 0 75px;
color: white;
height: 135px;
display: flex;
flex-direction: column;
padding: 0 75px;
color: white;
}
.header-tuning {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 10;
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 10;
}
/* =============== @media ================= */
@media (max-width: 1065px) {
.header-container {
padding: 0 10px;
}
}
@media (max-width: 800px) {
.header-container {
padding: 0 10px;
height: 75px;
background-color: white;
}
.header-tuning {
position: unset;
}
}
import React from "react";
import React, { useState, useEffect } from "react";
import "./index.css";
import HeaderTop from "./HeaderTop";
import HeaderBottom from "./HeaderBottom";
const Header = () => {
const navBarMenus = [
{title: "Home", child: ["home Classic", "home Modern"]},
{title: "Company", child: ["home Classic", "home Modern"]},
{title: "Services", child: ["home Classic", "home Modern"]},
{title: "News & Media", child: ["home Classic", "home Modern"]},
{title: "Resources", child: ["home Classic", "home Modern"]},
{title: "Features", child: ["home Classic", "home Modern"]},
{title: "Contacts", child: ["home Classic", "home Modern"]}
];
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return (
<div className={"header-tuning"}>
<header className="header-container">
<HeaderTop/>
<HeaderBottom data={navBarMenus}/>
</header>
</div>
);
return () => {
window.removeEventListener("resize", handleResize);
};
});
console.log({ width });
const navBarMenus = [
{ title: "Home", child: ["home Classic", "home Modern"] },
{ title: "Company", child: ["home Classic", "home Modern"] },
{ title: "Services", child: ["home Classic", "home Modern"] },
{ title: "News & Media", child: ["home Classic", "home Modern"] },
{ title: "Resources", child: ["home Classic", "home Modern"] },
{ title: "Features", child: ["home Classic", "home Modern"] },
{ title: "Contacts", child: ["home Classic", "home Modern"] }
];
return (
<div className={"header-tuning"}>
<header className="header-container">
<HeaderTop width={width} />
{width > 800 ? <HeaderBottom data={navBarMenus} /> : ""}
</header>
</div>
);
};
export default Header;
import React, {useState} from 'react';
import 'leaflet/dist/leaflet.css';
import {Map, Marker, Popup, TileLayer} from 'react-leaflet';
import L from 'leaflet';
import './index.css';
import React, { useState } from "react";
import "leaflet/dist/leaflet.css";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import L from "leaflet";
import "./index.css";
const HomeMap = () => {
const [position, setPosition] = useState([53.54026794433594, 10.002835273742676]);
const [position, setPosition] = useState([
53.54026794433594,
10.002835273742676
]);
const pointerIcon = new L.Icon({
iconUrl: "https://image.flaticon.com/icons/svg/64/64113.svg",
iconRetinaUrl: "https://image.flaticon.com/icons/svg/64/64113.svg",
iconSize: [41, 51],
iconAnchor: [20, 51],
});
const warehouses = [
{
id: 1,
country: "Germany",
address: "Office NO.1509 , Überseeallee 10 ,Hafencity 20457 Hamburg , Germany",
telephone: 'Tel : +49 040',
mobile: "Mobile : +49 172 5350007",
location: [53.54026794433594, 10.002835273742676]
},
{
id: 2,
country: "UAE",
address: "Office No. 2405 , Almanara Tower ,Business Bay ",
telephone: 'Tel : +971 4 3286222',
mobile: "Mobile : +971 50 4565001",
location: [25.2068391, 55.2688788]
}
];
const pointerIcon = new L.Icon({
iconUrl: "https://image.flaticon.com/icons/svg/64/64113.svg",
iconRetinaUrl: "https://image.flaticon.com/icons/svg/64/64113.svg",
iconSize: [41, 51],
iconAnchor: [20, 51]
});
const warehouses = [
{
id: 1,
country: "Germany",
address:
"Office NO.1509 , Überseeallee 10 ,Hafencity 20457 Hamburg , Germany",
telephone: "Tel : +49 040",
mobile: "Mobile : +49 172 5350007",
location: [53.54026794433594, 10.002835273742676]
},
{
id: 2,
country: "UAE",
address: "Office No. 2405 , Almanara Tower ,Business Bay ",
telephone: "Tel : +971 4 3286222",
mobile: "Mobile : +971 50 4565001",
location: [25.2068391, 55.2688788]
}
];
const openPopup = marker => {
console.log({ marker });
};
const openPopup = (marker) => {
console.log({marker})
};
const onMarkerClicked = id => {
// console.log({MEhrad:});
document.getElementsByClassName("leaflet-marker-icon")[id - 1].click();
setPosition(warehouses[id - 1].location);
};
return (
<div className={"mapContainer"} style={{ width: "100%" }}>
<div className={"agentListContainer"}>
<div className={"agentList"}>
<h1>Warehouse</h1>
<div ref={openPopup} className={"warehouseContainer"}>
{warehouses.map(warehouse => {
return (
<span onClick={() => onMarkerClicked(warehouse.id)}>
{warehouse.country}
</span>
);
})}
</div>
</div>
</div>
const onMarkerClicked = (id) => {
// console.log({MEhrad:});
document.getElementsByClassName('leaflet-marker-icon')[id-1].click();
setPosition(warehouses[id - 1].location);
};
return (
<div className={"mapContainer"} style={{height: '500px', width: '100%'}}>
<div className={"agentListContainer"}>
<div className={"agentList"}>
<h1>Warehouse</h1>
<div ref={openPopup} className={"warehouseContainer"}>
{warehouses.map(warehouse => {
return <span onClick={() => onMarkerClicked(warehouse.id)}>{warehouse.country}</span>
})}
</div>
</div>
</div>
<Map scrollWheelZoom={false} center={position} zoom={13}>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
{warehouses.map(warehouse => {
return (
<Marker ref={openPopup} position={warehouse.location} icon={pointerIcon}>
<Popup>
<div className="markerPopUp">
<div className="markerTitle">Address:{warehouse.address}</div>
<div className="markerButton">Tel: {warehouse.telephone}</div>
<div className="markerButton">Tel: {warehouse.mobile}</div>
</div>
</Popup>
</Marker>
)
})}
</Map>
</div>
);
<Map scrollWheelZoom={false} center={position} zoom={13}>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
{warehouses.map(warehouse => {
return (
<Marker
ref={openPopup}
position={warehouse.location}
icon={pointerIcon}
>
<Popup>
<div className="markerPopUp">
<div className="markerTitle">Address:{warehouse.address}</div>
<div className="markerButton">Tel: {warehouse.telephone}</div>
<div className="markerButton">Tel: {warehouse.mobile}</div>
</div>
</Popup>
</Marker>
);
})}
</Map>
</div>
);
};
export default HomeMap;
\ No newline at end of file
export default HomeMap;
......@@ -7,7 +7,7 @@
line-height: normal;
}
.secondScreenBox > div:nth-child(1) {
.secondScreenBox > .firstElementFor-responsive {
flex: 1;
padding-top: 130px;
}
......@@ -44,7 +44,7 @@
}
.second-subject h1 {
font-size: 60px;
font-size: 0.9em;
font-weight: bold;
}
......@@ -57,14 +57,22 @@
font-size: 1.8vw;
font-weight: 300;
}
.secondElementFor-responsive {
display: flex;
}
.secondScreenBox > div:nth-child(2) {
flex: 2.5;
}
.second-img {
flex: 1.5;
background-size: cover;
background: url("../../Assets/Image/modern-1.jpg") no-repeat center;
transform: translateX(111px);
background-size: cover;
}
.second-title {
flex: 1;
}
.secondScreenBox > div:nth-child(3) {
flex: 1;
padding-top: 130px;
......@@ -118,3 +126,58 @@
font-family: openSans, serif;
width: 80%;
}
/* =============== @media================= */
@media (max-width: 1030px) {
.second-title-box {
padding: 10px;
}
.second-img {
transform: translateX(40px);
}