diff --git a/desafio-react-e-typescript/src/assets/images/searchicon.svg b/desafio-react-e-typescript/src/assets/images/searchicon.svg new file mode 100644 index 0000000..a4932a7 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/searchicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-react-e-typescript/src/components/Header/Header.module.scss b/desafio-react-e-typescript/src/components/Header/Header.module.scss index e69de29..68a79fd 100644 --- a/desafio-react-e-typescript/src/components/Header/Header.module.scss +++ b/desafio-react-e-typescript/src/components/Header/Header.module.scss @@ -0,0 +1,105 @@ +.container-top { + display: flex; + align-items: center; + justify-content: space-between; + background-color: black; + width: 100%; + height: 76px; + padding: 24px 100px; + + .container-logo { + button { + background: transparent; + } + .academy-logo { + width: 100%; + max-width: 136px; + height: 26px; + cursor: pointer; + } + } +} + +.container-input { + width: 100%; + max-width: 264px; + display: flex; + position: relative; + + input { + width: 100%; + height: 32px; + border: 2px solid #f2f2f2; + border-radius: 5px; + padding: 8px 10px 8px 16px; + + &::placeholder { + color: #c6c6c6; + } + } + + button { + position: absolute; + outline: 0; + width: 18px; + height: 18px; + right: 0; + background-color: transparent; + background-image: url(../../assets/images/searchicon.svg); + background-repeat: no-repeat; + margin: 8px 10px 8px 16px; + cursor: pointer; + } +} + +.container-login-carrinho { + display: flex; + justify-content: center; + align-items: center; + + button { + background-color: transparent; + } + + a { + font-family: "Roboto", sans-serif; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + text-decoration: none; + color: #fff; + margin-right: 55px; + } + + .carticon { + width: 100%; + max-width: 28px; + height: 28px; + cursor: pointer; + } +} + +.container-bottom { + display: flex; + align-items: center; + background-color: black; + border-top: 1px solid #c4c4c4; + width: 100%; + height: 44px; + + .container-bottom-menu { + width: 100%; + margin-left: 100px; + + a { + text-decoration: none; + color: #fff; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + margin-right: 55px; + } + } +} diff --git a/desafio-react-e-typescript/src/global.css b/desafio-react-e-typescript/src/global.css index ec2585e..9a42635 100644 --- a/desafio-react-e-typescript/src/global.css +++ b/desafio-react-e-typescript/src/global.css @@ -1,13 +1,27 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html { + scroll-behavior: smooth; +} + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +button { + border: none; +}