diff --git a/src/sections/Kanvas/kanvas_banner.js b/src/sections/Kanvas/kanvas_banner.js index dc43b3f1c9063..c0355ae86048b 100644 --- a/src/sections/Kanvas/kanvas_banner.js +++ b/src/sections/Kanvas/kanvas_banner.js @@ -4,18 +4,21 @@ import KanvasIcon from "./kanvas-icon.svg"; const BannerSectionWrapper = styled.div` - display: flex; - background: #000000; - border-radius: 0% 85% 0% 0% / 0% 80% 0% 0% ; - -webkit-box-shadow: 5px -5px 15px 5px rgba(0,0,0,0.33); - box-shadow: 1px -5px 5px 1px rgba(235,192,23,.5); - - padding: 8rem 6rem 3rem 6rem; - max-width: 1140px; - width: 100%; - margin: auto; - min-height: 25rem; - + display: flex; + flex-wrap: nowrap; + background: #000000; + border-radius: 0% 85% 0% 0% / 0% 80% 0% 0% ; + -webkit-box-shadow: 5px -5px 15px 5px rgba(0,0,0,0.33); + box-shadow: 1px -5px 5px 1px rgba(235,192,23,.5); + gap: 5rem; + padding: 6rem 6rem 6rem 6rem; + max-width: 1140px; + width: 100%; + margin: auto; + min-height: 25rem; + align-content: end; + + div.banner-text { h1 { /* background-color: ${props => props.theme.black}; */ font-weight: 500; @@ -35,7 +38,7 @@ const BannerSectionWrapper = styled.div` } @media screen and (max-width: 448px) { font-size: 38px; - span{ + span { font-size: 48px; } } @@ -44,62 +47,58 @@ const BannerSectionWrapper = styled.div` margin: 1.5rem 0; } } - h2 { - margin-bottom: 1rem; - font-size: 1.95rem; - font-weight: 400; - color: ${props => props.theme.white}; - font-style: italic; - span { + h2 { + margin-bottom: 1rem; + font-size: 1.95rem; + font-weight: 400; + color: ${props => props.theme.white}; + font-style: italic; + span { + font-style: normal; + } + } + h2.readyPlayer { + margin: 2rem 0rem 0rem 0rem; + background-color: black; + position: absolute; + z-index: 1; + padding: 1.5rem; + color: white; font-style: normal; + text-transform: uppercase ; + font-size: 2.5rem; + text-align: center; } - } - h2.readyPlayer { - margin: 2rem 0rem 0rem 0rem; - background-color: black; - position: absolute; - z-index: 1; - padding: 1.5rem; - color: white; - font-style: normal; - text-transform: uppercase ; - font-size: 2.5rem; - text-align: center; - } - - } - .banner-text p { - color: ${props => props.theme.saffronColor}; - margin-bottom: .5rem; - font-weight: 400; - font-size: 1.75rem; - font-style: italic; - min-width: 18rem; - font-family: "Qanelas Soft"; - span { + p { color: ${props => props.theme.saffronColor}; + margin-bottom: .5rem; + font-weight: 400; + font-size: 1.75rem; + font-style: italic; + min-width: 18rem; + font-family: "Qanelas Soft"; + span { + color: ${props => props.theme.saffronColor}; + } } - } - h4 { - text-transform: uppercase; - padding-left: 1rem; - font-style: italic; - font-size: 1.25rem; - color: ${props => props.theme.white}; - span { + h4 { + text-transform: uppercase; padding-left: 1rem; + font-style: italic; + font-size: 1.25rem; + color: ${props => props.theme.white}; + span { + padding-left: 1rem; + } } } - .kanvas-logo { width: 14rem; overflow: hidden; - margin-top: -7rem; - position: relative; - left: 30%; - z-index: 0; - - } + display: flex; + align-self: center; + flex-wrap: nowrap; + } div.accent-bubble { width: 50%; height: 100%; @@ -118,8 +117,6 @@ const BannerSectionWrapper = styled.div` @media screen and (max-width: 1700px) { .kanvas-logo { width: 12rem; - /* right: 12rem; */ - /* margin-top: -5rem; */ } .para { margin-top: -3rem; @@ -127,38 +124,39 @@ const BannerSectionWrapper = styled.div` } @media screen and (max-width: 1200px) { .kanvas-logo { - left: 20%; width: 10rem; - /* right: 8rem; */ - margin-top: -5rem; } - /* border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ; */ + border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ; } @media screen and (max-width: 992px) { .kanvas-logo { width: 8rem; - margin-top: -2rem; - left: 15%; } + .banner-text { + margin-left: 0rem; + margin-bottom: 0rem; + h1 { font-size: 50px; } + h2 { font-size: 1.25rem; } + h4 { font-size: 1rem; } + p { font-size: 1.25rem; } + } + gap: 2.5rem; + min-height: 12rem; + padding: 6rem 2rem 2rem 2rem; border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ; } @media screen and (max-width: 768px) { padding: 8rem 2rem 3rem; .kanvas-logo { - margin-top: -5rem; - margin-right: 2rem; - left: 7%; - min-width: 5rem; + min-width: 6rem; } border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; } @media screen and (max-width: 500px) { .kanvas-logo { - margin-top: -5rem; - margin-right: 2rem; - left: 0%; - min-width: 3rem; + + /* min-width: 3rem; */ } border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ; }