Changed image to svg

This commit is contained in:
iamsivin 2022-03-18 20:30:01 +05:30
parent e4109e8b16
commit 2d1cc47268
5 changed files with 181 additions and 7 deletions

View file

@ -1,6 +1,10 @@
<template> <template>
<div class="image--wrap flex-divided-view"> <div class="image--wrap">
<img src="../../login.png" alt="Signup" /> <div class="image">
<img src="./assets/top-left.svg" class="top-left absolute" />
<img src="./assets/center.svg" class="union-center absolute" />
<img src="./assets/bottom-right.svg" class="bottom-right absolute" />
</div>
</div> </div>
</template> </template>
@ -10,11 +14,36 @@ export default {};
<style lang="scss" scoped> <style lang="scss" scoped>
.image--wrap { .image--wrap {
flex-direction: column; display: flex;
position: relative;
flex: 1 1;
background: #56b9fc;
img { .absolute {
position: absolute;
}
.image {
.top-left {
width: 24rem;
height: 24rem;
top: 0;
left: 0;
}
.union-center {
width: 100rem;
height: 100vh; height: 100vh;
width: 100vw; padding: 0 var(--space-larger);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
width: 32rem;
height: 32rem;
right: 0;
bottom: 0;
}
} }
} }

View file

@ -0,0 +1,3 @@
<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M800 0H600V200H400V400H200V600H0V800H200H400H600H800V600V400V200V0Z" fill="#2773E4" fill-opacity="0.42"/>
</svg>

After

Width:  |  Height:  |  Size: 262 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7 MiB

View file

@ -0,0 +1,3 @@
<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M200 0H0V200V400V600H200V400H400V200H600V0H400H200Z" fill="#2773E4" fill-opacity="0.42"/>
</svg>

After

Width:  |  Height:  |  Size: 246 B

View file

@ -7,7 +7,7 @@
--w-75: #D6EBFF; --w-75: #D6EBFF;
--w-100: #C2E1FF; --w-100: #C2E1FF;
--w-200: #99CEFF; --w-200: #99CEFF;
--w-300: ##70BAFF; --w-300: #70BAFF;
--w-400: #47A6FF; --w-400: #47A6FF;
--w-500: #1F93FF; --w-500: #1F93FF;
--w-600: #1976CC; --w-600: #1976CC;