Files
social-media/src/views/SignupView.vue
2024-04-22 19:46:50 -04:00

73 lines
3.5 KiB
Vue

<template>
<v-app style="background-color: #f4f4f4;">
<DefaultLayout></DefaultLayout>
<v-row>
<v-col cols=6 align="center">
<v-img class="login-picture" max-width="500" src="/images/hutopymedia/loginpage/loginhutopy.png"
style="margin-top: 100px; margin-bottom: 50px"></v-img>
<div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
<h1 class="mb-6 text-2xl font-bold">Sign up</h1>
<p class="mb-6 texte-gray-500">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not
only
five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages,
and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem
Ipsum.
</p>
<p class="font-bold">
Already have an account?
<RouterLink :to="{ 'name': 'login' }" class="underline">Click here</RouterLink> to log in!
</p>
</div>
</v-col>
<v-col cols="6" sm="6" md="6" lg="6">
<div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
<form class="space-y-6">
<div>
<label>Name</label> <br>
<input type="text" placeholder="Your full name"
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
</div>
<div>
<label>E-mail</label> <br>
<input type="email" placeholder="Your e-mail adress"
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
</div>
<div>
<label>Password</label> <br>
<input type="password" placeholder="Your password"
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
</div>
<div>
<label>Repeat Password</label> <br>
<input type="password" placeholder="Repeat your password"
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
</div>
<div>
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg">Sign up</button>
</div>
</form>
</div>
</v-col>
</v-row>
<FooterLayout></FooterLayout>
</v-app>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { RouterLink } from "vue-router";
</script>
<style></style>