Worked on contact page

This commit is contained in:
2025-04-01 18:58:31 +02:00
parent a29be80381
commit f974696584
2 changed files with 33 additions and 16 deletions

View File

@@ -2,7 +2,7 @@
<div class="intersection_div"> <div class="intersection_div">
<div class="intersection_content test"> <div class="intersection_content test">
<h2 class="test">{{ props.text }}</h2> <h2 class="test">{{ props.text }}</h2>
<RouterLink :to="buttonLink"><div class="button intersection_button_div test"> <RouterLink :to="buttonLink" @click="goToTop"><div class="button intersection_button_div test">
<p>{{buttonText}}</p> <p>{{buttonText}}</p>
</div></RouterLink> </div></RouterLink>
</div> </div>
@@ -26,6 +26,10 @@ const props = defineProps({
required: true required: true
} }
}); });
function goToTop(){
window.scrollTo(0, 0);
}
</script> </script>
<style scoped> <style scoped>

View File

@@ -1,13 +1,18 @@
<template> <template>
<Header/> <Header/>
<div id="contact_content"> <div id="contact_page">
<h1>{{ $t("contact.title") }}</h1> <div id="contact_content">
<p>{{ $t("contact.subtitle") }}</p> <img :src="ContactSvg"/>
<h2>{{ $t("contact.emails.research.title") }}</h2>
<p>{{ $t("contact.emails.research.desc", {user:"a", domain:"b"}) }}</p> <div id="contact_content_text">
<h2>{{ $t("contact.emails.work.title") }}</h2> <h1>{{ $t("contact.title") }}</h1>
<p>{{ $t("contact.emails.work.desc", {user:"a", domain:"b"}) }}</p> <p>{{ $t("contact.subtitle") }}</p>
<img :src="ContactSvg"/> <h2>{{ $t("contact.emails.research.title") }}</h2>
<p>{{ $t("contact.emails.research.desc", {user:"a", domain:"b"}) }}</p>
<h2>{{ $t("contact.emails.work.title") }}</h2>
<p>{{ $t("contact.emails.work.desc", {user:"a", domain:"b"}) }}</p>
</div>
</div>
</div> </div>
</template> </template>
@@ -18,20 +23,28 @@
</script> </script>
<style scoped> <style scoped>
#contact_page{
/*min-height: 100vh;*/
}
#contact_content{ #contact_content{
width: 80%; width: 80%;
margin: auto; margin: auto;
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: row-reverse;
/*justify-content: center;*/ justify-content: center;
align-items: center; /*align-items: center;
text-align: center; text-align: center;*/
min-height: 100vh; flex-wrap: wrap;
} }
#contact_content img{ #contact_content img{
width: 100%; width: 30%;
max-width: 600px; min-width: 200px;
}
#contact_content_text{
width: 60%;
min-width: 300px;
} }
</style> </style>