parent
a9bdbf97f8
commit
b8f69acc10
@ -1,57 +1,73 @@
|
|||||||
<template>
|
<template>
|
||||||
<section id="about">
|
<section id="about" class="grid-container">
|
||||||
<div class="textContainer">
|
<div class="TextContainer grid-item">
|
||||||
<h1>About Project XR</h1>
|
<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>
|
||||||
</div>
|
Lorem ipsum dolor sit amet. Cum dolorem blanditiis sit enim officia et voluptates aliquam.
|
||||||
<div class="imgContainer">
|
Eum maxime eligendi et perferendis vitae non vitae consequatur.
|
||||||
|
</p>
|
||||||
<img src="/img/DemoFoto.png" alt="" id="DemoImg" >
|
</div>
|
||||||
|
<div class="ImgContainer grid-item">
|
||||||
</div>
|
<img src="/img/DemoFoto.png" alt="Demo Image" id="DemoImg" />
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'about',
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'about',
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
#about {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 10%;
|
|
||||||
margin-bottom: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.textContainer {
|
.grid-container {
|
||||||
padding: 10%;
|
display: grid;
|
||||||
|
grid-template-columns: 40% 60%;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: start;
|
||||||
|
margin: 10% 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
/* gap: 80px; */
|
|
||||||
width: 40%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Text Container Styling */
|
||||||
|
.TextContainer {
|
||||||
|
padding: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
.imgContainer {
|
.TextContainer h1 {
|
||||||
height: 80%;
|
/* font-size: 2.5rem; */
|
||||||
width: 60%;
|
margin-bottom: 20px;
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
.imgContainer #DemoImg {
|
|
||||||
height: 100%;
|
.TextContainer p {
|
||||||
width: 100%;
|
/* font-size: 1.2rem; */
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Image Container Styling */
|
||||||
|
.ImgContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ImgContainer #DemoImg {
|
||||||
|
width: 80%;
|
||||||
|
height: auto;
|
||||||
mask-image: url(/img/union.svg);
|
mask-image: url(/img/union.svg);
|
||||||
mask-size: contain;
|
mask-size: contain;
|
||||||
mask-repeat: no-repeat;
|
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>
|
</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