diff --git a/desafio-5/public/index.html b/desafio-5/public/index.html index 173632e..b3ac7e4 100644 --- a/desafio-5/public/index.html +++ b/desafio-5/public/index.html @@ -12,8 +12,14 @@ -
-
- +
+ +
+
+ +
+ diff --git a/desafio-5/src/components/assets/imgs/Logo.png b/desafio-5/src/components/assets/imgs/Logo.png new file mode 100644 index 0000000..fc0f9ab Binary files /dev/null and b/desafio-5/src/components/assets/imgs/Logo.png differ diff --git a/desafio-5/src/components/modules/header.module.scss b/desafio-5/src/components/modules/header.module.scss index 44bd408..4b50bba 100644 --- a/desafio-5/src/components/modules/header.module.scss +++ b/desafio-5/src/components/modules/header.module.scss @@ -1,4 +1,32 @@ @import "../utils/Variables.scss"; -.main_wrapper{ -} \ No newline at end of file +.Header_wrapper { + display: flex; + min-height: 120px; + color: white; + background: black; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + + &-top { + display: flex; + justify-content: space-around; + width: 100%; + height: 76px !important; + height: 25.86px; + background: pink; + + &-logo { + width: 10.27%; + margin: 25px 0; + img { + width: 100%; + } + } + } + + &-bottom { + background: orangered; + } + } diff --git a/desafio-5/src/components/scripts/header.tsx b/desafio-5/src/components/scripts/header.tsx index 7c0dd31..224f578 100644 --- a/desafio-5/src/components/scripts/header.tsx +++ b/desafio-5/src/components/scripts/header.tsx @@ -1,11 +1,39 @@ import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} from "react" import HeaderStyles from "../modules/header.module.scss" +import Logo from '../assets/imgs/Logo.png'; const Header = () =>{ return ( -
- conteudo do header +
+ +
+
+ + Logo + +
+
+ + + +
+
+ + +
+
+ + +
+ opções +
) };