add header to home page

superkhau · superkhau · commit 9ac68919d5d8 · 2021-01-13T18:00:55.000-08:00
diff --git a/components/header/index.js b/components/header/index.js
@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+const Header = styled.h1`
+  position: absolute;
+  left: 9.17%;
+  right: 50.83%;
+  top: 26.89%;
+  bottom: 53.56%;
+
+  font-family: Montserrat;
+  font-style: normal;
+  font-weight: 800;
+  font-size: 72px;
+  line-height: 88px;
+
+  color: #FFFFFF;
+`
+export default Header
diff --git a/components/index.js b/components/index.js
@@ -0,0 +1 @@
+export {default as Header} from './header'
diff --git a/pages/index.js b/pages/index.js
@@ -1,4 +1,5 @@
 import styles from 'styles/Home.module.css'
+import {Header} from 'components'
 
 
 export default function Home() {
@@ -7,7 +8,7 @@ export default function Home() {
       <div className={styles.imgContainer}>
         <img src='/images/commit-logo-white.svg' alt='commit-logo'/>
       </div>
-      Hello World!
+      <Header>Take control of your career</Header>
     </div>
   )
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export {default as Header} from './header'`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import styles from 'styles/Home.module.css'`
	`2`	`+import {Header} from 'components'`
`2`	`3`
`3`	`4`
`4`	`5`	`export default function Home() {`
`@@ -7,7 +8,7 @@ export default function Home() {`
`7`	`8`	`<div className={styles.imgContainer}>`
`8`	`9`	`<img src='/images/commit-logo-white.svg' alt='commit-logo'/>`
`9`	`10`	`</div>`
`10`		`- Hello World!`
	`11`	`+ <Header>Take control of your career</Header>`
`11`	`12`	`</div>`
`12`	`13`	`)`
`13`	`14`	`}`