stefan.arnold/AGS_IT_Solutions_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Add map and company informations on Kontakt Page

Browse Source
This commit is contained in:
stefan080106
2022-09-20 18:41:41 +02:00
parent 57f25e4594
commit 590df16fd7
3 changed files with 110 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
pages/Kontakt.js
View File

@@ -15,8 +15,41 @@ export default function Home() {
<Head>
<title>AGS IT Solutions | Kontakt</title>
</Head>
<FadeIn childTag={"h1"} transitionDuration={1500}>
Kontakformular Folgt...
<FadeIn childTag={"div"} transitionDuration={1500} className={styles.TwoColumnLayout}>
<div className={styles.columnChild}>
<h2>Kontaktformular folgt...</h2>
</div>
<div className={styles.columnChild} style={{ justifyContent: "space-between" }}>
<div className={styles.contactInfo}>
<h3>AGS IT Solutions</h3>
<p>
<a href="https://maps.google.com/maps/dir//Ginsterweg+5+26605+Aurich/@53.4767968,7.5178283,14z/data=!4m5!4m4!1m0!1m2!1m1!1s0x47b642ec8d0a7b57:0xf3e20420a5c203a1">
Ginsterweg 5, 26605 Aurich
</a>
</p>
<p>
<a href="tel:+4915753642410">+49 157 53642410</a>
</p>
<p>
<a href="mailto:info@ags-it-solutions.de">info@ags-it-solutions.de</a>
</p>
</div>
<div className={styles.mapouter}>
<div className={styles.gmap_canvas}>
<iframe
title="Google Maps"
width="100%"
height="100%"
id="gmap_canvas"
src="https://maps.google.com/maps?q=Ginsterweg%205,%2026605%20Aurich&t=&z=14&ie=UTF8&iwloc=&output=embed"
frameBorder={0}
scrolling="no"
marginHeight={0}
marginWidth={0}
></iframe>
</div>
</div>
</div>
</FadeIn>
<FadeIn delay={300} childTag={"h1"} transitionDuration={1500}>
Social-Media
@@ -32,7 +65,7 @@ export default function Home() {
<a href="https://www.facebook.com/AGS-It-Solutions-106590378715946">
<Image height={75} width={75} src={FacebookIcon} alt="Facebook" />
</a>
<a href="https://discord.gg/cgq2NA2sdd">
<a href="https://discord.gg/2Xeeq68C">
<Image height={100} width={100} src={DiscordIcon} alt="Discord" />
</a>
<a href="https://github.com/AGS-IT-Solutions">

2
styles/Kontakt.module.css
View File

@@ -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)}
.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%}}

74
styles/Kontakt.module.scss
View File

@@ -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%;
}
}