You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
992 B
57 lines
992 B
<template>
|
|
<section id="about">
|
|
<div class="textContainer">
|
|
<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>
|
|
</div>
|
|
<div class="imgContainer">
|
|
|
|
<img src="/img/DemoFoto.png" alt="" id="DemoImg" >
|
|
|
|
</div>
|
|
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'about',
|
|
};
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
#about {
|
|
display: flex;
|
|
margin-top: 10%;
|
|
margin-bottom: 20%;
|
|
}
|
|
|
|
.textContainer {
|
|
padding: 10%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
/* gap: 80px; */
|
|
width: 40%;
|
|
}
|
|
|
|
|
|
.imgContainer {
|
|
height: 80%;
|
|
width: 60%;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
.imgContainer #DemoImg {
|
|
height: 100%;
|
|
width: 100%;
|
|
mask-image: url(/img/union.svg);
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: right;
|
|
}
|
|
|
|
|
|
|
|
</style> |