Высрал главную страницу, доволен

This commit is contained in:
Mootfrost777 2022-11-20 21:18:22 +03:00
parent 32bfbf6a07
commit fd91dc33ba
60 changed files with 1001 additions and 23 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1,666 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, noarchive">
<title>Transfonter demo</title>
<link href="stylesheet.css" rel="stylesheet">
<style>
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* common styles */
body {
background: #f1f1f1;
color: #000;
}
.page {
background: #fff;
width: 920px;
margin: 0 auto;
padding: 20px 20px 0 20px;
overflow: hidden;
}
.font-container {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 40px;
line-height: 1.3;
white-space: nowrap;
padding-bottom: 5px;
}
h1 {
position: relative;
background: #444;
font-size: 32px;
color: #fff;
padding: 10px 20px;
margin: 0 -20px 12px -20px;
}
.letters {
font-size: 25px;
margin-bottom: 20px;
}
.s10:before {
content: '10px';
}
.s11:before {
content: '11px';
}
.s12:before {
content: '12px';
}
.s14:before {
content: '14px';
}
.s18:before {
content: '18px';
}
.s24:before {
content: '24px';
}
.s30:before {
content: '30px';
}
.s36:before {
content: '36px';
}
.s48:before {
content: '48px';
}
.s60:before {
content: '60px';
}
.s72:before {
content: '72px';
}
.s10:before, .s11:before, .s12:before, .s14:before,
.s18:before, .s24:before, .s30:before, .s36:before,
.s48:before, .s60:before, .s72:before {
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: normal;
font-style: normal;
color: #999;
padding-right: 6px;
}
pre {
display: block;
position: relative;
padding: 9px;
margin: 0 0 10px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
font-size: 13px;
line-height: 1.428571429;
color: #333;
font-weight: normal !important;
font-style: normal !important;
background-color: #f5f5f5;
border: 1px solid #ccc;
overflow-x: auto;
border-radius: 4px;
}
pre:after {
display: block;
position: absolute;
right: 0;
top: 0;
content: 'Usage';
line-height: 1;
padding: 5px 8px;
font-size: 12px;
color: #767676;
background-color: #fff;
border: 1px solid #ccc;
border-right: none;
border-top: none;
border-radius: 0 4px 0 4px;
z-index: 10;
}
/* responsive */
@media (max-width: 959px) {
.page {
width: auto;
margin: 0;
}
}
</style>
</head>
<body>
<div class="page">
<div class="demo" style="font-family: 'Raleway'; font-weight: 900; font-style: normal;">
<h1>Raleway Black</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 900;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 200; font-style: normal;">
<h1>Raleway ExtraLight</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 200;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 500; font-style: normal;">
<h1>Raleway Medium</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 500;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 300; font-style: italic;">
<h1>Raleway Light Italic</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 300;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: normal; font-style: normal;">
<h1>Raleway</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: normal;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 300; font-style: normal;">
<h1>Raleway Light</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 300;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 100; font-style: normal;">
<h1>Raleway Thin</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 100;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 800; font-style: italic;">
<h1>Raleway ExtraBold Italic</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 800;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 200; font-style: italic;">
<h1>Raleway ExtraLight Italic</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 200;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 500; font-style: italic;">
<h1>Raleway Medium Italic</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 500;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: bold; font-style: italic;">
<h1>Raleway Bold Italic</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: bold;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 100; font-style: italic;">
<h1>Raleway Thin Italic</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 100;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 600; font-style: italic;">
<h1>Raleway SemiBold Italic</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 600;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 600; font-style: normal;">
<h1>Raleway SemiBold</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 600;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: normal; font-style: italic;">
<h1>Raleway Italic</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: normal;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: bold; font-style: normal;">
<h1>Raleway Bold</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: bold;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 800; font-style: normal;">
<h1>Raleway ExtraBold</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 800;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'Raleway'; font-weight: 900; font-style: italic;">
<h1>Raleway Black Italic</h1>
<pre>.your-style {
font-family: 'Raleway';
font-weight: 900;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя <br />
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ <br />
abcdefghijklmnopqrstuvwxyz <br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ <br /> 0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,199 @@
/* This stylesheet generated by Transfonter (https://transfonter.org) on October 3, 2017 10:11 PM */
@font-face {
font-family: 'Raleway';
src: url('Raleway-Black.eot');
src: local('Raleway Black'), local('Raleway-Black'),
url('Raleway-Black.eot?#iefix') format('embedded-opentype'),
url('Raleway-Black.woff') format('woff'),
url('Raleway-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-ExtraLight.eot');
src: local('Raleway ExtraLight'), local('Raleway-ExtraLight'),
url('Raleway-ExtraLight.eot?#iefix') format('embedded-opentype'),
url('Raleway-ExtraLight.woff') format('woff'),
url('Raleway-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-Medium.eot');
src: local('Raleway Medium'), local('Raleway-Medium'),
url('Raleway-Medium.eot?#iefix') format('embedded-opentype'),
url('Raleway-Medium.woff') format('woff'),
url('Raleway-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-LightItalic.eot');
src: local('Raleway Light Italic'), local('Raleway-LightItalic'),
url('Raleway-LightItalic.eot?#iefix') format('embedded-opentype'),
url('Raleway-LightItalic.woff') format('woff'),
url('Raleway-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-Regular.eot');
src: local('Raleway'), local('Raleway-Regular'),
url('Raleway-Regular.eot?#iefix') format('embedded-opentype'),
url('Raleway-Regular.woff') format('woff'),
url('Raleway-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-Light.eot');
src: local('Raleway Light'), local('Raleway-Light'),
url('Raleway-Light.eot?#iefix') format('embedded-opentype'),
url('Raleway-Light.woff') format('woff'),
url('Raleway-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-Thin.eot');
src: local('Raleway Thin'), local('Raleway-Thin'),
url('Raleway-Thin.eot?#iefix') format('embedded-opentype'),
url('Raleway-Thin.woff') format('woff'),
url('Raleway-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-ExtraBoldItalic.eot');
src: local('Raleway ExtraBold Italic'), local('Raleway-ExtraBoldItalic'),
url('Raleway-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
url('Raleway-ExtraBoldItalic.woff') format('woff'),
url('Raleway-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-ExtraLightItalic.eot');
src: local('Raleway ExtraLight Italic'), local('Raleway-ExtraLightItalic'),
url('Raleway-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
url('Raleway-ExtraLightItalic.woff') format('woff'),
url('Raleway-ExtraLightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-MediumItalic.eot');
src: local('Raleway Medium Italic'), local('Raleway-MediumItalic'),
url('Raleway-MediumItalic.eot?#iefix') format('embedded-opentype'),
url('Raleway-MediumItalic.woff') format('woff'),
url('Raleway-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-BoldItalic.eot');
src: local('Raleway Bold Italic'), local('Raleway-BoldItalic'),
url('Raleway-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('Raleway-BoldItalic.woff') format('woff'),
url('Raleway-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-ThinItalic.eot');
src: local('Raleway Thin Italic'), local('Raleway-ThinItalic'),
url('Raleway-ThinItalic.eot?#iefix') format('embedded-opentype'),
url('Raleway-ThinItalic.woff') format('woff'),
url('Raleway-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-SemiBoldItalic.eot');
src: local('Raleway SemiBold Italic'), local('Raleway-SemiBoldItalic'),
url('Raleway-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('Raleway-SemiBoldItalic.woff') format('woff'),
url('Raleway-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-SemiBold.eot');
src: local('Raleway SemiBold'), local('Raleway-SemiBold'),
url('Raleway-SemiBold.eot?#iefix') format('embedded-opentype'),
url('Raleway-SemiBold.woff') format('woff'),
url('Raleway-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-Italic.eot');
src: local('Raleway Italic'), local('Raleway-Italic'),
url('Raleway-Italic.eot?#iefix') format('embedded-opentype'),
url('Raleway-Italic.woff') format('woff'),
url('Raleway-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-Bold.eot');
src: local('Raleway Bold'), local('Raleway-Bold'),
url('Raleway-Bold.eot?#iefix') format('embedded-opentype'),
url('Raleway-Bold.woff') format('woff'),
url('Raleway-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-ExtraBold.eot');
src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'),
url('Raleway-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('Raleway-ExtraBold.woff') format('woff'),
url('Raleway-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url('Raleway-BlackItalic.eot');
src: local('Raleway Black Italic'), local('Raleway-BlackItalic'),
url('Raleway-BlackItalic.eot?#iefix') format('embedded-opentype'),
url('Raleway-BlackItalic.woff') format('woff'),
url('Raleway-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}

View file

@ -16,7 +16,7 @@ particlesJS('particles-js',
{
"particles": {
"number": {
"value": 400,
"value": 100,
"density": {
"enable": true,
"value_area": 800
@ -106,7 +106,7 @@ particlesJS('particles-js',
"distance": 275.7066481263934,
"size": 4,
"duration": 0.3,
"opacity": 1,
"opacity": 0,
"speed": 3
},
"repulse": {

View file

@ -1 +1,100 @@
@import url(style.css);
path {
transition: 0.3s;
}
.main-title {
text-align: center;
font-size: 3em;
font-weight: 800;
color: white;
line-height: 0.9em;
letter-spacing: 0.1em;
margin: 5vh;
}
.main-title .thin {
font-weight: 200;
}
.lower-buttons {
font-size: 1.3em;
margin-top: 20px;
display: flex;
text-align: center;
}
.lower-buttons a {
text-decoration: none;
color: lightgray;
margin-bottom: 3px;
margin-top: 3px;
transition: 0.3s;
}
.lower-buttons a:hover {
transition: 0.3s;
}
.lower-buttons .email:hover {
color: #e6ca1c;
}
.lower-buttons a:hover {
color: white;
}
.lower-buttons a::before {
position: relative;
margin-right: 4px;
content: "";
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: lightgray;
background-repeat: no-repeat;
transition: 0.3s;
}
.lower-buttons a::after {
position: relative;
margin-left: 4px;
content: "";
display: inline-block;
top: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: lightgray;
background-repeat: no-repeat;
transition: 0.3s;
}
.lower-buttons a:hover::before {
transform: translateX(-12px);
background-color: white;
transition: 0.3s;
}
.lower-buttons a:hover::after {
transform: translateX(12px);
background-color: white;
transition: 0.3s;
}
.lower-buttons a.email:hover::before {
background-color: #e6ca1c;
}
.lower-buttons a.email:hover::after {
background-color: #e6ca1c;
}

View file

@ -1,6 +1,21 @@
@import url(/static/resources/fonts/Raleway/stylesheet.css);
body {
background-color: blue;
font-family: Raleway, sans-serif;
}
.overlay {
position: relative;
padding: 50px;
}
.btn-social {
margin-left: 5px;
margin-right: 5px;
text-decoration: none;
}
#particles-js {
background-color: black;
position: fixed;
@ -10,12 +25,3 @@ body {
left: 0;
z-index: 0;
}
.overlay {
position: relative;
padding: 50px;
}
.btn-actions {
}

View file

@ -28,26 +28,27 @@
</head>
<body ondragstart="return false;" ondrop="return false;">
<div id="particles-js"></div>
<script src="/static/resources/scripts/particles.js"></script>
<script src="/static/resources/scripts/app.js"></script>
<div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="768" height="922"></canvas></div>
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center overlay pe-none">
<h1 class="text-white text-uppercase">mootfrost</h1>
<p class="text-white text-uppercase">Enthusiast developer</p>
<div class="pe-auto socials">
<div class="social-icons flex-row">
<a id="github-s" href="https://github.com">
<div class="main-title text-uppercase">
<span>mootfrost</span>
<p class="thin">Development</p>
</div>
<div class="social">
<div class="pe-auto">
<div class="social-icons flex-row justify-content-center align-items-center">
<a class="btn-social" id="github-s" href="https://github.com">
<svg class="github-s" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="100" viewBox="0 0 24 24" width="100">
<path id="pathGit" d="m12 .5c-6.63 0-12 5.28-12 11.792 0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56 4.801-1.548 8.236-5.97 8.236-11.173 0-6.512-5.373-11.792-12-11.792z" fill="#ffffff" style="fill: rgb(255, 255, 255);"></path>
</svg>
</a>
<a id="telegram-s" href="https://github.com">
<a class="btn-social" id="telegram-s" href="https://github.com">
<svg id="telegram-s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100px" height="100px">
<path id="pathTeleg" d="M46.137,6.552c-0.75-0.636-1.928-0.727-3.146-0.238l-0.002,0C41.708,6.828,6.728,21.832,5.304,22.445 c-0.259,0.09-2.521,0.934-2.288,2.814c0.208,1.695,2.026,2.397,2.248,2.478l8.893,3.045c0.59,1.964,2.765,9.21,3.246,10.758 c0.3,0.965,0.789,2.233,1.646,2.494c0.752,0.29,1.5,0.025,1.984-0.355l5.437-5.043l8.777,6.845l0.209,0.125 c0.596,0.264,1.167,0.396,1.712,0.396c0.421,0,0.825-0.079,1.211-0.237c1.315-0.54,1.841-1.793,1.896-1.935l6.556-34.077 C47.231,7.933,46.675,7.007,46.137,6.552z M22,32l-3,8l-3-10l23-17L22,32z" fill="#ffffff" style="fill: rgb(255, 255, 255);"/>
</svg>
</a>
<a id="gitea-s" href="https://github.com">
<a class="btn-social" id="gitea-s" href="https://github.com" >
<svg class="gitea-s" height="100px" version="1.1" viewBox="0 0 640 640" width="100px" xmlns="http://www.w3.org/2000/svg">
<path d="M395.9 484.2L269 423.2C256.5 417.2 251.1 402 257.2 389.4L318.2 262.5C324.2 250 339.4 244.6 352 250.7C369.2 259 379.1 263.7 379.1 263.7L379 154.5L395.7 154.4L395.8 271.5C395.8 271.5 453.2 295.7 478.9 311.6C482.6 313.9 489.1 318.4 491.8 326C493.9 332.1 493.8 339.1 490.8 345.3L429.8 472.2C423.6 484.9 408.4 490.3 395.9 484.2Z" fill="#ffffff" fill-rule="evenodd" opacity="0" stroke="none" />
<path id="pathGitea" d="M326.8 380.1C318.6 380.2 311.4 385.9 309.5 393.9C307.6 401.9 311.5 410.2 318.6 413.9C326.3 417.9 336.1 415.7 341.3 408.5C346.4 401.4 345.6 391.6 339.5 385.4L363.5 336.3C365 336.4 367.2 336.5 369.7 335.8C373.8 334.9 376.8 332.2 376.8 332.2C381 334 385.4 336 390 338.3C394.8 340.7 399.3 343.2 403.4 345.6C404.3 346.1 405.2 346.7 406.2 347.5C407.8 348.8 409.6 350.6 410.9 353C412.8 358.5 409 367.9 409 367.9C406.7 375.5 390.6 408.5 390.6 408.5C382.5 408.3 375.3 413.5 372.9 421C370.3 429.1 374 438.3 381.8 442.3C389.6 446.3 399.2 444 404.3 437C409.3 430.2 408.9 420.7 403.2 414.4C405.1 410.7 406.9 407 408.8 403.1C413.8 392.7 422.3 372.7 422.3 372.7C423.2 371 428 362.4 425 351.4C422.5 340 412.4 334.7 412.4 334.7C400.2 326.8 383.2 319.5 383.2 319.5C383.2 319.5 383.2 315.4 382.1 312.4C381 309.3 379.3 307.3 378.2 306.1C382.9 296.4 387.6 286.8 392.3 277.1C388.2 275.1 384.2 273.1 380.1 271C375.3 280.8 370.4 290.7 365.6 300.5C358.9 300.4 352.7 304 349.5 309.9C346.1 316.2 346.8 324 351.4 329.7C351.4 329.7 326.8 380.1 326.8 380.1Z M622.7 149.8C618.6 145.7 613.1 145.8 613.1 145.8C613.1 145.8 495.9 152.4 435.2 153.8C421.9 154.1 408.7 154.4 395.6 154.5L395.6 271.7C390.1 269.1 384.5 266.4 379 263.8C379 227.4 378.9 154.6 378.9 154.6C349.9 155 289.7 152.4 289.7 152.4C289.7 152.4 148.3 145.3 132.9 143.9C123.1 143.3 110.4 141.8 93.9 145.4C85.2 147.2 60.4 152.8 40.1 172.3C-4.9 212.4 6.6 276.2 8 285.8C9.7 297.5 14.9 330 39.7 358.3C85.5 414.4 184.1 413.1 184.1 413.1C184.1 413.1 196.2 442 214.7 468.6C239.7 501.7 265.4 527.5 290.4 530.6C353.4 530.6 479.3 530.5 479.3 530.5C479.3 530.5 491.3 530.6 507.6 520.2C521.6 511.7 534.1 496.8 534.1 496.8C534.1 496.8 547 483 565 451.5C570.5 441.8 575.1 432.4 579.1 423.5C579.1 423.5 634.3 306.4 634.3 192.4C633.2 157.9 624.7 151.8 622.7 149.8ZM125.6 353.9C99.7 345.4 88.7 335.2 88.7 335.2C88.7 335.2 69.6 321.8 60 295.4C43.5 251.2 58.6 224.2 58.6 224.2C58.6 224.2 67 201.7 97.1 194.2C110.9 190.5 128.1 191.1 128.1 191.1C128.1 191.1 135.2 250.5 143.8 285.3C151 314.5 168.6 363 168.6 363C168.6 363 142.5 359.9 125.6 353.9ZM425.9 461.5C425.9 461.5 419.8 476 406.3 476.9C400.5 477.3 396 475.7 396 475.7C396 475.7 395.7 475.6 390.7 473.6L277.8 418.6C277.8 418.6 266.9 412.9 265 403C262.8 394.9 267.7 384.9 267.7 384.9L322 273C322 273 326.8 263.3 334.2 260C334.8 259.7 336.5 259 338.7 258.5C346.8 256.4 356.7 261.3 356.7 261.3L467.4 315C467.4 315 480 320.7 482.7 331.2C484.6 338.6 482.2 345.2 480.9 348.4C474.6 363.8 425.9 461.5 425.9 461.5Z" fill="#ffffff" style="fill: rgb(255, 255, 255);"/>
@ -55,7 +56,12 @@
</a>
</div>
</div>
<div class="lower-buttons flex-column flex-wrap pe-auto thin text-uppercase">
<a href="mailto:hello@mootfrost.ru" class="email">hello@mootfrost.ru</a>
<a href="https://mootfrost.ru/about">About me</a>
<a href="https://mootfrost.ru/projects">Projects</a>
</div>
</div>
</div>
<script>
@ -69,6 +75,8 @@
gitea_s.onmouseenter = () => document.getElementById('pathGitea').style.fill = '#609926';
gitea_s.onmouseleave = () => document.getElementById('pathGitea').style.fill = '#ffffffff';
</script>
<script src="/static/resources/scripts/particles.js"></script>
<script src="/static/resources/scripts/app.js"></script>
<script src="/static/resources/bootstrap/js/bootstrap.js"></script>
</body>
</html>