Changed style for header-container
This commit is contained in:
parent
46e9124f81
commit
957c7cd741
@ -5,7 +5,7 @@ import styled from "styled-components";
|
||||
import { Text, utils } from "asc-web-components";
|
||||
const { tablet } = utils.device;
|
||||
const StyledBodyAdvantages = styled.div`
|
||||
margin-top: 40px;
|
||||
margin-top: 42px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -20,35 +20,37 @@ const StyledBodyAdvantages = styled.div`
|
||||
.payments-icon-enterprise {
|
||||
position: absolute;
|
||||
margin-left: 666px;
|
||||
z-index: 0;
|
||||
}
|
||||
/*
|
||||
.first_icon {
|
||||
margin: 64px 864px 193px 32px;
|
||||
}
|
||||
.second_icon {
|
||||
margin: 104px 864px 193px 32px;
|
||||
}
|
||||
.third_icon {
|
||||
margin: 144px 864px 193px 32px;
|
||||
margin: 64px 0px 193px 32px;
|
||||
} */
|
||||
/* .second_icon {
|
||||
margin: 104px 0px 193px 32px;
|
||||
} */
|
||||
/* .third_icon {
|
||||
margin: 144px 0px 193px 32px;
|
||||
}
|
||||
.four_icon {
|
||||
margin: 184px 864px 193px 32px;
|
||||
margin: 184px 0px 193px 32px;
|
||||
}
|
||||
.five_icon {
|
||||
margin: 224px 864px 193px 32px;
|
||||
}
|
||||
.payments-body {
|
||||
/* margin-right: 609px; */
|
||||
margin: 224px 0px 193px 32px;
|
||||
} */
|
||||
/* .payments-body {
|
||||
/* margin-right: 609px;
|
||||
margin-bottom: 22px;
|
||||
margin-left: 64px;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: #555f65;
|
||||
}
|
||||
.first-advantages {
|
||||
} */
|
||||
/* .first-advantages {
|
||||
margin-top: 37px;
|
||||
/* width: 247px; */
|
||||
}
|
||||
/* width: 247px;
|
||||
} */
|
||||
.second-advantages {
|
||||
/* width: 278px; */
|
||||
}
|
||||
@ -69,76 +71,207 @@ const StyledBodyAdvantages = styled.div`
|
||||
line-height: 30px;
|
||||
margin: 0px 32px 0 32px;
|
||||
}
|
||||
.payments-body {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.styled-advantages {
|
||||
margin-top: 34px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
.styled-first-advantages {
|
||||
margin-top: 34px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
.styled-second-advantages {
|
||||
margin-top: 18px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.styled-third-advantages {
|
||||
margin-top: 17px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.styled-four-advantages {
|
||||
margin-top: 17px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.styled-five-advantages {
|
||||
margin-top: 17px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.advantages {
|
||||
margin-left: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
/* .second-advantages {
|
||||
margin-left: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.first-advantages {
|
||||
margin-left: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.third-advantages {
|
||||
margin-left: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.four-advantages {
|
||||
margin-left: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.five-advantages {
|
||||
margin-left: 8px;
|
||||
margin-top: 4px;
|
||||
} */
|
||||
@media ${tablet} {
|
||||
width: 568px;
|
||||
height: 249px;
|
||||
|
||||
margin-top: 41px;
|
||||
.main_icon {
|
||||
display: none;
|
||||
}
|
||||
.advantages-enterprise {
|
||||
width: 536px;
|
||||
.styled-first-advantages {
|
||||
margin-top: 33px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
.payments-body {
|
||||
margin-bottom: 22px;
|
||||
.styled-second-advantages {
|
||||
margin-top: 17px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.styled-third-advantages {
|
||||
margin-top: 16px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.styled-four-advantages {
|
||||
margin-top: 16px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.styled-five-advantages {
|
||||
margin-top: 17px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@media (max-width: 632px) {
|
||||
margin-top: 16px;
|
||||
width: 311px;
|
||||
height: 301px;
|
||||
.main_icon {
|
||||
display: none;
|
||||
.styled-first-advantages {
|
||||
margin-top: 33px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
.advantages-enterprise {
|
||||
width: 279px;
|
||||
height: 60px;
|
||||
.styled-second-advantages {
|
||||
margin-top: 17px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
.payments-body {
|
||||
width: 247px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
.styled-third-advantages {
|
||||
margin-top: 16px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
.four-advantages {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.styled-four-advantages {
|
||||
margin-top: 16px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
}
|
||||
.first_icon {
|
||||
margin: 93px 864px 193px 32px;
|
||||
}
|
||||
.second_icon {
|
||||
margin: 133px 864px 193px 32px;
|
||||
}
|
||||
.third_icon {
|
||||
margin: 182px 864px 193px 32px;
|
||||
}
|
||||
.four_icon {
|
||||
margin: 220px 864px 193px 32px;
|
||||
}
|
||||
.five_icon {
|
||||
margin: 269px 864px 193px 32px;
|
||||
|
||||
.styled-five-advantages {
|
||||
margin-top: 17px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledFirstAdvantages = styled.div``;
|
||||
const StyledSecondAdvantages = styled.div``;
|
||||
const AdvantagesContainer = ({ t }) => {
|
||||
return (
|
||||
<StyledBodyAdvantages>
|
||||
<Text className="advantages-enterprise">{t("SubscriptionGet")}</Text>
|
||||
<Text className="payments-body first-advantages">
|
||||
{t("OnlyOfficeEditor")}
|
||||
</Text>
|
||||
<Text className="payments-body second-advantages">
|
||||
{t("PrivateRooom")}
|
||||
</Text>
|
||||
<Text className="payments-body third-advantages">{t("WebEditors")}</Text>
|
||||
<Text className="payments-body four-advantages">
|
||||
{t("FunctionalityAndSecurity")}
|
||||
</Text>
|
||||
<Text className="payments-body five-advantages">
|
||||
{t("ProfessionalTechSupport")}
|
||||
</Text>
|
||||
<div className="styled-first-advantages">
|
||||
<img
|
||||
className="first_icon"
|
||||
src="images/payments_enterprise_cubes.svg"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Icon"
|
||||
/>
|
||||
<Text className="payments-body advantages">
|
||||
{t("OnlyOfficeEditor")}
|
||||
</Text>
|
||||
</div>
|
||||
<div className="styled-second-advantages">
|
||||
<img
|
||||
className="second_icon"
|
||||
src="images/payments_enterprise_lock.svg"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Icon"
|
||||
/>
|
||||
<Text className="payments-body advantages">{t("PrivateRooom")}</Text>
|
||||
</div>
|
||||
<div className="styled-third-advantages">
|
||||
<img
|
||||
className="third_icon"
|
||||
src="images/payments_enterprise_smartphone.svg"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Icon"
|
||||
/>
|
||||
<Text className="payments-body advantages">{t("WebEditors")}</Text>
|
||||
</div>
|
||||
<div className="styled-four-advantages">
|
||||
<img
|
||||
className="four_icon"
|
||||
src="images/payments_enterprise_update.svg"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Icon"
|
||||
/>
|
||||
<Text className="payments-body advantages">
|
||||
{t("FunctionalityAndSecurity")}
|
||||
</Text>
|
||||
</div>
|
||||
<div className="styled-five-advantages">
|
||||
<img
|
||||
className="five_icon"
|
||||
src="images/payments_enterprise_help.svg"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Icon"
|
||||
/>
|
||||
<Text className="payments-body advantages">
|
||||
{t("ProfessionalTechSupport")}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<img
|
||||
className="payments-icon-enterprise main_icon"
|
||||
src="images/payments_enterprise.svg"
|
||||
@ -146,45 +279,6 @@ const AdvantagesContainer = ({ t }) => {
|
||||
height="247px"
|
||||
alt="Icon"
|
||||
/>
|
||||
<img
|
||||
className="payments-icon-enterprise first_icon"
|
||||
src="images/payments_enterprise_cubes.svg"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Icon"
|
||||
/>
|
||||
<img
|
||||
className="payments-icon-enterprise second_icon"
|
||||
src="images/payments_enterprise_lock.svg"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Icon"
|
||||
/>
|
||||
|
||||
<img
|
||||
className="payments-icon-enterprise
|
||||
third_icon"
|
||||
src="images/payments_enterprise_smartphone.svg"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Icon"
|
||||
/>
|
||||
<img
|
||||
className="payments-icon-enterprise
|
||||
four_icon"
|
||||
src="images/payments_enterprise_update.svg"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Icon"
|
||||
/>
|
||||
<img
|
||||
className="payments-icon-enterprise
|
||||
five_icon"
|
||||
src="images/payments_enterprise_help.svg"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Icon"
|
||||
/>
|
||||
</StyledBodyAdvantages>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user