Improved contact page
This commit is contained in:
BIN
src/assets/jani.png
Normal file
BIN
src/assets/jani.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/assets/veikko.png
Normal file
BIN
src/assets/veikko.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
35
src/components/icons/IconEmail.vue
Normal file
35
src/components/icons/IconEmail.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7"
|
||||
stroke="#000000"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<rect
|
||||
x="3"
|
||||
y="5"
|
||||
width="18"
|
||||
height="14"
|
||||
rx="2"
|
||||
stroke="#000000"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon path,
|
||||
.icon rect {
|
||||
stroke: var(--color-svg-stroke);
|
||||
transition: stroke 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
24
src/components/icons/IconPhone.vue
Normal file
24
src/components/icons/IconPhone.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z"
|
||||
stroke="#000000"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon path {
|
||||
stroke: var(--color-svg-stroke);
|
||||
transition: stroke 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import IconEmail from '@/components/icons/IconEmail.vue'
|
||||
import IconPhone from '@/components/icons/IconPhone.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="contact">
|
||||
<div class="contact-item">
|
||||
<div class="details">
|
||||
<h3>Yhteystietomme</h3>
|
||||
<p>
|
||||
Voit ottaa meihin yhteyttä sähköpostitse osoitteeseen<a
|
||||
href="mailto:info@tietokonepaja.fi"
|
||||
>info@tietokonepaja.fi</a
|
||||
>.
|
||||
</p>
|
||||
<h3>Keitä me olemme</h3>
|
||||
<div class="contact-person-container">
|
||||
<div class="contact-person">
|
||||
<strong>Veikko</strong>
|
||||
<img
|
||||
src="@/assets/veikko.png"
|
||||
alt="Veikon kuva"
|
||||
style="
|
||||
width: 100px;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="contact-person">
|
||||
<strong>Jani</strong>
|
||||
<img
|
||||
src="@/assets/jani.png"
|
||||
alt="Janin kuva"
|
||||
style="
|
||||
width: 100px;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h4>Yhteydenotot</h4>
|
||||
|
||||
<div class="contact-info">
|
||||
<IconEmail />
|
||||
<a href="mailto:info@tietokonepaja.fi">info@tietokonepaja.fi</a>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<IconPhone />
|
||||
+358 442373706 (Veikko)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,6 +69,27 @@
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.contact-person-container {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.contact-person {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
@@ -37,6 +97,14 @@ h3 {
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
|
||||
Reference in New Issue
Block a user