74 lines
3.2 KiB
Vue
74 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 col-lg-4 bg-img" :style="{ backgroundImage: `url(${backgroundImagePath})` }" >
|
||
|
|
</div>
|
||
|
|
<div class="col-12 col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5 ">
|
||
|
|
<div class="pb-2 text-center">
|
||
|
|
<img src="~/assets/image/Logo.png" style="width: 200px" />
|
||
|
|
</div>
|
||
|
|
<div class="text-center pt-1">
|
||
|
|
<h2 class="fw-bolder display-6 text-center" >Sign Up</h2>
|
||
|
|
<span class="fs-5 pt-2 text-muted">Helo , <span class="fw-bolder text-dark">Beautiful!</span></span>
|
||
|
|
<p class="text-muted pt-2 text-center fs-5 pb-0 mb-0">Mindboost helps you block out distracting noise with concentration-boosting music, increasing your productivity by up to 35%.</p>
|
||
|
|
</div>
|
||
|
|
<div class="row pt-3 pb-5">
|
||
|
|
<div class="col-12">
|
||
|
|
<form>
|
||
|
|
<div class="row px-0 px-md-4 pb-2">
|
||
|
|
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
||
|
|
<label class="form-label">First Name</label>
|
||
|
|
<input type="text" placeholder="First Name" class="form-control">
|
||
|
|
</div>
|
||
|
|
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
||
|
|
<label class="form-label">Surname</label>
|
||
|
|
<input type="text" placeholder="Surname" class="form-control">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row px-0 px-md-4 pb-2">
|
||
|
|
<div class="col-12 col-md-6 pt-2 col-lg-6 ">
|
||
|
|
<label class="form-label">Email</label>
|
||
|
|
<input type="text" placeholder="Email" class="form-control">
|
||
|
|
</div>
|
||
|
|
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
||
|
|
<label class="form-label">Password</label>
|
||
|
|
<input type="password" placeholder="Password" class="form-control">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row px-4 pt-3 pb-2">
|
||
|
|
<div class="col-10">
|
||
|
|
<div class="form-check">
|
||
|
|
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
|
||
|
|
<label class="form-check-label" for="flexCheckIndeterminate">
|
||
|
|
I agree to Mindboost's terms and conditions. You can read about how we use and protect your information in our Privacy Policy.
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row px-4 pt-3">
|
||
|
|
<div class="col-12">
|
||
|
|
<button type="button" class="login-btn col-4">Signup</button>
|
||
|
|
<p class="pt-3">Already have an Account? <NuxtLink class="signup-link" href="login">Log In</NuxtLink></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import backgroundImagePath from '~/assets/image/login4.png'
|
||
|
|
export default {
|
||
|
|
|
||
|
|
name:'LoGin',
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
backgroundImagePath:backgroundImagePath,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|