Initial commit

pull/1/head
Zholnay Kirill 2021-11-02 11:56:22 +02:00
commit 1c439f2b56
133 changed files with 3953 additions and 0 deletions

2
.gitignore vendored Executable file
View File

@ -0,0 +1,2 @@
.idea/
.DS_Store

833
css/main.css Executable file
View File

@ -0,0 +1,833 @@
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden,
[hidden] {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}
/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*::before,
*::after {
background: #fff !important;
color: #000 !important;
/* Black prints faster */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
.git-link {
color: white;
}
.git-link:visited {
color: white;
text-decoration: underline;
}
a[href]::after {
content: " (" attr(href) ")";
}
abbr[title]::after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/* ---------------------- ---------------------- ---------------------- ---------------------- ---------------------- */
.nav {
background: #1D2934;
padding: 8px 18px;
}
.flex-box-wrap {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
}
.jc-sb {
justify-content: space-between;
}
.jc-fe {
justify-content: flex-end;
}
.flex-wrap {
flex-wrap: wrap;
}
.max-width {
max-width: 1440px;
width: 100%;
margin: auto;
}
.telegram-btn,
.telegram-btn:active,
.telegram-btn:link,
.telegram-btn:hover,
.telegram-btn:visited
{
background: #1ED9E7;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
width: 114px;
height: 32px;
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 136.5%;
text-align: center;
color: #1D2934;
text-decoration: none;
margin: auto;
}
.nav-logo-box {
width: 32px;
height: auto;
}
.nav-logo-box img {
width: 100%;
}
.nav-yellow-link,
.nav-yellow-link:active,
.nav-yellow-link:link,
.nav-yellow-link:hover,
.nav-yellow-link:visited{
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
text-align: center;
color: #1D2934;
text-decoration: none;
margin: 0 4px;
}
.nav-yellow-link img {
width: 100%;
height: auto;
}
.w-25 {
width: 25%;
}
.w-50 {
width: 50%;
}
.hero-first-block {
width: 100%;
}
.hero-third-block {
width: 100%;
padding-top: 32px;
}
.hero-img-box img {
width: 80%;
margin: 25px auto;
display: block;
}
body {
background: #121723;
}
.paragraph {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 136.5%;
text-align: center;
color: #FFFFFF;
margin: 0 auto 24px auto;
}
.download-btn,
.download-btn:active,
.download-btn:link,
.download-btn:hover,
.download-btn:visited {
background: #1ED9E7;
border-radius: 50px;
width: 226px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #1D2934;
text-decoration: none;
margin: auto;
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 136.5%;
}
.download-btn:last-of-type {
margin-bottom: 24px;
}
.color-grey {
background: #E2E2E2 !important;
margin-top: 16px !important;
}
.text-box, .blue-border {
border: 1px solid #1ED9E7;
border-radius: 25px;
margin-bottom: 60px;
padding: 0 15px;
}
.without-border {
border: none !important;
}
.install-page-header {
padding-top: 50px;
}
.blue-border ul {
list-style: decimal;
padding-left: 28px;
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: normal;
line-height: 136.5%;
color: #FFFFFF;
}
.blue-border ul li {
list-style: decimal;
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 136.5%;
color: #FFFFFF;
}
.blue-border a,
.blue-border a:hover,
.blue-border a:active,
.blue-border a:link,
.blue-border a:visited {
color: #1ED9E7;
}
.code-p {
background: #1ED9E7;
color: #1D2934;
padding: 5px;
border-radius: 4px;
}
.blue-border-img {
border: 1px solid #1ED9E7;
border-radius: 25px;
padding: 15px;
max-width: max-content;
margin: 0 auto 30px;
}
.pb-25 {
padding-bottom: 25px !important;
}
.blue-border img {
width: 100%;
}
.blue-border-img img {
width: 100%;
}
.header-p {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 136.5%;
color: #ffffff;
padding: 10px;
}
.top-header-p {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 136.5%;
color: #ffffff;
padding: 10px;
text-align: center;
margin-bottom: 24px;
}
.color-blue {
color: #1ED9E7;
}
.blue-border img {
width: 100%;
max-width: 500px;
margin: auto;
display: block;
}
.blue-border .bottom-p {
text-align: left;
}
.top-p {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 136.5%;
text-align: center;
letter-spacing: 0.03em;
color: #FFFFFF;
background: #121723;
width: min-content;
margin: -26px auto 0;
padding: 10px;
}
.bottom-p {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 136.5%;
text-align: center;
color: #FFFFFF;
margin-top: 0;
padding: 10px;
}
h2 {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 29px;
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
margin-bottom: 60px;
margin-top: 60px;
padding: 0 50px;
}
h2:last-of-type {
margin-top: 0px;
}
.margin-16 {
padding: 0 16px;
}
.img-box-slider div {
width: 30%;
}
.img-box-slider img {
width: 100%;
height: auto;
}
.img-box-slider {
display: flex;
justify-content: space-between;
padding: 0 12px;
}
.blue-box {
background: #1ED9E7;
border-radius: 12px;
padding: 24px 17px;
}
.blue-box p {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 136.5%;
/* or 22px */
text-align: center;
/* 1D2934 (Alt Dark) */
color: #1D2934;
}
.blue-box p:first-of-type {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 120.5%;
text-align: center;
letter-spacing: 0.03em;
color: #111A22;
}
.text-image-box img {
display: block;
margin: auto;
margin-top: 24px;
}
.text-image-box .top-p {
margin: 0 auto;
}
footer {
height: 40px;
background: #1D2934;
display: flex;
justify-content: center;
}
footer a img {
margin: 10px 2px;
}
footer a {
display: block;
}
@media (min-width: 768px) {
.margin-16, .hero {
padding: 0 80px;
}
.nav {
padding-right: 80px;
padding-left: 80px;
}
}
.side-screens {
display: none;
}
@media (min-width: 992px) {
.top-header-p {
font-size: 28px;
}
.blue-border ul li {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 136.5%;
color: #ffffff;
}
.margin-16, .hero {
padding: 0 80px;
}
.nav {
padding-right: 80px;
padding-left: 80px;
}
.hero-first-block {
width: 70%;
order: 1;
}
.hero-third-block {
width: 30%;
order: 2;
}
.hero-second-block {
width: 100%;
order: 3;
}
.hero-third-block .download-btn {
max-width: 290px;
width: 100%;
height: 48px;
font-size: 16px;
}
.paragraph {
font-size: 16px;
padding-bottom: 32px;
margin-bottom: 0;
}
.telegram-btn,
.telegram-btn:active,
.telegram-btn:link,
.telegram-btn:hover,
.telegram-btn:visited {
width: 200px;
height: 48px;
font-size: 16px;
}
.nav-yellow-link,
.nav-yellow-link:active,
.nav-yellow-link:link,
.nav-yellow-link:hover,
.nav-yellow-link:visited {
width: 32px;
height: 32px;
}
a.lang-link, a.lang-link:visited {
color: #fadd4b;
text-decoration: none;
margin-right: 5px;
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: bold;
}
.nav-logo-box {
width: 77px;
}
.text-box, .big-box {
width: 45%;
}
.big-box {
align-self: flex-start;
}
.top-p {
margin: 0;
width: 100%;
font-size: 24px;
padding: 16px 0;
}
.bottom-p {
font-size: 16px;
}
.blue-box div p:first-of-type {
margin: 0;
width: 100%;
font-size: 24px;
padding: 16px 0;
}
.blue-box div p:last-of-type {
font-size: 16px;
}
footer {
margin-top: 112px;
height: 64px;
}
footer a img {
width: 32px;
height: auto;
margin: 0 8px;
}
footer a {
display: flex;
align-items: center;
}
.boxes .top-p {
width: 350px;
margin: -32px auto 0;
}
.boxes .top-p.custom-p {
margin-top: -54px;
}
.side-screens {
display: block;
}
.img-box-slider div {
width: 18%;
}
h2 {
font-size: 40px;
padding: 35px 0 85px;
margin: 0;
}
h2 {
padding-top: 85px;
}
h2.second {
margin-top: 0px;
padding: 35px 0 85px;
}
}

349
css/normalize.css vendored Executable file
View File

@ -0,0 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

BIN
en/img/screenshot1.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

BIN
en/img/screenshot2.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 325 KiB

BIN
en/img/screenshot4.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 KiB

BIN
en/img/screenshot5.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

382
en/index.html Executable file
View File

@ -0,0 +1,382 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="../font/stylesheet.css">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="icon" type="image/png" href="../favicon.png" />
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!-- Add your site or application content here -->
<div class="nav">
<div class="flex-box-wrap max-width">
<div class="w-25">
<div class="nav-logo-box">
<img src="../img/Logo.png" href="./index.html" alt="">
</div>
</div>
<div class="w-50">
<div>
<a class="telegram-btn" href="https://t.me/selfprivacy">
Telegram
</a>
</div>
</div>
<div class="w-25">
<div class="flex-box-wrap jc-fe">
<a class="lang-link" href="https://selfprivacy.org/en/index.html">en</a>
<a class="lang-link" href="https://selfprivacy.org/">ru</a>
<a class="nav-yellow-link" href="https://social.selfprivacy.org">
<img src="../img/Twitter%20Logo.svg" alt="">
</a>
<a class="nav-yellow-link" href="https://git.selfprivacy.org">
<img src="../img/Vector.svg" alt="">
</a>
</div>
</div>
</div>
</div>
<div class="hero">
<div class="max-width">
<div class="flex-box-wrap flex-wrap">
<div class="hero-first-block ">
<div class="hero-img-box">
<img src="../img/Illustration.svg" alt="">
</div>
</div>
<div class="hero-second-block">
<p class="paragraph">
Platform on user's hosting provider, managed via mobile application.
</p>
<div class="img-box-slider">
<div class="side-screens">
<img src="img/screenshot1.jpg" alt="img">
</div>
<div>
<img src="img/screenshot2.jpg" alt="img">
</div>
<div>
<img src="img/screenshot2.jpg" alt="img">
</div>
<div>
<img src="img/screenshot4.jpg" alt="img">
</div>
<div class="side-screens">
<img src="img/screenshot5.jpg" alt="img">
</div>
</div>
</div>
<div class="hero-third-block">
<a class="download-btn" href="https://selfprivacy.org/selfprivacy.apk">Get it on F-Droid</a>
<a class="download-btn color-grey" href="second.html">Detailed manual</a>
<p class="paragraph"><a class="git-link" href="https://git.selfprivacy.org">Project source in the
git-repo</a><br />http://git.selfprivacy.org</p>
</div>
</div>
</div>
</div>
<div class="margin-16 boxes">
<div class="max-width">
<h2>
Your personal services
</h2>
<div class="flex-box-wrap flex-wrap jc-sb">
<div class="text-box">
<p class="top-p">
E-Mail
</p>
<p class="bottom-p">
For the company or family. Unlimited mailboxes amount.
</p>
</div>
<div class="text-box">
<p class="top-p">
Messenger
</p>
<p class="bottom-p">
The most private messenger
is the messenger, which server part resides on your own server. That's what makes Delta.Chat
more private then Telegram or Signal.
</p>
</div>
<div class="text-box">
<p class="top-p">
Password Manager
</p>
<p class="bottom-p">
No more need to design, remember and manually input your passwords.
<br>
<br>
Bitwarden — reliable password manager for all of your devices.
</p>
</div>
<div class="text-box">
<p class="top-p">
Cloud storage
</p>
<p class="bottom-p">
Nextcloud — private
and functional replacement
of Dropbox and G-drive.
</p>
</div>
<div class="text-box">
<p class="top-p">
Videomeet
</p>
<p class="bottom-p">
No more need in Zoom and Google-meet, when there's Jitsi-meet around. Simple and handy solution for videoconferences.
</p>
</div>
<div class="text-box">
<p class="top-p">
Git repository
</p>
<p class="bottom-p">
Gitea is a great Github alternative, that belongs to you,
but not to Microsoft.
</p>
</div>
<div class="text-box">
<p class="top-p custom-p">
VPN for all of your friends and relatives devices
</p>
<p class="bottom-p">
No public VPN
can be private,
but only those, deployed on your own server.
OpenConnect
— connect unlimited amount of devices.
</p>
</div>
<div class="text-box">
<p class="top-p">
Decentralized social network
</p>
<p class="bottom-p">
Pleroma is a social network where you decide who to ban and what to post. No more advertisments and tracking.
</p>
</div>
</div>
</div>
</div>
<div class="margin-16 ">
<div class="max-width">
<h2 class="second">Advantages</h2>
<div class="flex-box-wrap flex-wrap jc-sb">
<div class="big-box">
<div class="blue-box">
<div>
<p>
Zero trust
</p>
<p>
SelfPrivacy is designed according to "zero trust" concept, even in relation to SelfPrivacy developers.
It means that you're the only owner of your data.
</p>
</div>
<div>
<p>
Simplicity
</p>
<p>
It just works. No console, complicated manuals, monitoring and staff involvement.
</p>
</div>
<div>
<p>
Functionality
</p>
<p>
Your data won't disappear without any trace due to regular backups into the
separate datacenter.
</p>
</div>
</div>
</div>
<div class="big-box">
<div class="text-image-box">
<img src="../img/cd-icon.png" alt="icon">
<p class="top-p">
Data control
</p>
<p class="bottom-p">
Why corporations need your data?
To make you buy more and vote as they want.
With SelfPrivacy, your data is only in your hands.
</p>
</div>
<div class="text-image-box">
<img src="../img/shield-icon.png" alt="icon">
<p class="top-p">
Security
</p>
<p class="bottom-p">
Open source. Reward of $1000 for found RCE vulnerability drastically rises security
in comparison with other self-hosted solutions.
</p>
</div>
</div>
<div class="big-box">
<div class="text-image-box">
<img src="../img/list-icon.png" alt="icon">
<p class="top-p">
No license agreements
</p>
<p class="bottom-p">
What do you allow to do with your data, while agreeing to license agreements without reading?
You allow to do anything that companies want.
SelfPrivacy has no license agreements.
</p>
</div>
<div class="text-image-box">
<img src="../img/like-icon.png" alt="icon">
<p class="top-p">
Save&nbsp;your time&nbsp;and&nbsp;money
</p>
<p class="bottom-p">
How to save $500 or two weeks of your life?
How much time and money will specialist require to setup everything of that from the very beginning?
<br><br>
SelfPrivacy team works hard to speed up and simplify this process to the few clicks.
<br><br>
Now anyone will be capable of setting up their own DC.
</p>
</div>
</div>
<div class="big-box">
<div class="text-image-box">
<img src="../img/ind-icon.png" alt="icon">
<p class="top-p">
Independency
</p>
<p class="bottom-p">
Your communications on the internet no longer depend on Google, Facebook, Amazon and others E-Corps.
<br><br>
Your services — your rules!
You won't be banned for any reason. Your infrastructure and data
will always be with you.
</p>
</div>
<div class="text-image-box">
<img src="../img/eye-icon.png" alt="icon">
<p class="top-p">
Privacy
</p>
<p class="bottom-p">
No registration, cookies, telemetry, logs, analytics, clouds.
</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<a href="https://social.selfprivacy.org">
<img src="../img/Twitter-Logo.svg" alt="">
</a>
<a href="https://t.me/selfprivacy">
<img src="../img/Telegram-Logo.svg" alt="">
</a>
<a href="https://git.selfprivacy.org">
<img src="../img/GitHub%20Logo.svg" alt="">
</a>
</footer>
<!--<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
-->
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<!--<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>-->
</body>
</html>

409
en/second.html Executable file
View File

@ -0,0 +1,409 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="../font/stylesheet.css">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="icon" type="image/png" href="../favicon.png" />
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!-- Add your site or application content here -->
<div class="nav">
<div class="flex-box-wrap max-width">
<div class="w-25">
<div class="nav-logo-box">
<img src="../img/Logo.png" alt="">
</div>
</div>
<div class="w-50">
<div>
<a class="telegram-btn" href="https://t.me/selfprivacy">
Telegram
</a>
</div>
</div>
<div class="w-25">
<div class="flex-box-wrap jc-fe">
<a href="https://selfprivacy.org/en/index.html">en</a>
<a href="https://selfprivacy.org/">ru</a>
<a class="nav-yellow-link" href="https://social.selfprivacy.org">
<img src="../img/Twitter%20Logo.svg" alt="">
</a>
<a class="nav-yellow-link" href="https://git.selfprivacy.org">
<img src="../img/Vector.svg" alt="">
</a>
</div>
</div>
</div>
</div>
<div class="margin-16 boxes">
<div class="max-width">
<h2 class="install-page-header">
Deployment and setup
</h2>
<div class="blue-border">
<p></p>
<p class="bottom-p">
SelfPrivacy-server takes about an hour to be created. Sounds scary, but believe me, no PhD
required to accomplish that. It's as simple as purchase in the e-shop.
</p>
<ul>
<li>
<!--1. -->Searching for ID and a card with balance of $10-15
</li>
<li>
<!--2. -->Registering your accounts
</li>
<li>
<!--3. -->Securing your accounts
</li>
<li>
<!--4. -->Purchasing a domain
</li>
<li>
<!--5. -->Pointing your domain to a DNS server
</li>
<li>
<!--6. -->🔑 Generating tokens
</li>
<li>
<!--7. -->Installation
</li>
<li>
<!--8. -->Connecting to the services 🎉
</li>
</ul>
<p class="bottom-p">
If you delegate this process to someone else, you'll loose your privacy. For the 100% independency
and control
we recommend to do everything on your own.
</p>
</div>
<div class="blue-border">
<p class="top-p">
Account registration
</p>
<p class="bottom-p">
SelfPrivacy makes use of many different accounts for the reliablity. If you hold everything in one
place,
you'll get the same you've been running from. All data in hands of one corporation🤦
</p>
<p class="bottom-p">
That's why, different parts of your system will be in different places. Let's register:
</p>
<ul>
<li>
<a href="https://accounts.hetzner.com/signUp">Hetzner </a>is a virtual server hosting. Here
will be a home for all of yor data.
</li>
<li>
<a href="https://www.namecheap.com/myaccount/signup/">NameCheap</a> or any other
registrar, to buy your personal address on the Internet, that will point directly to your
server.
</li>
<li>
<a href="https://dash.cloudflare.com/sign-up">CloudFlare </a>is a DNS server, where your
personal
address(domain) works.
</li>
<li>
<a
href="https://portal.aws.amazon.com/gp/aws/developer/registration/index.html?nc2=h_ct&src=default">
Backblaze </a>is an IaaS, that provides free storage for your encrypted backups.
</li>
</ul>
<p class="bottom-p">
Registration is trivial, but sometimes account activation may take up to few days, but not longer.
That's why please be advised to use real data.
Providers protect themselves from spam in such way. Nothing personal.
</p>
</div>
<div class="blue-border">
<p class="top-p">
Protecting your accounts
</p>
<p class="bottom-p">
Systems are being compromised by the weakest part. That's why, password for all your accounts
should be different and complicated. TwinkleTwinkleLittleStar is a great example of a bad password.
A good one 🌈 is a
passphrase:
</p>
<p class="code-p">
expert repose postwar anytime glimpse freestyle liability effects
</p>
<p class="bottom-p">or</p>
<p class="code-p">
}Rj;EtG:,M!bc4/|
</p>
<p class="bottom-p">
How to remember such complicated password? No way! No need to remember passwords. They should be
created and stored in the <a href="https://keepassxc.org/download/">password manager</a>. Though,
you'll
have to remember at least one... Main password for the password manager.
</p>
<p class="bottom-p">
Additional protection for your accounts should be enabled in the mandatory order.
It called multifactor authentication(MFA, 2FA).
Without this simple step, all your data will be insecure.
</p>
<p class="bottom-p">
It may have been complicated a bit, but now you're protected better than 95% of users.
You can be proud of yourself🤗
</p>
</div>
<h2>
Getting a domain
</h2>
<p class="top-header-p">
Enabled 2FA? Then let's proceed to the most interesting part!
</p>
<div class="blue-border-img">
<img src="../img/nc-buy-domain.gif" alt="gif">
</div>
<p class="bottom-p pb-25">
<i>Domain</i> — it's a piece of Internet, which you can name like your home pet. Potential for
creativity is huge.
Your only limitations are 63 symbols length + .com .org .icu or other domain zones. Feel free to choose
among hundreds of others.
You can choose your surname as a domain, like this: jackson.live or carson.health, or it can be
something creative,
like: unicorn-land.shop
</p>
<div class="blue-border">
<p class="top-p">
Advices
</p>
<ul>
<li>Attentively check price for the annual domain prolongation. It may drastically differ from the
initial acquision price.</li>
<li>Average domain price is around $8-10 anually. The most cheap are .icu and .cyou — $4-6.</li>
<li>Memorable domain name can be easily shared during phone call or written on the business card.
</li>
<li>Surname in the domain is good as you can share your domain with everyone who carries your
surname, like this:
name.secondname@surname.com or ns@surname.com or name@surname.com</li>
<li>During domain registration, make sure to enter your real e-mail address, otherwise your
registration can be
canceled. If you wont be able to prolong your domain, nothing will work as intended.</li>
<li>Did I mentioned 2FA?</li>
</ul>
</div>
<p class="top-header-p">
Connecting your domain to the DNS server
</p>
<p class="bottom-p">
After acquision, add your domain itno CloudFlare:
</p>
<div class="blue-border-img">
<img src="../img/add-domain-to-cf.gif" alt="gif">
</div>
<p class="bottom-p">
Using <span class="color-blue">ruleit.stream</span> as example, we picked free service plan
and got nameservers: <span class="color-blue">gail.ns.cloudflare.com</span> and <span
class="color-blue">mattns.cloudflare.com</span>, that should be defined at your registrar.
In our case it's <span class="color-blue">NameCheap:</span>
</p>
<div class="blue-border-img">
<img src="../img/nc-to-cf.gif" alt="gif">
</div>
<p class="bottom-p">
By the way, be adviced to check if automatic prolongation and domain theft protection is enabled.
In a few minutes, or a few days in a worst scenario
settings will apply.
</p>
<h2>
🔑 Generating tokens
</h2>
<div class="blue-border">
<p class="top-p">
API tokens
</p>
<p class="bottom-p">
<i>API tokens</i> are almost the same as login and password, but designed to be used by
programs, rather then humans. SelfPivacy Manager uses them to manage your services on your demand.
</p>
<p class="bottom-p">
Tokens should be stored in the <a href="https://keepassxc.org/download/">password manager</a>
</p>
<p class="bottom-p">
We do not need a token for the NameCheap. But we will need one for the CloudFlare
to use it for domain management.
</p>
<p class="header-p">
CloudFlare
</p>
<ul>
<li>Visit the following <a href="https://dash.cloudflare.com/">link</a></li>
<li>In the upper right corner, click on the profile icon(circled human icon). For the mobile version
of the site, in
upper left corner, press <b>Menu</b> button(three horisontal bars). In the dropdown menu,
click on <b>My Profile</b></li>
<li>We are presented with four settings: <b>Communication, Authentication, API
Tokens, Session. Choose API Tokens.</b></li>
<li>The first thing we'll see is a <b>Create Token</b> button. With full confidence in yourself🤗
push this button.</li>
<li>If you scroll down to the end of the page, you'll see <b>Create Custom Token</b> field and
<b>Get Started</b>
button. Click it.</li>
<li>In the <b>Token Name</b> field, give your token a name, because tokens feel sad when they're
unnamed :)</li>
<li>Next we have Permissions. first field please specify: Zone. In the most wide, central field
please specify: DNS. In the last field, specify: Edit</li>
<li>Next, right under this filed, click on <b>Add More</b>. Similar field will appear.</li>
<li>In the first field, we select <b>Zone</b>, the same way as in previous step.
A the central field, situation slightly differs this time. Here we pick the same as in left
field - <b>Zone</b>. At the right
field, pick <b>Read</b>.</li>
<li>Next, please take a look at the <b>Zone Resources</b>. Under this sign, there's string with two
fiels.
In the left one should be <b>Include</b>, and in the right one - <b>Specific Zone</b>. As soon
as you pick
<b>Specific Zone</b>, another one field will appear. Select your domain there.
</li>
<li>Scroll to the very end of the page and click big and blue <b>Continue to Summary.</b> button.
</li>
<li>Check if everything picked correctly. Similar string should be shown: your.domain -
<b>DNS:Edit, Zone:Read.</b>
</li>
<li>Click <b>Create Token.</b></li>
<li>Copy newly created token and save it in reliable place(preferrably - in the password manager).
</li>
</ul>
<img src="../img/CloudFlare.gif" alt="gif">
<p class="header-p">
Hetzner
</p>
<ul>
<li>Visit the following<a href="https://console.hetzner.cloud/">link</a> and sign into
newly created account.</li>
<li>Enter into previously created project. If you haven't created one, then please proceed.</li>
<li>Hover side panel with mouse cursor. Panel should expand and show us a menu. We're interested
in the last one — <b>Security</b> (icon of a key).</li>
<li>Next, in the upper part of an interface, we can see approximately the following: <b>SSH Keys,
API Tokens,
Certificates, Members.</b> You need <b>API Tokens</b>. Click on it.</li>
<li>In the right part of the interface, there should be <b>Generate API token</b> button. If you're
using
mobile version og a webpage, in the lower right corner you'll see <b>red cross</b>. Push that
button.</li>
<li>In the <b>Description</b> field, give our token a name (this can be any name that
you like. It doesn't influence the essence.</li>
<li>Under the <b>Description</b> field we can see a possibility to choose <b>permissions</b>. Pick
<b>Read & Write</b>.
</li>
<li>Click <b>Generate API Token.</b></li>
<li>After that, our key will be shown. Store it in the reliable place, or in the password
manager, which is better.</li>
</ul>
<img src="../img/Hetzner.gif" alt="gif">
<p class="header-p">
Backblaze B2
</p>
<ul>
<li>Visit the following <a href="https://secure.backblaze.com/user_overview.htm">link</a></li>
<li>In the left part of an interface click on the <b>App Keys</b> in the <b>B2 Cloud Storage</b>
subcategory.</li>
<li>Click on the blue <b>Generate New Master Application Key</b> button.</li>
<li>In the appeared pop-up window confirm the generation.</li>
<li>Save keyID and applicationKey in the reliable place. For example - in the password manager :)
</li>
</ul>
<img src="../img/Backblaze.GIF" alt="gif">
<p class="header-p">
🎉 My congratulations. You're now ready to use your private services.
</p>
</div>
</div>
</div>
<footer>
<a href="https://social.selfprivacy.org">
<img src="img/Twitter-Logo.svg" alt="">
</a>
<a href="https://t.me/selfprivacy">
<img src="img/Telegram%20Logo.svg" alt="">
</a>
<a href="https://git.selfprivacy.org">
<img src="img/GitHub%20Logo.svg" alt="">
</a>
</footer>
<!--<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
-->
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<!--<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>-->
</body>
</html>

