✨ Add Kontakt Page
This commit is contained in:
BIN
assets/icons/Discord_Icon.png
Normal file
BIN
assets/icons/Discord_Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
assets/icons/Email_Icon.png
Normal file
BIN
assets/icons/Email_Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
assets/icons/Facebook_Icon.png
Normal file
BIN
assets/icons/Facebook_Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
assets/icons/Instagram_Icon.png
Normal file
BIN
assets/icons/Instagram_Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
36
pages/Kontakt.js
Normal file
36
pages/Kontakt.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import Head from "next/head";
|
||||||
|
import Image from "next/image";
|
||||||
|
import StandardStyles from "../styles/Home.module.css";
|
||||||
|
import styles from "../styles/Kontakt.module.css";
|
||||||
|
|
||||||
|
import EmailIcon from "../assets/icons/Email_Icon.png";
|
||||||
|
import DiscordIcon from "../assets/icons/Discord_Icon.png";
|
||||||
|
import FacebookIcon from "../assets/icons/Facebook_Icon.png";
|
||||||
|
import InstagramIcon from "../assets/icons/Instagram_Icon.png";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<main className={StandardStyles.main}>
|
||||||
|
<Head>
|
||||||
|
<title>AGS IT Solutions | Kontakt</title>
|
||||||
|
</Head>
|
||||||
|
<h1>Kontakformular Folgt...</h1>
|
||||||
|
<h1>Social-Media</h1>
|
||||||
|
{/* Social-Media*/}
|
||||||
|
<div className={styles.SocialMediaContainer}>
|
||||||
|
<a href="mailto:solutionsagsit@gmail.com">
|
||||||
|
<Image height={100} width={100} src={EmailIcon} alt="E-Mail" />
|
||||||
|
</a>
|
||||||
|
<a href="https://www.instagram.com/ags_it_solutions/">
|
||||||
|
<Image height={100} width={100} src={InstagramIcon} alt="Instagram" />
|
||||||
|
</a>
|
||||||
|
<a href="https://www.facebook.com/AGS-It-Solutions-106590378715946">
|
||||||
|
<Image height={100} width={100} src={FacebookIcon} alt="Facebook" />
|
||||||
|
</a>
|
||||||
|
<a href="https://discord.gg/cgq2NA2sdd">
|
||||||
|
<Image height={100} width={100} src={DiscordIcon} alt="Discord" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
styles/Kontakt.module.css
Normal file
1
styles/Kontakt.module.css
Normal file
@@ -0,0 +1 @@
|
|||||||
|
.SocialMediaContainer{width:80%;display:flex;justify-content:space-around;align-items:center}.SocialMediaContainer a span{transition:all .5s}.SocialMediaContainer a :hover{transform:scale(1.05)}
|
||||||
16
styles/Kontakt.module.scss
Normal file
16
styles/Kontakt.module.scss
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
.SocialMediaContainer {
|
||||||
|
width: 80%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
span {
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user