mirror of
https://github.com/ArthurDanjou/website-old.git
synced 2026-01-14 12:14:42 +01:00
92 lines
2.8 KiB
Vue
92 lines
2.8 KiB
Vue
<template>
|
|
<section class="w-full flex items-center justify-center flex-col">
|
|
<h2 class="mb-10 font-bold text-gray-700 text-2xl md:text-3xl my-4 dark:text-gray-400">
|
|
Fill in the form or <a class="email text-black dark:text-white" href="mailto:me@arthurdanjou.fr" target="_blank">Send an email</a> 📬
|
|
</h2>
|
|
<form class="w-full lg:w-1/2">
|
|
<div class="w-full lg:flex lg:space-x-4 justify-center mb-8 lg:mb-12">
|
|
<div class="form-div lg:w-1/2 mb-8 lg:mb-0">
|
|
<input
|
|
id="name"
|
|
required
|
|
type="text"
|
|
placeholder=" "
|
|
class="form-input-half w-full"
|
|
/>
|
|
<label for="name" class="form-label"> What is your name ?</label>
|
|
</div>
|
|
<div class="form-div lg:w-1/2">
|
|
<input
|
|
id="email"
|
|
required
|
|
type="email"
|
|
placeholder=" "
|
|
class="form-input-half w-full"
|
|
/>
|
|
<label for="email" class="form-label">What is your email ?</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-div w-full mb-8 lg:mb-12">
|
|
<input
|
|
id="subject"
|
|
required
|
|
type="text"
|
|
placeholder=" "
|
|
class="form-input w-full"
|
|
/>
|
|
<label for="subject" class="form-label">Why are you contacting me?</label>
|
|
</div>
|
|
<div class="form-div w-full">
|
|
<textarea
|
|
id="content"
|
|
required
|
|
placeholder=" "
|
|
class="form-input w-full"
|
|
minlength="30"
|
|
rows="4"
|
|
/>
|
|
<label for="content" class="form-label">Tell me about your project</label>
|
|
</div>
|
|
</form>
|
|
<div class="my-12">
|
|
<div class="font-bold px-6 py-3 border-2 rounded-full border-indigo-600 text-indigo-600 hover:(bg-indigo-600 text-white) hover:dark:text-black duration-300 cursor-pointer">
|
|
Envoyer
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: "ContactForm"
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
input:focus-within ~ label, textarea:focus-within ~ label,
|
|
input:not(:placeholder-shown) ~ label, textarea:not(:placeholder-shown) ~ label {
|
|
@apply transform scale-75 -translate-y-6 -translate-x-7;
|
|
}
|
|
|
|
.form-input-half:focus-within ~ label,
|
|
.form-input-half:not(:placeholder-shown) ~ label {
|
|
@apply transform scale-75 -translate-y-6 -translate-x-5;
|
|
}
|
|
|
|
.form-div {
|
|
@apply relative border-b border-gray-200 dark:border-gray-800 focus-within:border-black dark:focus-within:border-white
|
|
}
|
|
|
|
.form-input-half, .form-input {
|
|
@apply block w-full appearance-none focus:outline-none bg-transparent
|
|
}
|
|
|
|
.form-label {
|
|
@apply absolute top-0 -z-1 duration-300 text-gray-700 dark:text-gray-400
|
|
}
|
|
|
|
.email {
|
|
@apply duration-300 border-b-2 border-gray-200 dark:border-gray-800 hover:(border-black dark:border-white)
|
|
}
|
|
</style>
|