ostiwe-com/landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rebuild front

Browse Source
This commit is contained in:
Nikolay Anoshin
2022-03-19 16:36:47 +03:00
parent 600b69ea83
commit 9d44d79ffd
7 changed files with 54 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/fonts/proximanova_regular.ttf Normal file
View File

Binary file not shown.

BIN
app/assets/images/bg.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
app/assets/images/thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 MiB

45
app/assets/styles/app.css Normal file
View File

@@ -0,0 +1,45 @@
@font-face {
font-family: "ProximaNova";
src: url("../fonts/proximanova_regular.ttf") format("truetype");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
background-image: url(../images/bg.gif);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 100vh;
}
.page-title__wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.page-title {
position: relative;
color: rgb(88, 145, 229);
font-family: "ProximaNova", serif;
font-size: 56pt;
text-transform: uppercase;
}
.page-title::after {
position: absolute;
left: 5px;
top: 5px;
color: white;
content: "ostiwe";
font-family: "ProximaNova", serif;
font-size: 56pt;
text-transform: uppercase;
}

BIN
app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

93
app/index.html
View File

@@ -2,95 +2,18 @@
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<title>Ostiwe</title>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<meta name="og:title" content="Ostiwe"/>
<meta name="og:image" content="thumb.png"/>
<style>
* {
font-family: 'Permanent Marker', cursive;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#canvas-interactive {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.canvas-interactive-wrapper {
position: relative;
width: 100vw;
height: 100vh;
}
.page-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 8em;
z-index: 999;
}
</style>
<meta name="og:image" content="./assets/images/thumb.jpg"/>
<link rel="stylesheet" href="./assets/styles/app.css">
</head>
<body class="canvas-interactive-wrapper">
<body class="page-root">
<div class="page-title__wrapper">
<div class="page-title__wrapper-inner">
<h1 class="page-title">Ostiwe</h1>
<canvas id="canvas-interactive"></canvas>
<script src="./granim.min.js"></script>
<script>
function shuffle(array) {
let currentIndex = array.length, temporaryValue, randomIndex;
</div>
</div>
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
let gradients = [
['#21D4FD', '#B721FF'],
['#8EC5FC', '#E0C3FC'],
['#FEE140', '#FA709A'],
['#D9AFD9', '#97D9E1'],
['#FF3CAC', '#784BA0'],
['#A9C9FF', '#FFBBEC'],
['#F093FB', '#F5576C'],
['#A8EDEA', '#FED6E3'],
['#30CFD0', '#330867'],
['#89F7FE', '#66A6FF'],
];
new Granim({
element: '#canvas-interactive',
name: 'interactive-gradient',
elToSetClassOn: '.canvas-interactive-wrapper',
direction: 'diagonal',
isPausedWhenNotInView: false,
stateTransitionSpeed: 500,
states: {
'default-state': {
gradients: shuffle(gradients),
transitionSpeed: 10000,
},
},
});
</script>
</body>
</html>

BIN
app/thumb.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 77 KiB