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

♻️ Delete email button and fix responsive style

Browse Source
This commit is contained in:
stefan080106
2022-09-20 18:50:30 +02:00
parent 590df16fd7
commit d91839e793
3 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
pages/Kontakt.js
View File

@@ -55,10 +55,12 @@ export default function Home() {
Social-Media Social-Media
</FadeIn> </FadeIn>
{/* Social-Media*/} {/* Social-Media*/}
<FadeIn delay={300} transitionDuration={1500} className={styles.SocialMediaContainer}> <FadeIn
<a href="mailto:solutionsagsit@gmail.com"> childTag={"div"}
<Image height={75} width={75} src={EmailIcon} alt="E-Mail" /> delay={300}
</a> transitionDuration={1500}
className={styles.SocialMediaContainer}
>
<a href="https://www.instagram.com/ags_it_solutions/"> <a href="https://www.instagram.com/ags_it_solutions/">
<Image height={75} width={75} src={InstagramIcon} alt="Instagram" /> <Image height={75} width={75} src={InstagramIcon} alt="Instagram" />
</a> </a>

2
styles/Kontakt.module.css
View File

@@ -1 +1 @@
.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%}} .SocialMediaContainer{width:80%;height:100%;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap}.SocialMediaContainer div a span{transition:all .5s}.SocialMediaContainer div 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%}.SocialMediaContainer{justify-content:center}.SocialMediaContainer div{flex-basis:50%;text-align:center}}

9
styles/Kontakt.module.scss
View File

@@ -6,6 +6,7 @@
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
div {
a { a {
span { span {
transition: all 0.5s; transition: all 0.5s;
@@ -14,6 +15,7 @@
transform: scale(1.05); transform: scale(1.05);
} }
} }
}
} }
.TwoColumnLayout { .TwoColumnLayout {
@@ -86,4 +88,11 @@
.contactInfo { .contactInfo {
width: 100%; width: 100%;
} }
.SocialMediaContainer {
justify-content: center;
div {
flex-basis: 50%;
text-align: center;
}
}
} }