diff --git a/src/App.scss b/src/App.scss index c04ae7b..aa3ea0e 100644 --- a/src/App.scss +++ b/src/App.scss @@ -9,3 +9,4 @@ @import "./SASS/base/utilities"; @import "./SASS/layout/layout"; +@import "./SASS/layout/home"; diff --git a/src/SASS/abstracts/_mixins.scss b/src/SASS/abstracts/_mixins.scss index 700821d..a133a9c 100644 --- a/src/SASS/abstracts/_mixins.scss +++ b/src/SASS/abstracts/_mixins.scss @@ -6,7 +6,7 @@ } } -@mixin center-horizontal-vertical { +@mixin abpos { position: absolute; top: 50%; left: 50%; diff --git a/src/SASS/layout/_home.scss b/src/SASS/layout/_home.scss new file mode 100644 index 0000000..4fc1b4f --- /dev/null +++ b/src/SASS/layout/_home.scss @@ -0,0 +1,121 @@ +.header { + display: flex; + font-size: $normal-font-size; + + // main axis + justify-content: space-between; + + // cross axis + align-items: center; + + &__logo { + height: 3.25rem; + margin-left: 2rem; + } + + &__search { + flex: 0 0 40%; + + display: flex; + align-items: center; + justify-content: center; + + &--input { + font-family: inherit; + font-size: inherit; + background-color: $color-grey-light-2; + border: none; + color: inherit; + padding: 0.7rem 2rem; + border-radius: 100px; + width: 90%; + transition: all 0.2s; + margin-right: -3.25rem; + + &:focus { + outline: none; + width: 100%; + background-color: $color-grey-light-3; + } + + &::-webkit-input-placeholder { + font-weight: 100; + color: $color-grey-light-4; + } + } + + &--input:focus + &--button { + background-color: $color-grey-light-3; + } + + &--button { + border: none; + background-color: $color-grey-light-2; + + &:focus { + outline: none; + } + + &:active { + transform: translateY(2px); + } + } + + &--icon { + height: 2rem; + width: 2rem; + fill: $color-grey-dark-3; + } + } + + &__user-nav { + display: flex; + align-items: center; + align-self: stretch; + + & > * { + padding: 0 2rem; + cursor: pointer; + height: 100%; + display: flex; + align-items: center; + } + + & > *:hover { + background-color: $color-grey-light-2; + } + + &--icon-box { + position: relative; + } + + &--icon { + height: 2.25rem; + width: 2.25rem; + fill: $color-grey-dark-2; + } + + &--notification { + font-size: 0.8rem; + font-weight: 800; + height: 1.75rem; + width: 1.75rem; + border-radius: 50%; + background-color: $color-primary; + color: $color-white; + position: absolute; + top: 1.5rem; + right: 1.1rem; + + display: flex; + justify-content: center; + align-items: center; + } + + &--user-photo { + height: 3.75rem; + border-radius: 50%; + margin-right: 1rem; + } + } +} diff --git a/src/commons/header/header.jsx b/src/commons/header/header.jsx index ec8733a..b69b553 100644 --- a/src/commons/header/header.jsx +++ b/src/commons/header/header.jsx @@ -1,5 +1,44 @@ +import logo from "../img/logo.png"; +import sprite from "../img/sprite.svg"; +import user from "../img/user.jpg"; + function Header() { - return
Header Part
; + return ( +
+ trillo logo + +
+ + +
+ +
+ ); } export default Header; diff --git a/src/commons/img/SVG/aircraft-take-off.svg b/src/commons/img/SVG/aircraft-take-off.svg new file mode 100644 index 0000000..5bace1a --- /dev/null +++ b/src/commons/img/SVG/aircraft-take-off.svg @@ -0,0 +1,5 @@ + + +aircraft-take-off + + diff --git a/src/commons/img/SVG/bookmark.svg b/src/commons/img/SVG/bookmark.svg new file mode 100644 index 0000000..e567cdf --- /dev/null +++ b/src/commons/img/SVG/bookmark.svg @@ -0,0 +1,5 @@ + + +bookmark + + diff --git a/src/commons/img/SVG/chat.svg b/src/commons/img/SVG/chat.svg new file mode 100644 index 0000000..cbc3719 --- /dev/null +++ b/src/commons/img/SVG/chat.svg @@ -0,0 +1,5 @@ + + +chat + + diff --git a/src/commons/img/SVG/chevron-thin-right.svg b/src/commons/img/SVG/chevron-thin-right.svg new file mode 100644 index 0000000..c7184e9 --- /dev/null +++ b/src/commons/img/SVG/chevron-thin-right.svg @@ -0,0 +1,5 @@ + + +chevron-thin-right + + diff --git a/src/commons/img/SVG/home.svg b/src/commons/img/SVG/home.svg new file mode 100644 index 0000000..368791d --- /dev/null +++ b/src/commons/img/SVG/home.svg @@ -0,0 +1,5 @@ + + +home + + diff --git a/src/commons/img/SVG/key.svg b/src/commons/img/SVG/key.svg new file mode 100644 index 0000000..63285a8 --- /dev/null +++ b/src/commons/img/SVG/key.svg @@ -0,0 +1,5 @@ + + +key + + diff --git a/src/commons/img/SVG/location-pin.svg b/src/commons/img/SVG/location-pin.svg new file mode 100644 index 0000000..778b2c1 --- /dev/null +++ b/src/commons/img/SVG/location-pin.svg @@ -0,0 +1,5 @@ + + +location-pin + + diff --git a/src/commons/img/SVG/magnifying-glass.svg b/src/commons/img/SVG/magnifying-glass.svg new file mode 100644 index 0000000..1c253da --- /dev/null +++ b/src/commons/img/SVG/magnifying-glass.svg @@ -0,0 +1,5 @@ + + +magnifying-glass + + diff --git a/src/commons/img/SVG/map.svg b/src/commons/img/SVG/map.svg new file mode 100644 index 0000000..d1fdcc7 --- /dev/null +++ b/src/commons/img/SVG/map.svg @@ -0,0 +1,5 @@ + + +map + + diff --git a/src/commons/img/SVG/star.svg b/src/commons/img/SVG/star.svg new file mode 100644 index 0000000..3f20c2a --- /dev/null +++ b/src/commons/img/SVG/star.svg @@ -0,0 +1,5 @@ + + +star + + diff --git a/src/commons/img/sprite.svg b/src/commons/img/sprite.svg old mode 100755 new mode 100644 index d1e1f42..0092855 --- a/src/commons/img/sprite.svg +++ b/src/commons/img/sprite.svg @@ -1,120 +1,34 @@ - + diff --git a/src/commons/img/user.jpg b/src/commons/img/user.jpg index 21e6b83..9696999 100644 Binary files a/src/commons/img/user.jpg and b/src/commons/img/user.jpg differ