#44 updating hero and nav styling

Scout-NU · Apr 9, 2021 · e7926ed · e7926ed
1 parent 80696ce
commit e7926ed
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
@@ -4,15 +4,16 @@ import colors from "../../style/colors"
 
 export const NavContainer = styled.div`
   z-index: 1;
-  background-color: ${colors.gray_image};
   padding-bottom: 32px;
   &.colorChange {
-    background-color: ${colors.gray_CTA};
+    background-color: rgb(0, 0, 0, 0.55);
   }
 
   position: fixed;
   width: 100%;
   transition: 0.5s all ease;
+  color: ${colors.white900};
+
 `
 
 export const Logo = styled.div`
@@ -44,7 +45,7 @@ export const NavLink = styled.div`
   font-weight: bold;
   padding-left: 100px;
   text-decoration: none;
-  color: ${colors.black900};
+  color: ${colors.white900};
 `
 
 export const MobileIcon = styled.div`

diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js
@@ -8,6 +8,20 @@ import {
 import "../../style/colors"
 import colors from "../../style/colors"
 
+
+export const HeroImage = styled.div`
+position: absolute;
+top: 0;
+z-index: 0;
+img {
+
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+
+}
+`
+
 export const HeroContainer = styled.div`
   height: 100vh;
   background-color: ${colors.gray_image};
@@ -21,6 +35,9 @@ export const HeroContainer = styled.div`
 
 export const HeroTextSection = styled.div`
   padding-top: 275px;
+  z-index: 2;
+  color: ${colors.white900};
+  position: relative;
   padding-left: ${layoutPaddingDesktop};
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     padding-left: ${layoutPaddingMobile};
@@ -34,7 +51,7 @@ export const HeroDescription = styled.div``
 export const HeroCTA = styled.div`
   margin-top: 64px;
   a {
-    background-color: ${colors.gray_CTA};
+    background-color: ${colors.orange900};
     text-transform: uppercase;
     color: ${colors.white900};
     padding-left: 48px;

diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js
@@ -14,12 +14,16 @@ import {
   FutureCTA,
   FutureImage,
   HomePageContainer,
+  HeroImage
 } from "./index-styles"
 
 export default function HomePage({ data }) {
   return (
     <HomePageContainer>
       <HeroContainer>
+        <HeroImage>
+          <img src={data.hero_background_image.url} />
+        </HeroImage>
         <HeroTextSection>
           <HeroHeadline>
             <H1>{data.hero_headline}</H1>

diff --git a/src/style/colors.js b/src/style/colors.js
@@ -6,6 +6,8 @@ const colors = {
 
   black900: "#000000",
   white900: "#FFFFFF",
+
+  orange900: '#F27A28'
 }
 
 export default colors