BIN
favicon.ico Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 766 B

BIN
favicon.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
font/Inter-Black.eot Executable file

Binary file not shown.

BIN
font/Inter-Black.ttf Executable file

Binary file not shown.

BIN
font/Inter-Black.woff Executable file

Binary file not shown.

BIN
font/Inter-Black.woff2 Executable file

Binary file not shown.

BIN
font/Inter-BlackItalic.eot Executable file

Binary file not shown.

BIN
font/Inter-BlackItalic.ttf Executable file

Binary file not shown.

BIN
font/Inter-BlackItalic.woff Executable file

Binary file not shown.

BIN
font/Inter-BlackItalic.woff2 Executable file

Binary file not shown.

BIN
font/Inter-Bold.eot Executable file

Binary file not shown.

BIN
font/Inter-Bold.ttf Executable file

Binary file not shown.

BIN
font/Inter-Bold.woff Executable file

Binary file not shown.

BIN
font/Inter-Bold.woff2 Executable file

Binary file not shown.

BIN
font/Inter-BoldItalic.eot Executable file

Binary file not shown.

BIN
font/Inter-BoldItalic.ttf Executable file

Binary file not shown.

BIN
font/Inter-BoldItalic.woff Executable file

Binary file not shown.

BIN
font/Inter-BoldItalic.woff2 Executable file

