timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 19:13:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
timothypidashev
2021-07-15 04:24:38 +00:00
parent b16dd09fbd
commit 551e6cbd0e
2 changed files with 37 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/Background.vue
View File

@@ -1,14 +0,0 @@
<template>
<div>
<div class="backgroundImage" :style="{ backgroundImage: `url(${backgroundImagePath})` }">
</div>
</template>
<script>
import backgroundImagePath from '~/assets/background.jpg'
export default {
data() {
return { backgroundImagePath }
}
}
</script>

42
pages/index.vue
View File

@@ -1,7 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<div> <div>
<Background />
<h1 class="title"> <h1 class="title">
Timothy Pidashev Timothy Pidashev
</h1> </h1>
@@ -32,6 +31,12 @@
<style> <style>
.container { .container {
background-color: transparent !important;
background-image: linear-gradient(to bottom, #200933 75%, #3d0b43);
background-size: auto 100vh;
background-position: top;
background-repeat: no-repeat;
position: relative;
margin: 0 auto; margin: 0 auto;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@@ -39,19 +44,46 @@
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.container:after{
content:'';
height:300px;
width:100%;
display:block;
background-image:linear-gradient(90deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px), linear-gradient(0deg, rgba(252,25,154,.1) 1px, rgba(0,0,0,0) 1px);
background-position:bottom;
background-repeat:repeat;
background-size:20px 20px;
left: -25px;
position: fixed;
pointer-events: none;
bottom: 0;
transform: perspective(100px) rotateX(60deg);
z-index: 0;
}
.container::backdrop {
background-image: repeating-linear-gradient(to bottom, transparent 0 ,transparent 2px, #FFF 2px, #FFF 4px);
background-size: 100% 4px cover;
transform-origin: 50% 50%;
content: '';
opacity: 0.02;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.title { .title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, font-family: 'New_Zelek' 'Arial';
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block; display: block;
font-weight: 300; font-weight: 300;
font-size: 100px; font-size: 100px;
color: #35495e; color: #FF2965;
letter-spacing: 1px; letter-spacing: 1px;
} }
.subtitle { .subtitle {
font-weight: 300; font-weight: 300;
font-size: 42px; font-size: 42px;
color: #526488; color: #FF2965;
word-spacing: 5px; word-spacing: 5px;
padding-bottom: 15px; padding-bottom: 15px;
} }