BETTERZON-109 (#57)

* BETTERZON-31, dependencies.

* BETTERZON-31: Fixing dependencies

* BETTERZON-31,
BETTERZON-50

info popover and footer had been changed.

* BETTERZON-74

simple top-bar has been created.

* WIP: creating footer using grid.

* BETTERZON-78 adding bottom bar and top bar

* Adding cookieconsent as dependency again since it was removed by a merge

* Adding cookieconsent as dependency again since it was removed by a merge

* Apply suggestions from code review

Switching from single to double quotes

* BETTERZON-78 - grid added, structured as in Adobe XD mockup

* wip: component rewritten, simple grid applied.

* wip: new component created and added to the app.module.ts. Added a minimal grid layout.

* wip: all components were wrapped now. Grid structure has been applied to the main wrapper-class "container".

* wip: component created and added to the app.module.ts

Co-authored-by: Patrick Müller <patrick@mueller-patrick.tech>
Co-authored-by: Patrick <50352812+Mueller-Patrick@users.noreply.github.com>
This commit is contained in:
Reboooooorn
2021-05-20 10:36:52 +02:00
committed by GitHub
parent fc9c7f63cf
commit e4565f7435
17 changed files with 307 additions and 15 deletions
@@ -1 +1,54 @@
.top-bar-wrapper {
display: grid;
grid-template-columns: 200px 360px 820px 20px 250px;
grid-template-rows: 40px;
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
}
.top-logo {
grid-area: 1/1;
}
#better {
font-size: 28px;
font-weight: bold;
color: #3480E3;
}
#zon {
font-size: 28px;
font-weight: bold;
color: #E53167;
}
.search-button {
/*background-color: #E53167;*/
}
.sign-up {
/*background-color: #E53167;*/
margin-left: 50px;
margin-right: 25px;
}
.login {
margin-right: 25px;
}
#signin {
border-radius: 25px;
background-color: #E53167;
}
._links > a {
/*background-color: #E53167;*/
margin-left: 10px;
margin-right: 10px;
}
._signing_links > a {
/*background-color: #E53167;*/
margin-left: 50px;
}
@@ -1,4 +1,26 @@
<a>
<img src="assets/images/Betterzon.svg" [routerLink]="''" alt="Betterzon Logo" width="50px">
</a>
<a class="button fancy-button"><i class="material-icons">shopping_cart</i>Checkout</a>
<div class="top-bar-wrapper">
<div class="<top-logo>">
<a><span id="better">BETTER</span><span id="zon">ZON</span></a>
</div>
<div class="links">
<nav class="_links">
<a>KONTAKTIERE UNS</a>
<a>KUNDEN</a>
<a>FAQ</a>
</nav>
</div>
<div class="footer_space">
</div>
<div class="search-button">
<a>
<img src="assets/images/search_black_24dp.svg" alt="Sarch button">
</a>
</div>
<div class="links">
<nav class="_signing_links">
<a>SIGN UP</a>
<a><span id="signin">SIGN IN</span></a>
</nav>
</div>
</div>