Binary file not shown.

BIN
font/Inter-ExtraBold.eot Executable file

Binary file not shown.

BIN
font/Inter-ExtraBold.ttf Executable file

Binary file not shown.

BIN
font/Inter-ExtraBold.woff Executable file

Binary file not shown.

BIN
font/Inter-ExtraBold.woff2 Executable file

Binary file not shown.

BIN
font/Inter-ExtraBoldItalic.eot Executable file

Binary file not shown.

BIN
font/Inter-ExtraBoldItalic.ttf Executable file

Binary file not shown.

BIN
font/Inter-ExtraBoldItalic.woff Executable file

Binary file not shown.

BIN
font/Inter-ExtraBoldItalic.woff2 Executable file

Binary file not shown.

BIN
font/Inter-ExtraLightBETA.eot Executable file

Binary file not shown.

BIN
font/Inter-ExtraLightBETA.ttf Executable file

Binary file not shown.

BIN
font/Inter-ExtraLightBETA.woff Executable file

Binary file not shown.

BIN
font/Inter-ExtraLightBETA.woff2 Executable file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
font/Inter-Italic.eot Executable file

Binary file not shown.

BIN
font/Inter-Italic.ttf Executable file

Binary file not shown.

BIN
font/Inter-Italic.woff Executable file

