diff --git a/packages/web/public/index.html b/packages/web/public/index.html index 473ae4a..19f7586 100644 --- a/packages/web/public/index.html +++ b/packages/web/public/index.html @@ -6,7 +6,6 @@ rel="shortcut icon" href="https://i.ibb.co/vzWDHft/favicon-ico.png" /> - diff --git a/packages/web/src/components/frontPage/components/pannel1/pannel1.tsx b/packages/web/src/components/frontPage/components/pannel1/pannel1.tsx index 4e4b4b9..f9b088a 100644 --- a/packages/web/src/components/frontPage/components/pannel1/pannel1.tsx +++ b/packages/web/src/components/frontPage/components/pannel1/pannel1.tsx @@ -71,6 +71,9 @@ export const Pannel1 = () => { fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 303" + style={{ maxHeight: "320px" }} + width="100%" + preserveAspectRatio="none" > * { - flex: 1 1 450px; + flex: 1 0 450px; } `; //// CROWN SVG 1 export const SvgCrown = styled.div` - width: 480px; + min-width: 480px; `; export const FixCrown = styled.div` position: relative; - flex: 1 1 500px; + flex: 1 0 500px; + min-height: 500px; `; export const VerticallyCenteredDiv = styled.div` - margin: 0; position: absolute; top: 35%; left: 50%; @@ -33,8 +35,8 @@ export const VerticallyCenteredDiv = styled.div` //// TEXT ON THE RIGHT 1 export const FixText = styled.div` position: relative; - flex: 2 2 750px; - margin-top: -100px; + flex: 2 0 750px; + min-height: 600px; `; export const TitleTextButton = styled.div` @@ -42,9 +44,9 @@ export const TitleTextButton = styled.div` color: white; font-weight: bold; text-align: center; + height: auto; `; export const VerticallyCenteredText = styled.div` - margin: 0; position: absolute; top: 40%; left: 50%; @@ -55,7 +57,7 @@ export const VerticallyCenteredText = styled.div` export const Title = styled.div` font-size: 110px; - width: auto; + text-align: center; `; export const RandomText = styled.div` diff --git a/packages/web/src/components/frontPage/components/pannel2/style.tsx b/packages/web/src/components/frontPage/components/pannel2/style.tsx index acab47a..b41aa25 100644 --- a/packages/web/src/components/frontPage/components/pannel2/style.tsx +++ b/packages/web/src/components/frontPage/components/pannel2/style.tsx @@ -2,14 +2,15 @@ import styled from "@emotion/styled"; export const StyledPannel2 = styled.div` background: white; - height: 80vh; + height: 700px; display: flex; position: relative; - + align-content: center; + align-items: center; flex-wrap: wrap; flex-direction: row; & > * { - flex: 1 1 450px; + flex: 1 0 450px; } `; export const VerticallyCenteredDiv = styled.div` @@ -22,9 +23,8 @@ export const VerticallyCenteredDiv = styled.div` `; export const Text = styled.div` - margin: 0; position: absolute; - top: 40%; + top: 55%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); @@ -39,10 +39,11 @@ export const TextStyling = styled.div` `; export const FixText = styled.div` position: relative; - flex: 2 2 750px; + flex: 2 0 850px; + min-height: 500px; `; export const FixChart = styled.div` position: relative; - flex: 1 1 500px; - height: 500px; + flex: 1 0 600px; + min-height: 600px; `;