rebuild front
This commit is contained in:
BIN
app/assets/fonts/proximanova_regular.ttf
Normal file
BIN
app/assets/fonts/proximanova_regular.ttf
Normal file
Binary file not shown.
BIN
app/assets/images/bg.gif
Normal file
BIN
app/assets/images/bg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
app/assets/images/thumb.jpg
Normal file
BIN
app/assets/images/thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 MiB |
45
app/assets/styles/app.css
Normal file
45
app/assets/styles/app.css
Normal 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
BIN
app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
@@ -2,95 +2,18 @@
|
|||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
|
||||||
<title>Ostiwe</title>
|
<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:title" content="Ostiwe"/>
|
||||||
<meta name="og:image" content="thumb.png"/>
|
<meta name="og:image" content="./assets/images/thumb.jpg"/>
|
||||||
<style>
|
<link rel="stylesheet" href="./assets/styles/app.css">
|
||||||
* {
|
|
||||||
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>
|
|
||||||
</head>
|
</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>
|
<h1 class="page-title">Ostiwe</h1>
|
||||||
<canvas id="canvas-interactive"></canvas>
|
</div>
|
||||||
<script src="./granim.min.js"></script>
|
</div>
|
||||||
<script>
|
|
||||||
function shuffle(array) {
|
|
||||||
let currentIndex = array.length, temporaryValue, randomIndex;
|
|
||||||
|
|
||||||
// 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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
BIN
app/thumb.png
BIN
app/thumb.png
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
Reference in New Issue
Block a user