diff --git a/pages/Kontakt.js b/pages/Kontakt.js index cd37250..b503599 100644 --- a/pages/Kontakt.js +++ b/pages/Kontakt.js @@ -15,8 +15,41 @@ export default function Home() { AGS IT Solutions | Kontakt - - Kontakformular Folgt... + +
+

Kontaktformular folgt...

+
+
+
+

AGS IT Solutions

+

+ + Ginsterweg 5, 26605 Aurich + +

+

+ +49 157 53642410 +

+

+ info@ags-it-solutions.de +

+
+
+
+ +
+
+
Social-Media @@ -32,7 +65,7 @@ export default function Home() { Facebook - + Discord diff --git a/styles/Kontakt.module.css b/styles/Kontakt.module.css index 1fb889d..17054ff 100644 --- a/styles/Kontakt.module.css +++ b/styles/Kontakt.module.css @@ -1 +1 @@ -.SocialMediaContainer{width:80%;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap}.SocialMediaContainer a span{transition:all .5s}.SocialMediaContainer a :hover{transform:scale(1.05)} \ No newline at end of file +.SocialMediaContainer{width:80%;height:100%;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap}.SocialMediaContainer a span{transition:all .5s}.SocialMediaContainer a :hover{transform:scale(1.05)}.TwoColumnLayout{display:flex;flex-direction:row;justify-content:space-around;align-items:center;flex-wrap:wrap;width:90vw;height:100%;padding:0;margin:0}.TwoColumnLayout .columnChild{height:40vh;width:40vw;min-width:600px;margin:1rem;display:flex;align-items:center;justify-content:center;flex-direction:row;border:1px solid #000;border-radius:.5rem}.mapouter{position:relative;text-align:right;height:100%;width:60%;border-radius:0 .5rem .5rem 0}.gmap_canvas{overflow:hidden;background:none !important;height:100%;width:100%;border-radius:0 .5rem .5rem 0}.contactInfo{width:40%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.contactInfo p{transition:all .25s ease-in-out}.contactInfo p:hover{transform:scale(1.05)}@media(max-width: 768px){.TwoColumnLayout{flex-direction:column}.TwoColumnLayout .columnChild{width:90vw;height:40vh;min-width:0}.TwoColumnLayout .columnChild .mapouter{display:none}.contactInfo{width:100%}} \ No newline at end of file diff --git a/styles/Kontakt.module.scss b/styles/Kontakt.module.scss index 3342f01..0d598d2 100644 --- a/styles/Kontakt.module.scss +++ b/styles/Kontakt.module.scss @@ -1,6 +1,6 @@ .SocialMediaContainer { width: 80%; - + height: 100%; display: flex; justify-content: space-around; align-items: center; @@ -15,3 +15,75 @@ } } } + +.TwoColumnLayout { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + width: 90vw; + height: 100%; + padding: 0; + margin: 0; + .columnChild { + height: 40vh; + width: 40vw; + min-width: 600px; + margin: 1rem; + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; + border: 1px solid black; + border-radius: 0.5rem; + } +} + +.mapouter { + position: relative; + text-align: right; + height: 100%; + width: 60%; + border-radius: 0 0.5rem 0.5rem 0; +} + +.gmap_canvas { + overflow: hidden; + background: none !important; + height: 100%; + width: 100%; + border-radius: 0 0.5rem 0.5rem 0; +} + +.contactInfo { + width: 40%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + p { + transition: all 0.25s ease-in-out; + &:hover { + transform: scale(1.05); + } + } +} + +@media (max-width: 768px) { + .TwoColumnLayout { + flex-direction: column; + .columnChild { + width: 90vw; + height: 40vh; + min-width: 0; + .mapouter { + display: none; + } + } + } + .contactInfo { + width: 100%; + } +}