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

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