diff --git a/react-ts/src/components/Header/Header.scss b/react-ts/src/components/Header/Header.scss index 2d08338..64d649b 100644 --- a/react-ts/src/components/Header/Header.scss +++ b/react-ts/src/components/Header/Header.scss @@ -1,11 +1,31 @@ @import '../../styles/utils/Variables.scss'; .header { - padding: 22px 100px; background-color: $color-black1; &__wrapper-top { + padding: 22px 100px; display: flex; align-items: center; justify-content: space-between; + border-bottom: 1px solid $color-grey1; + } + &__wrapper-botom { + padding: 14px 100px; + &__ul { + display: flex; + align-items: center; + column-gap: 55px; + &__li { + a { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-white1; + text-transform: uppercase; + } + } + } } } \ No newline at end of file diff --git a/react-ts/src/components/Header/Header.tsx b/react-ts/src/components/Header/Header.tsx index 1864a24..500ccf5 100644 --- a/react-ts/src/components/Header/Header.tsx +++ b/react-ts/src/components/Header/Header.tsx @@ -1,6 +1,7 @@ import './Header.scss'; import InputSearch from '../InputSearch/InputSearch'; +import UserAccount from '../UserAccount/UseAccount'; import logoM3 from '../../assets/images/logo-m3academy.svg'; const Header = () => { @@ -13,17 +14,21 @@ const Header = () => { + - {/*
-
) } diff --git a/react-ts/src/components/UserAccount/UseAccount.tsx b/react-ts/src/components/UserAccount/UseAccount.tsx new file mode 100644 index 0000000..cdbb1bf --- /dev/null +++ b/react-ts/src/components/UserAccount/UseAccount.tsx @@ -0,0 +1,23 @@ +import './UserAccount.scss'; + +import CartHeader from '../../assets/images/cart-header.svg'; + +const UserAccount = () => { + return ( +
+ +
+ ) +} + + +export default UserAccount; \ No newline at end of file diff --git a/react-ts/src/components/UserAccount/UserAccount.scss b/react-ts/src/components/UserAccount/UserAccount.scss new file mode 100644 index 0000000..3412ff8 --- /dev/null +++ b/react-ts/src/components/UserAccount/UserAccount.scss @@ -0,0 +1,21 @@ +@import '../../styles/utils/Variables.scss'; + + +.wrapper-userAccount { + &__ul { + display: flex; + column-gap: 55px; + align-items: center; + &__li-entrar { + a { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-white1; + text-transform: uppercase; + } + } + } +} diff --git a/react-ts/src/styles/utils/Variables.scss b/react-ts/src/styles/utils/Variables.scss index e0a0b7f..208080c 100644 --- a/react-ts/src/styles/utils/Variables.scss +++ b/react-ts/src/styles/utils/Variables.scss @@ -1,6 +1,8 @@ @import url('https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap'); // colors +$color-white1: #ffffff; + $color-red1: #ff0000; $color-grey1: #c4c4c4;