Binary file not shown.

BIN
font/Inter-Italic.woff2 Executable file

Binary file not shown.

BIN
font/Inter-LightBETA.eot Executable file

Binary file not shown.

BIN
font/Inter-LightBETA.ttf Executable file

Binary file not shown.

BIN
font/Inter-LightBETA.woff Executable file

Binary file not shown.

BIN
font/Inter-LightBETA.woff2 Executable file

Binary file not shown.

BIN
font/Inter-LightItalicBETA.eot Executable file

Binary file not shown.

BIN
font/Inter-LightItalicBETA.ttf Executable file

Binary file not shown.

BIN
font/Inter-LightItalicBETA.woff Executable file

Binary file not shown.

BIN
font/Inter-LightItalicBETA.woff2 Executable file

Binary file not shown.

BIN
font/Inter-Medium.eot Executable file

Binary file not shown.

BIN
font/Inter-Medium.ttf Executable file

Binary file not shown.

BIN
font/Inter-Medium.woff Executable file

Binary file not shown.

BIN
font/Inter-Medium.woff2 Executable file

Binary file not shown.

BIN
font/Inter-MediumItalic.eot Executable file

Binary file not shown.

BIN
font/Inter-MediumItalic.ttf Executable file

Binary file not shown.

BIN
font/Inter-MediumItalic.woff Executable file

