diff --git a/assets/header-logo copy.svg b/assets/header-logo copy.svg new file mode 100644 index 0000000..146e8bb --- /dev/null +++ b/assets/header-logo copy.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/header-logo.svg b/assets/header-logo.svg new file mode 100644 index 0000000..29f088b --- /dev/null +++ b/assets/header-logo.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/header-menu-icon.svg b/assets/header-menu-icon.svg new file mode 100644 index 0000000..4bf8a50 --- /dev/null +++ b/assets/header-menu-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/footer.html b/components/footer.html new file mode 100644 index 0000000..aa67bff --- /dev/null +++ b/components/footer.html @@ -0,0 +1,39 @@ + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/components/header.html b/components/header.html index 80ea93d..637c230 100644 --- a/components/header.html +++ b/components/header.html @@ -5,13 +5,31 @@ Document + -
-
- header -
-
+
+ +
+ + +
+ +
+ MENU +
+ +
+ +
+
+
+
\ No newline at end of file diff --git a/header.js b/header.js new file mode 100644 index 0000000..ecba504 --- /dev/null +++ b/header.js @@ -0,0 +1,5 @@ +function toggleMenu(id) { + var menu = document.getElementById(id); + // document.getElementById('buttonMenu').classList.toggle('close'); + menu.classList.toggle('visible'); +} \ No newline at end of file diff --git a/style.css b/style.css index bd66479..f338d18 100644 --- a/style.css +++ b/style.css @@ -46,9 +46,98 @@ html { } } -.header { - padding: 1rem; +html { + box-sizing: border-box; +} + +.header.header-container { + height: 4rem; background-color: #7521d5; + display: flex; + flex-direction: row; + align-items: center; + min-width: 100vw; + background-color: #343059; + justify-content: space-between; +} +.header.header-container .header-logo { + background-image: url(../../assets/header-logo.svg); + background-repeat: no-repeat; + background-size: cover; + margin-left: 1rem; + min-width: 10rem; + min-height: 3rem; + height: inherit; +} +.header.header-container .header-nav-container { + display: flex; + flex-direction: row; + align-items: center; +} +.header.header-container .header-nav-container .header-nav { + display: none; +} +.header.header-container .header-nav-container .header-nav.visible { + display: flex; + flex-direction: column; + position: absolute; + top: 4rem; + right: 0; + align-items: flex-end; + padding: 1rem 2rem; + border-left: 1px solid #514b8b; + border-right: 1px solid #514b8b; + border-bottom: 1px solid #514b8b; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + background-color: #5b549b; +} +.header.header-container .header-nav-container .header-nav.visible .header-nav-link { + color: #FFC74D; + font-family: Roboto; + padding: 0.5rem; + margin-bottom: 0.3rem; + text-decoration: none; + text-align: right; + width: 100%; +} +.header.header-container .header-nav-container .header-nav.visible .header-nav-link:hover { + background-color: #47427a; + color: #fff7e6; +} +.header.header-container .header-nav-container .header-menu { + display: flex; + flex-direction: row; + margin-right: 1rem; + height: 3.6rem; +} +.header.header-container .header-nav-container .header-menu .header-menu-text { + font-family: Roboto; + font-style: normal; + font-weight: 900; + font-size: 1.5rem; + line-height: 100%; + letter-spacing: 0.045em; + color: #FFC74D; + align-items: center; +} +.header.header-container .header-nav-container .header-menu .header-menu-icon img { + height: 1.8rem; + margin: auto 0; +} + +@media (max-width: 767px) { + #dropDownMenu { + width: 100vw; + height: 100vh- 4rem; + justify-content: center; + padding: 0px; + } + #dropDownMenu .header-nav-link { + text-align: center; + padding-right: 0px; + max-width: 100vw; + } } /*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map index 06265ce..bc206d1 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles/base/elements.scss","styles/base/mixin.scss","styles/layouts/container.scss","styles/variables.scss","styles/modules/header.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;;;ACIA;EDDA;IACE;;;ACLF;EDSA;IACE;;;ACfF;EDmBA;IACE;;;AErBJ;EAaE,WCLQ;EDMR;;ADbA;ECDF;IAEI;IACA;;;ADGF;ECNF;IAMI;IACA;;;ADIF;ECXF;IAUI;IACA;;;;AEXJ;EACE,SDWY;ECVZ","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles/base/elements.scss","styles/base/mixin.scss","styles/layouts/container.scss","styles/variables.scss","styles/modules/header.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;;;ACIA;EDDA;IACE;;;ACLF;EDSA;IACE;;;ACfF;EDmBA;IACE;;;AErBJ;EAaE,WCJQ;EDKR;;ADbA;ECDF;IAEI;IACA;;;ADGF;ECNF;IAMI;IACA;;;ADIF;ECXF;IAUI;IACA;;;;AEJJ;EACE;;;AAGF;EACE;EACA,kBDXc;ECYd;EACA;EACA;EACA;EACA,kBAjBgB;EAkBhB;;AAGE;EAEE;EACA;EACA;EACA,aDdQ;ECeR;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EAEE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE,OA5DO;EA6DP,aA1DE;EA2DF;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAMR;EACE;EACA;EACA,cDrEM;ECsEN;;AAGA;EAEE,aAnFI;EAoFJ;EACA;EACA;EACA;EACA;EACA,OA5FS;EA6FT;;AAOA;EACE;EACA;;;AHvGV;EGgHA;IACQ;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA","file":"style.css"} \ No newline at end of file diff --git a/styles/layouts/flexbox.scss b/styles/layouts/flexbox.scss new file mode 100644 index 0000000..e69de29 diff --git a/styles/modules/header.scss b/styles/modules/header.scss index e467ec9..7303c98 100644 --- a/styles/modules/header.scss +++ b/styles/modules/header.scss @@ -1,4 +1,127 @@ -.header { - padding: $base-spacer; +// Variables +$header-primary: #343059; +$header-secondary: #FFC74D; + +// Typography +$header-font: Roboto; + +html { + box-sizing: border-box; +} + +.header.header-container { + height: $base-spacer*4; background-color: $primary-color; -} \ No newline at end of file + display: flex; + flex-direction: row; + align-items: center; + min-width: 100vw; + background-color: $header-primary; + justify-content: space-between; + + + .header-logo { + // background-color: blue; + background-image: url(../../assets/header-logo.svg); + background-repeat: no-repeat; + background-size: cover; + margin-left: $base-spacer; + min-width: $base-spacer*10; + min-height: $base-spacer*3; + height: inherit; + + } + + .header-nav-container { + display: flex; + flex-direction: row; + align-items: center; + + .header-nav { + // background-color: green; + display: none; + + &.visible { + display: flex; + flex-direction: column; + position: absolute; + top: $base-spacer*4; + right: 0; + align-items: flex-end; + padding: $base-spacer $base-spacer*2; + border-left: 1px solid lighten($header-primary, $amount: 15); + border-right: 1px solid lighten($header-primary, $amount: 15); + border-bottom: 1px solid lighten($header-primary, $amount: 15); + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + background-color: lighten($header-primary, $amount: 20); + + + + + .header-nav-link { + color: $header-secondary; + font-family: $header-font; + padding: $base-spacer*0.5; + margin-bottom: $base-spacer*0.3; + text-decoration: none; + text-align: right; + width: 100%; + + + &:hover { + background-color: lighten($header-primary, $amount: 10); + color: lighten($header-secondary, $amount:30); + } + } + } + } + + .header-menu { + display: flex; + flex-direction: row; + margin-right: $base-spacer; + height: $base-spacer*3.6; + // background-color: black; + + .header-menu-text { + // background-color: pink; + font-family: $header-font; + font-style: normal; + font-weight: 900; + font-size: $base-spacer*1.5; + line-height: 100%; + letter-spacing: 0.045em; + color: $header-secondary; + align-items: center; + } + + + .header-menu-icon { + // background-color: red; + + img { + height: $base-spacer*1.8; + margin: auto 0; + } + } + } + } + + } + + @include mobile { + #dropDownMenu { + width: 100vw; + height: (100vh-($base-spacer*4)); + justify-content: center; + padding: 0px; + + .header-nav-link { + text-align: center; + padding-right: 0px; + max-width: 100vw; + } + } + + } \ No newline at end of file diff --git a/styles/variables.scss b/styles/variables.scss index 58313bf..97d05b7 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -3,6 +3,7 @@ $base-text-color: rgb(46, 46, 46); $primary-color: rgb(117, 33, 213); $secondary-color: rgb(235, 136, 14); + // brackepoints $mobile: 768px; $tablet: 1024px;