parent
a9bdbf97f8
commit
b8f69acc10
@ -1,57 +1,73 @@
|
||||
<template>
|
||||
<section id="about">
|
||||
<div class="textContainer">
|
||||
<section id="about" class="grid-container">
|
||||
<div class="TextContainer grid-item">
|
||||
<h1>About Project XR</h1>
|
||||
<p>Lorem ipsum dolor sit amet. Cum dolorem blanditiis sit enim officia et voluptates aliquam. Eum maxime eligendi et perferendis vitae non vitae consequatur.</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet. Cum dolorem blanditiis sit enim officia et voluptates aliquam.
|
||||
Eum maxime eligendi et perferendis vitae non vitae consequatur.
|
||||
</p>
|
||||
</div>
|
||||
<div class="imgContainer">
|
||||
|
||||
<img src="/img/DemoFoto.png" alt="" id="DemoImg" >
|
||||
|
||||
<div class="ImgContainer grid-item">
|
||||
<img src="/img/DemoFoto.png" alt="Demo Image" id="DemoImg" />
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
<script>
|
||||
export default {
|
||||
name: 'about',
|
||||
};
|
||||
</script>
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#about {
|
||||
display: flex;
|
||||
margin-top: 10%;
|
||||
margin-bottom: 20%;
|
||||
}
|
||||
|
||||
.textContainer {
|
||||
padding: 10%;
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
margin: 10% 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
/* gap: 80px; */
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
/* Text Container Styling */
|
||||
.TextContainer {
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
.TextContainer h1 {
|
||||
/* font-size: 2.5rem; */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.imgContainer {
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
.TextContainer p {
|
||||
/* font-size: 1.2rem; */
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Image Container Styling */
|
||||
.ImgContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.imgContainer #DemoImg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.ImgContainer #DemoImg {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
mask-image: url(/img/union.svg);
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: right;
|
||||
mask-position: center;
|
||||
-webkit-mask-image: url(/img/union.svg);
|
||||
-webkit-mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="grid-container">
|
||||
<div class="form-container">
|
||||
<div>
|
||||
<h1>Please fill in your login details</h1>
|
||||
</div>
|
||||
<form @submit="login" class="login-form">
|
||||
<input type="email" name="email" id="email" placeholder="Email" required>
|
||||
<input type="password" name="password" id="password" placeholder="Password" required>
|
||||
<div class="login-msg"></div>
|
||||
<a href="#">Forgot password?</a>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="message-container" v-if="msg">
|
||||
<h4 v-if="msg">{{ msg }}</h4>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
return {
|
||||
msg: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
login(event) {
|
||||
event.preventDefault();
|
||||
console.log("Submitted, bro! 🤙");
|
||||
this.msg = "Unknown e-mail address or wrong password";
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100px;
|
||||
margin-bottom: 0%;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 50%;
|
||||
max-width: 800px;
|
||||
background-color: var(--cool-gray);
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
|
||||
gap: 5%;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
flex: 1 1 60%;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
background-color: lightcoral;
|
||||
border: solid 2px red;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h4 {
|
||||
/* background-color: lightcoral;
|
||||
border: solid 2px red; */
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: var(--vp-c-accent-hover);
|
||||
}
|
||||
|
||||
a {
|
||||
/* text-align: right; */
|
||||
font-size: 14px;
|
||||
color: var(--vp-c-text);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--vp-c-accent-hover);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text);
|
||||
border: 2px solid var(--vp-c-text);
|
||||
background-color: transparent;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--vp-c-accent-hover);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,150 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--vp-c-text: #171923;
|
||||
--vp-c-accent: #171923 ;
|
||||
--back-to-top-c-icon: #171923;
|
||||
--navbar-height: 5rem;
|
||||
--navbar-padding-l: 5rem;
|
||||
--vp-c-accent-bg: #171923;
|
||||
--vp-c-accent-hover: #0f1117;
|
||||
--light-pink: #bdb0bc;
|
||||
--px-bg-color: #ecebec;
|
||||
--cool-gray: #8e98a4;
|
||||
--content-width: 1200px;
|
||||
/* // --vp-c-bg: #ecebec; */
|
||||
--content-width: 50px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff2'),
|
||||
url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.vp-page .theme-default-content {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
/* // max-width: 1200px; */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* // border: solid black 5px; */
|
||||
/* // margin-top: 0 !important; */
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
|
||||
}
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
background-color: var(--px-bg-color);
|
||||
/* // overflow: hidden; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
section {
|
||||
margin-bottom: 30%;
|
||||
|
||||
}
|
||||
|
||||
.vp-navbar {
|
||||
background-color: #ecebec;
|
||||
}
|
||||
|
||||
.vp-page-meta {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.vp-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
button.vp-toggle-color-mode-button {
|
||||
display: none ;
|
||||
}
|
||||
|
||||
.theme-default-content h1, .theme-default-content h2, .theme-default-content h3 {
|
||||
margin-top: 0 !important;
|
||||
;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, p {
|
||||
/* // margin-top: 0 !important; */
|
||||
margin-bottom: 0px !important;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
color: var(--vp-c-text);
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 14px
|
||||
;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
}
|
||||
button {
|
||||
color: black;
|
||||
width: 15vw;
|
||||
height: 5vw;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
background-color: #ecebec;
|
||||
border-radius: 5px;
|
||||
transition: scale 0.2s ease;
|
||||
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #d0d0d0;
|
||||
scale: 0.95;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
/* // h1, h2, h3, p {
|
||||
// font-size: 1vw;
|
||||
// } */
|
||||
}
|
||||
@media (max-width: 425) {
|
||||
.theme-default-content h1 {
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
.my-button {
|
||||
font-size:10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
---
|
||||
title: project-XR
|
||||
lang: en-US
|
||||
darkMode: disable
|
||||
# smoothScroll: true
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import login from '../../components/login.vue'
|
||||
</script>
|
||||
|
||||
<login />
|
||||
Loading…
Reference in new issue