Binary file not shown.

BIN
font/Inter-MediumItalic.woff2 Executable file

Binary file not shown.

BIN
font/Inter-Regular.eot Executable file

Binary file not shown.

BIN
font/Inter-Regular.ttf Executable file

Binary file not shown.

BIN
font/Inter-Regular.woff Executable file

Binary file not shown.

BIN
font/Inter-Regular.woff2 Executable file

Binary file not shown.

BIN
font/Inter-SemiBold.eot Executable file

Binary file not shown.

BIN
font/Inter-SemiBold.ttf Executable file

Binary file not shown.

BIN
font/Inter-SemiBold.woff Executable file

Binary file not shown.

BIN
font/Inter-SemiBold.woff2 Executable file

Binary file not shown.

BIN
font/Inter-SemiBoldItalic.eot Executable file

Binary file not shown.

BIN
font/Inter-SemiBoldItalic.ttf Executable file

Binary file not shown.

BIN
font/Inter-SemiBoldItalic.woff Executable file

Binary file not shown.

BIN
font/Inter-SemiBoldItalic.woff2 Executable file

Binary file not shown.

BIN
font/Inter-ThinBETA.eot Executable file

Binary file not shown.

BIN
font/Inter-ThinBETA.ttf Executable file

Binary file not shown.

