Compare commits
2 Commits
61b8ad6380
...
7476cfce33
| Author | SHA1 | Date | |
|---|---|---|---|
7476cfce33
|
|||
|
53928e5250
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="contact_container bg-neutral-100 rounded-md border border-gray-200 max-w-[500px] p-2 shadow">
|
<div class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow">
|
||||||
<header class="mb-1.5">
|
<header class="mb-1.5">
|
||||||
<h3 class="text-xl">
|
<h3 class="text-xl">
|
||||||
Formularz kontaktowy
|
Formularz kontaktowy
|
||||||
@ -38,6 +38,7 @@
|
|||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
v-if="isMessageError"
|
v-if="isMessageError"
|
||||||
|
class="text-red-400"
|
||||||
>
|
>
|
||||||
Wiadomość musi zawierać przynajmniej 3 znaki!
|
Wiadomość musi zawierać przynajmniej 3 znaki!
|
||||||
</span>
|
</span>
|
||||||
@ -47,7 +48,7 @@
|
|||||||
class="text-gray-500"
|
class="text-gray-500"
|
||||||
for="email"
|
for="email"
|
||||||
>
|
>
|
||||||
Jak mam się skontaktować?
|
Gdzie mam odesłać odpowiedź?
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="email"
|
id="email"
|
||||||
@ -60,7 +61,7 @@
|
|||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-if="isEmailError"
|
v-if="isEmailError"
|
||||||
class="error-message"
|
class="text-red-400"
|
||||||
>
|
>
|
||||||
E-mail musi być poprawny, np. przemek.kowalski@gmail.com
|
E-mail musi być poprawny, np. przemek.kowalski@gmail.com
|
||||||
</span>
|
</span>
|
||||||
@ -82,7 +83,7 @@
|
|||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-if="isSenderError"
|
v-if="isSenderError"
|
||||||
class="error-message"
|
class="text-red-400"
|
||||||
>
|
>
|
||||||
Podpis musi zawierać przynajmniej 3 znaki!
|
Podpis musi zawierać przynajmniej 3 znaki!
|
||||||
</span>
|
</span>
|
||||||
@ -207,90 +208,9 @@ function formSubmit(event) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "scss/media";
|
@screen md {
|
||||||
|
.contact_container {
|
||||||
.contact_container {
|
flex-basis: 500px;
|
||||||
flex-basis: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact_container {
|
|
||||||
/* .label-info {
|
|
||||||
width: 97%;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
color: #7a7a7a;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
width: 97%;
|
|
||||||
padding: 5px 0 10px;
|
|
||||||
color: #d44950;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* input, textarea {
|
|
||||||
width: 97%;
|
|
||||||
max-width: 97%;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 2px solid #c9c9c9;
|
|
||||||
padding: 10px 10px 8px;
|
|
||||||
font-size: 1em;
|
|
||||||
font-family: var(--font-family);
|
|
||||||
line-height: 1.3em;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
} */
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact_input::placeholder {
|
|
||||||
color: #bdbdbd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact_input:focus, .contact_input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea.contact_input {
|
|
||||||
max-width: 97%;
|
|
||||||
min-width: 97%;
|
|
||||||
min-height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.contact_input-error, textarea.contact_input-error {
|
|
||||||
border-color: #d44950;
|
|
||||||
color: #d44950;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact_input-error::placeholder, .contact_input-error::placeholder {
|
|
||||||
color: #d7626a;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[disabled].contact_input {
|
|
||||||
background-color: #cdcdcd;
|
|
||||||
border-color: gray;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
display: none;
|
|
||||||
margin: 5px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message_ok, .message_error {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message_ok {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
border: 1px solid #387d3b;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message_error {
|
|
||||||
background-color: #f8d7da;
|
|
||||||
border: 1px solid #f5c6cb;
|
|
||||||
color: #721c24;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,82 +1,92 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="contact_info bg-neutral-100 rounded-md border border-gray-200 max-w-[500px] shadow">
|
<div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
|
||||||
<header class="info_head">
|
<header class="mb-1.5">
|
||||||
Inne formy kontaktu:
|
<h3 class="text-xl">
|
||||||
|
Inne formy kontaktu:
|
||||||
|
</h3>
|
||||||
</header>
|
</header>
|
||||||
<div class="contact_element">
|
<div class="flex flex-col gap-2.5 justify-start items-start">
|
||||||
<img
|
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
|
||||||
class="contact_element_icon"
|
<img
|
||||||
src="/assets/img/instagram.jpg"
|
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
|
||||||
alt="Instagram"
|
src="/assets/img/instagram.jpg"
|
||||||
>
|
alt="Instagram"
|
||||||
<span
|
>
|
||||||
id="instagram"
|
<span
|
||||||
class="contact_element_text"
|
id="instagram"
|
||||||
>
|
class="font-bold"
|
||||||
<a
|
>
|
||||||
href="https://www.instagram.com/nikcamii/"
|
<a
|
||||||
target="_blank"
|
href="https://www.instagram.com/nikcamii/"
|
||||||
rel="noopener nofollow noreferrer"
|
target="_blank"
|
||||||
>Instagram: @NiKCamii</a>
|
rel="noopener nofollow noreferrer"
|
||||||
</span>
|
class="hover:underline"
|
||||||
</div>
|
>Instagram: @NiKCamii</a>
|
||||||
<div class="contact_element">
|
</span>
|
||||||
<img
|
</div>
|
||||||
class="contact_element_icon"
|
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
|
||||||
src="/assets/img/facebook.jpg"
|
<img
|
||||||
alt="Facebook"
|
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
|
||||||
>
|
src="/assets/img/facebook.jpg"
|
||||||
<span
|
alt="Facebook"
|
||||||
id="facebook"
|
>
|
||||||
class="contact_element_text"
|
<span
|
||||||
>
|
id="facebook"
|
||||||
<a
|
class="font-bold"
|
||||||
href="https://www.facebook.com/nikcamii/"
|
>
|
||||||
target="_blank"
|
<a
|
||||||
rel="noopener nofollow noreferrer"
|
href="https://www.facebook.com/nikcamii/"
|
||||||
>Facebook: @NiKCamii</a>
|
target="_blank"
|
||||||
</span>
|
rel="noopener nofollow noreferrer"
|
||||||
</div>
|
class="hover:text-gray-700 hover:underline"
|
||||||
<div class="contact_element">
|
>Facebook: @NiKCamii</a>
|
||||||
<img
|
</span>
|
||||||
class="contact_element_icon"
|
</div>
|
||||||
src="/assets/img/twitter.jpg"
|
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
|
||||||
alt="Twitter"
|
<img
|
||||||
>
|
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
|
||||||
<span
|
src="/assets/img/twitter.jpg"
|
||||||
id="twitter"
|
alt="Twitter"
|
||||||
class="contact_element_text"
|
>
|
||||||
>
|
<span
|
||||||
<a
|
id="twitter"
|
||||||
href="https://twitter.com/nikcamii"
|
class="font-bold"
|
||||||
target="_blank"
|
>
|
||||||
rel="noopener nofollow noreferrer"
|
<a
|
||||||
>Twitter: @NiKCamii</a>
|
href="https://twitter.com/nikcamii"
|
||||||
</span>
|
target="_blank"
|
||||||
</div>
|
rel="noopener nofollow noreferrer"
|
||||||
<div class="contact_element">
|
class="hover:text-gray-700 hover:underline"
|
||||||
<img
|
>Twitter: @NiKCamii</a>
|
||||||
class="contact_element_icon"
|
</span>
|
||||||
src="/assets/img/gg.png"
|
</div>
|
||||||
alt="Gadu-Gadu"
|
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
|
||||||
>
|
<img
|
||||||
<span
|
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
|
||||||
id="gg"
|
src="/assets/img/gg.png"
|
||||||
class="contact_element_text"
|
alt="Gadu-Gadu"
|
||||||
>GG: 38429969</span>
|
>
|
||||||
</div>
|
<span
|
||||||
<div class="contact_element">
|
id="gg"
|
||||||
<img
|
class="font-bold"
|
||||||
class="contact_element_icon"
|
>GG: 38429969</span>
|
||||||
src="/assets/img/user.jpg"
|
</div>
|
||||||
alt="E-mail"
|
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
|
||||||
>
|
<img
|
||||||
<span
|
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
|
||||||
id="mailto"
|
src="/assets/img/user.jpg"
|
||||||
class="contact_element_text"
|
alt="E-mail"
|
||||||
>
|
>
|
||||||
<a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
|
<span
|
||||||
</span>
|
id="mailto"
|
||||||
|
class="font-bold"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="mailto:contact@kamilcraft.com"
|
||||||
|
class="hover:text-gray-700 hover:underline"
|
||||||
|
>Email: contact@kamilcraft.com</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -84,51 +94,18 @@
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "scss/media";
|
@import "scss/media";
|
||||||
|
|
||||||
.contact_info {
|
@screen md {
|
||||||
flex-basis: 410px;
|
.contact_info {
|
||||||
|
flex-basis: 410px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info_head {
|
a {
|
||||||
padding: 10px;
|
color: inherit;
|
||||||
line-height: 1.6em;
|
|
||||||
font-size: 1.3em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact_element {
|
&:hover {
|
||||||
display: flex;
|
-webkit-text-fill-color: #374151;
|
||||||
align-items: center;
|
color: #374151;
|
||||||
padding: 5px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-top: 1px solid #e6e6e6;
|
|
||||||
border-bottom: 1px solid #e6e6e6;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
-webkit-text-fill-color: #444444;
|
|
||||||
color: #444444;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&_icon {
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #e2e2e2;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
margin-right: 10px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
&_text{
|
|
||||||
padding-top: 2px;
|
|
||||||
line-height: 1.6em;
|
|
||||||
font-size: 1.1em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -153,11 +130,4 @@
|
|||||||
#gg {
|
#gg {
|
||||||
color: #ffa214;
|
color: #ffa214;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-tablet {
|
|
||||||
#instagram, #facebook, #twitter, #mailto, #gg {
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="py-6">
|
<section class="px-3 py-6">
|
||||||
<div class="flex items-start justify-center mx-auto gap-5">
|
<div class="flex flex-col md:flex-row items-start justify-center mx-auto gap-5">
|
||||||
<MailContact />
|
<MailContact />
|
||||||
<OtherContact />
|
<OtherContact />
|
||||||
</div>
|
</div>
|
||||||
@ -25,46 +25,3 @@ onMounted(() => {
|
|||||||
store.commit('setHeader', header)
|
store.commit('setHeader', header)
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import "scss/media";
|
|
||||||
|
|
||||||
/* .contact {
|
|
||||||
padding: 25px 0;
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact_container, .contact_info {
|
|
||||||
margin: 10px;
|
|
||||||
max-width: 500px;
|
|
||||||
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-tablet {
|
|
||||||
.container {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
.contact_container, .contact_info {
|
|
||||||
margin: 0 auto 25px;
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include media-mobile {
|
|
||||||
.container {
|
|
||||||
padding: 0 10px;
|
|
||||||
|
|
||||||
.contact_container {
|
|
||||||
max-width: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user