diff --git a/src/app/app.component.html b/src/app/app.component.html index 3be76f8..cc54c78 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -15,6 +15,7 @@
+ factuur

Diensten

@@ -88,7 +89,6 @@
- factuur
@@ -141,6 +141,7 @@
+ klant

Klant worden?

@@ -152,6 +153,7 @@ Wij zullen u bij de overstap begeleiden, zodat de overgang vlot kan verlopen. Wij contacteren uw vorige raadgever om ons uw dossier te bezorgen.

+ klant

Hoe gaan we te werk?

Tijdens een eerste vrijblijvende vergadering met één van de vennoten, bespreken we uw project.

@@ -162,7 +164,6 @@

Interesse? Op onze contact pagina vindt u onze contactgegevens

- klant
@@ -189,6 +190,7 @@
+ vacatures

Vacatures

@@ -218,7 +220,6 @@

  • of bezorg dan jouw CV en motivatiebrief aan robert@sinia.be
  • - vacatures
    diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 6df4316..6a4f173 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -112,6 +112,10 @@ h2 { margin-top: 10rem; } + .content img { + display: none; + } + .timeline { border-left: 0.2rem solid $primary-color; padding: 1rem 3rem 2rem 3rem; @@ -155,6 +159,7 @@ h2 { #vacatures, #klantworden, #diensten { display: flex; justify-content: space-between; + flex-direction: row-reverse; .content { width: 60%; @@ -208,3 +213,174 @@ h2 { font-size: 2rem; } } + +@media only screen and (max-width: 1200px) { + .hero-container { + height: 20rem; + + .hero { + transform: translateY(-50%) translateX(-50%) scale(0.35); + top: 25%; + } + } + + .hero-container2 { + height: 20rem; + + .hero2 { + transform: translateY(-50%) translateX(-50%) scale(0.28); + top: 0; + } + } + + .wrapper { + padding: 2rem 3rem 6rem 3rem; + } + + #diensten { + display: inline-block; + + img { + position: relative; + width: 20.4rem; + height: 20rem; + top: -6rem; + left: calc(100vw - 30rem); + transform: scale(1.25); + } + + .content { + z-index: 5; + position: relative; + width: 100%; + margin-top: -17rem; + } + } + + #advies { + margin-top: 2rem; + + .wrapper { + display: inline-block; + + img { + position: relative; + width: 20.4rem; + height: 20rem; + top: -6rem; + left: calc(100vw - 30rem); + transform: scale(1.25); + } + + .content { + z-index: 5; + position: relative; + width: 100%; + margin-top: -17rem; + } + } + } + + #klantworden { + display: inline-block; + padding: 3rem; + + img { + display: none; + } + + .content { + display: flex; + flex-direction: column; + align-items: center; + + z-index: 5; + position: relative; + width: 100%; + + h2 { + width: 100%; + } + + img { + display: inline; + margin: 3rem; + width: 40rem; + height: 38rem; + max-width: 40rem; + } + + } + .timeline { + div + div { + margin-top: 0rem; + } + } + } + + #wiezijnwe { + display: inline-block; + + .wrapper { + align-items: flex-end; + flex-direction: column; + margin-top:-6rem; + + img { + width: 36rem; + max-width: 36rem; + height: 32rem; + position: relative; + top: -16rem; + } + } + + .wrapper .content { + z-index: 5; + position: relative; + width: 100%; + margin-top: -19rem; + } + } + + #vacatures { + display: flex; + flex-direction: column; + align-items: center; + + img { + width: 50rem; + max-width: 50rem; + height: 100%; + position: relative; + top: -12rem; + } + + .content { + z-index: 5; + position: relative; + width: 100%; + margin-top: -15rem; + } + } + + #contact { + .wrapper-contact { + display: inline; + + .text { + padding: 3rem; + margin-bottom: 3rem; + width: 100%; + } + + .google-maps { + padding: 3rem; + iframe{ + margin: 0 auto; + width: calc(100vw - 6rem); + } + } + } + } +} diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index b5eb0bc..3d6023c 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -59,3 +59,12 @@ transition: all .1s; } } + +@media only screen and (max-width: 1200px) { + .logo .subtext { + display: none; + } + .menu { + display: none; + } +} diff --git a/src/index.html b/src/index.html index d77b76b..eb4891f 100644 --- a/src/index.html +++ b/src/index.html @@ -13,10 +13,11 @@ - +