BIN
font/Inter-ThinBETA.woff Executable file

Binary file not shown.

BIN
font/Inter-ThinBETA.woff2 Executable file

Binary file not shown.

BIN
font/Inter-ThinItalicBETA.eot Executable file

Binary file not shown.

BIN
font/Inter-ThinItalicBETA.ttf Executable file

Binary file not shown.

BIN
font/Inter-ThinItalicBETA.woff Executable file

Binary file not shown.

BIN
font/Inter-ThinItalicBETA.woff2 Executable file

Binary file not shown.

649
font/demo.html Executable file
View File

@ -0,0 +1,649 @@
<!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">
<meta name="format-detection" content="telephone=no">
<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: 'Inter'; font-weight: bold; font-style: italic;">
<h1>Inter Bold Italic</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: bold;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 500; font-style: italic;">
<h1>Inter Medium Italic</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 500;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 100; font-style: italic;">
<h1>Inter Thin Italic BETA</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 100;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: normal; font-style: normal;">
<h1>Inter Regular</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: normal;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 900; font-style: normal;">
<h1>Inter Black</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 900;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 900; font-style: italic;">
<h1>Inter Black Italic</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 900;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 300; font-style: normal;">
<h1>Inter Light BETA</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 300;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 600; font-style: normal;">
<h1>Inter Semi Bold</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 600;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 800; font-style: italic;">
<h1>Inter Extra Bold Italic</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 800;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: bold; font-style: normal;">
<h1>Inter Bold</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: bold;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 200; font-style: italic;">
<h1>Inter Extra Light Italic BETA</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 200;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 200; font-style: normal;">
<h1>Inter Extra Light BETA</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 200;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 800; font-style: normal;">
<h1>Inter Extra Bold</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 800;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 100; font-style: normal;">
<h1>Inter Thin BETA</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 100;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 300; font-style: italic;">
<h1>Inter Light Italic BETA</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 300;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: normal; font-style: italic;">
<h1>Inter Italic</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: normal;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 600; font-style: italic;">
<h1>Inter Semi Bold Italic</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 600;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo" style="font-family: 'Inter'; font-weight: 500; font-style: normal;">
<h1>Inter Medium</h1>
<pre>.your-style {
font-family: 'Inter';
font-weight: 500;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</div>
</body>
</html>

216
font/stylesheet.css Executable file
View File

@ -0,0 +1,216 @@
@font-face {
font-family: 'Inter';
src: url('Inter-BoldItalic.eot');
src: local('Inter Bold Italic'), local('Inter-BoldItalic'),
url('Inter-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('Inter-BoldItalic.woff2') format('woff2'),
url('Inter-BoldItalic.woff') format('woff'),
url('Inter-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('Inter-MediumItalic.eot');
src: local('Inter Medium Italic'), local('Inter-MediumItalic'),
url('Inter-MediumItalic.eot?#iefix') format('embedded-opentype'),
url('Inter-MediumItalic.woff2') format('woff2'),
url('Inter-MediumItalic.woff') format('woff'),
url('Inter-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('Inter-ThinItalicBETA.eot');
src: local('Inter Thin Italic BETA'), local('Inter-ThinItalicBETA'),
url('Inter-ThinItalicBETA.eot?#iefix') format('embedded-opentype'),
url('Inter-ThinItalicBETA.woff2') format('woff2'),
url('Inter-ThinItalicBETA.woff') format('woff'),
url('Inter-ThinItalicBETA.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('Inter-Regular.eot');
src: local('Inter Regular'), local('Inter-Regular'),
url('Inter-Regular.eot?#iefix') format('embedded-opentype'),
url('Inter-Regular.woff2') format('woff2'),
url('Inter-Regular.woff') format('woff'),
url('Inter-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('Inter-Black.eot');
src: local('Inter Black'), local('Inter-Black'),
url('Inter-Black.eot?#iefix') format('embedded-opentype'),
url('Inter-Black.woff2') format('woff2'),
url('Inter-Black.woff') format('woff'),
url('Inter-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('Inter-BlackItalic.eot');
src: local('Inter Black Italic'), local('Inter-BlackItalic'),
url('Inter-BlackItalic.eot?#iefix') format('embedded-opentype'),
url('Inter-BlackItalic.woff2') format('woff2'),
url('Inter-BlackItalic.woff') format('woff'),
url('Inter-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('Inter-LightBETA.eot');
src: local('Inter Light BETA'), local('Inter-LightBETA'),
url('Inter-LightBETA.eot?#iefix') format('embedded-opentype'),
url('Inter-LightBETA.woff2') format('woff2'),
url('Inter-LightBETA.woff') format('woff'),
url('Inter-LightBETA.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('Inter-SemiBold.eot');
src: local('Inter Semi Bold'), local('Inter-SemiBold'),
url('Inter-SemiBold.eot?#iefix') format('embedded-opentype'),
url('Inter-SemiBold.woff2') format('woff2'),
url('Inter-SemiBold.woff') format('woff'),
url('Inter-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('Inter-ExtraBoldItalic.eot');
src: local('Inter Extra Bold Italic'), local('Inter-ExtraBoldItalic'),
url('Inter-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
url('Inter-ExtraBoldItalic.woff2') format('woff2'),
url('Inter-ExtraBoldItalic.woff') format('woff'),
url('Inter-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('Inter-Bold.eot');
src: local('Inter Bold'), local('Inter-Bold'),
url('Inter-Bold.eot?#iefix') format('embedded-opentype'),
url('Inter-Bold.woff2') format('woff2'),
url('Inter-Bold.woff') format('woff'),
url('Inter-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('Inter-ExtraLightItalicBETA.eot');
src: local('Inter Extra Light Italic BETA'), local('Inter-ExtraLightItalicBETA'),
url('Inter-ExtraLightItalicBETA.eot?#iefix') format('embedded-opentype'),
url('Inter-ExtraLightItalicBETA.woff2') format('woff2'),
url('Inter-ExtraLightItalicBETA.woff') format('woff'),
url('Inter-ExtraLightItalicBETA.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('Inter-ExtraLightBETA.eot');
src: local('Inter Extra Light BETA'), local('Inter-ExtraLightBETA'),
url('Inter-ExtraLightBETA.eot?#iefix') format('embedded-opentype'),
url('Inter-ExtraLightBETA.woff2') format('woff2'),
url('Inter-ExtraLightBETA.woff') format('woff'),
url('Inter-ExtraLightBETA.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('Inter-ExtraBold.eot');
src: local('Inter Extra Bold'), local('Inter-ExtraBold'),
url('Inter-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('Inter-ExtraBold.woff2') format('woff2'),
url('Inter-ExtraBold.woff') format('woff'),
url('Inter-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('Inter-ThinBETA.eot');
src: local('Inter Thin BETA'), local('Inter-ThinBETA'),
url('Inter-ThinBETA.eot?#iefix') format('embedded-opentype'),
url('Inter-ThinBETA.woff2') format('woff2'),
url('Inter-ThinBETA.woff') format('woff'),
url('Inter-ThinBETA.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('Inter-LightItalicBETA.eot');
src: local('Inter Light Italic BETA'), local('Inter-LightItalicBETA'),
url('Inter-LightItalicBETA.eot?#iefix') format('embedded-opentype'),
url('Inter-LightItalicBETA.woff2') format('woff2'),
url('Inter-LightItalicBETA.woff') format('woff'),
url('Inter-LightItalicBETA.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('Inter-Italic.eot');
src: local('Inter Italic'), local('Inter-Italic'),
url('Inter-Italic.eot?#iefix') format('embedded-opentype'),
url('Inter-Italic.woff2') format('woff2'),
url('Inter-Italic.woff') format('woff'),
url('Inter-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('Inter-SemiBoldItalic.eot');
src: local('Inter Semi Bold Italic'), local('Inter-SemiBoldItalic'),
url('Inter-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('Inter-SemiBoldItalic.woff2') format('woff2'),
url('Inter-SemiBoldItalic.woff') format('woff'),
url('Inter-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('Inter-Medium.eot');
src: local('Inter Medium'), local('Inter-Medium'),
url('Inter-Medium.eot?#iefix') format('embedded-opentype'),
url('Inter-Medium.woff2') format('woff2'),
url('Inter-Medium.woff') format('woff'),
url('Inter-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}

0
img/.gitignore vendored Executable file
View File

BIN
img/AWS.gif Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
img/Backblaze.GIF Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
img/Burger Menu.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 B

BIN
img/CloudFlare.gif Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

10
img/GitHub Logo.svg Executable file
View File

@ -0,0 +1,10 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M31.4008 14.5725L17.4292 0.602221C16.6261 -0.20074 15.3185 -0.20074 14.5155 0.602221L11.6141 3.50334L15.2939 7.18281C16.1492 6.89362 17.1276 7.08744 17.8138 7.76734C18.4999 8.4534 18.6937 9.44402 18.3922 10.2993L21.9366 13.8434C22.792 13.548 23.7889 13.7419 24.4688 14.4279C25.4288 15.3878 25.4288 16.9352 24.4688 17.8951C23.5089 18.855 21.9613 18.855 21.0013 17.8951C20.2844 17.1721 20.1029 16.1169 20.4721 15.2309L17.1615 11.9206V20.627C17.3953 20.7409 17.6138 20.8978 17.8076 21.0916C18.7676 22.0514 18.7676 23.5989 17.8076 24.5588C16.8477 25.5186 15.3 25.5186 14.3401 24.5588C13.3801 23.5989 13.3801 22.0514 14.3401 21.0916C14.5739 20.8578 14.8539 20.6762 15.1431 20.5563V11.776C14.8478 11.656 14.577 11.4807 14.3401 11.2407C13.617 10.5177 13.4417 9.45018 13.8109 8.558L10.1803 4.92775L0.602279 14.5079C-0.20076 15.317 -0.20076 16.6184 0.602279 17.4213L14.5739 31.3978C15.377 32.2007 16.6846 32.2007 17.4876 31.3978L31.3977 17.489C32.2008 16.683 32.2008 15.3755 31.4008 14.5725Z" fill="#1ED9E7"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/GitHub-Logo.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 699 B

BIN
img/GitHubLogo.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 664 B

BIN
img/Hetzner.gif Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
img/Illustration.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

301
img/Illustration.svg Executable file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 189 KiB

BIN
img/Logo.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
img/SFPresentation.mp4 Executable file

Binary file not shown.

BIN
img/Server.gif Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 MiB

BIN
img/Telegram-Logo.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 940 B

Some files were not shown because too many files have changed in this diff Show More