diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 42c89f7..d0062f8 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -1,9 +1,36 @@ import React from 'react'; import styles from '../../styles/Header.module.scss' +import logo from '../../assets/img/logo.png' +import search from '../../assets/img/search.png' +import cart from '../../assets/img/cart.png' const Header = () => { return( -
Header
+
+
+ +
+ + +
+
+

Entrar

+ +
+
+
+ +
) } diff --git a/src/styles/Header.module.scss b/src/styles/Header.module.scss index 501222b..5644153 100644 --- a/src/styles/Header.module.scss +++ b/src/styles/Header.module.scss @@ -1,7 +1,84 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'); @import 'variables.scss'; header { + width: 100%; color: $white; padding: 0; background-color: $black; + + .header__top{ + padding: 25.07px 100px; + display: flex; + align-items: center; + justify-content: space-between; + + .header__logo{ + width: 10.63%; + height: 25.86px; + } + + .header__container-input{ + display: flex; + align-items: center; + justify-content: end; + position: relative; + width: 20.63%; + + + .header__search{ + display: flex; + width: 100%; + border: 2px solid #F2F2F2; + border-radius: 5px; + height: 32px; + padding-left: 16px; + } + .header__search-icon{ + height: 18px; + position: absolute; + color: #303030; + margin-right: 7px; + } + } + + .header__my-account-cart{ + display: flex; + width: 10.63%; + justify-content: space-between; + align-items: center; + + .header__account { + font-style: normal; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + font-family: 'Roboto', sans-serif; + } + .header__cart{ + height: 28px; + } + + } + } + + .header__line{ + border-bottom: 1px solid $white; + } + + .header__botton{ + display: flex; + width: 27.58%; + justify-content: space-between; + margin: 0px 100px; + + .header__botton-nav-text { + font-family: 'Roboto', sans-serif; + font-style: normal; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + } + } + }