diff --git a/src/img/box-256.png b/src/img/box-256.png
new file mode 100644
index 0000000..f10e061
Binary files /dev/null and b/src/img/box-256.png differ
diff --git a/src/img/news-256.png b/src/img/news-256.png
new file mode 100644
index 0000000..af49809
Binary files /dev/null and b/src/img/news-256.png differ
diff --git a/src/img/user-256.png b/src/img/user-256.png
new file mode 100644
index 0000000..095e3ee
Binary files /dev/null and b/src/img/user-256.png differ
diff --git a/src/index.html b/src/index.html
index 15f4426..79c1533 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,72 +1,159 @@
 <!DOCTYPE html>
-<html lang="ru" dir="ltr">
+<html lang="en" dir="ltr">
 <head>
 	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width,initial-scale=1">
-	<title>.a2s</title>
-	<link rel="stylesheet" href="/styles.css">
-	<link rel="stylesheet" href="/assets/ttf-iosevka-ss05/15.1.0/stylesheet.css">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Personal collaboratory portal</title>
+	<style type="text/css">
+		:root {
+			--border-width: 8px;
+		}
+		body {
+			background-color: #DEDEE5;
+			font-family: serif;
+			line-height: 1.4em;
+			font-size: 1.2em;
+			margin: 0;
+		}
+
+		header {
+			background-color: #434A53;
+			padding: 32px 8px;
+		}
+
+		.hero-title {
+			color: #ffffff;
+			margin: 0;
+			text-align: center;
+			font-size: 2.2em;
+		}
+
+		.section-title { text-align: center; }
+
+		.features {
+			display: flex;
+			justify-content: space-around;
+		}
+
+		.feature-item {
+			text-align: center;
+		}
+
+		.feature-item-content { text-align: center; }
+
+		.feature-item-image {
+			max-width: 200px;
+		}
+
+		.invite-form {
+			text-align: center;
+			width: 500px;
+			margin: 0 auto;
+		}
+		.invite-form input,
+		.invite-form button {
+			box-sizing: border-box;
+			width: 100%;
+			display: block;
+			border-width: 0;
+			border-color: #434A53;
+			border-style: solid;
+			padding: 16px;
+			border-left-width: var(--border-width);
+			border-right-width: var(--border-width);
+			outline: 0;
+			font-family: serif;
+			font-size: 1em;
+		}
+		.invite-form input {
+			border-top-left-radius: 16px;
+			border-top-right-radius: 16px;
+			border-top-width: var(--border-width);
+			text-align: center;
+		}
+		.invite-form button {
+			background-color: #FF9CBE;
+			border-bottom-left-radius: 16px;
+			border-bottom-right-radius: 16px;
+			border-bottom-width: var(--border-width);
+			transition: background-color .2s;
+		}
+		.invite-form button:hover {
+			background-color: #FF669B;
+			transition: background-color .2s;
+		}
+
+		footer {
+			color: #ffffff;
+			margin-top: 32px;
+			background-color: #434A53;
+			padding: 8px;
+			text-align: center;
+		}
+		footer a {
+			color: #ffffff;
+		}
+
+		@media screen and (max-width: 1023px) {
+			:root {
+				--border-width: 4px;
+			}
+			.feature-item-image {
+				max-width: 100px;
+			}
+			.invite-form {
+				width: 90%;
+			}
+		}
+	</style>
 </head>
 <body>
-	<div class="flag">
-		<p id="g"></p>
-		<p id="w"></p>
-		<p id="b"></p>
-		<p id="r"></p>
-		<p id="g"></p>
-	</div>
-
-	<header>
-	<div class="container">
-		<p class="fw-bold text-center">Alexander Popov aka i3k, iiiypuk and other...</p>
-		<p class="text-center"><strong>a2s</strong> &mdash; ренкарнация <code>iiiypuk.me</code>.</p>
-	</div>
+	<header class="main-header">
+		<h1 class="hero-title">Personal collaboratory portal</h1>
 	</header>
 
 	<main>
-	<div class="container">
 		<section>
-			<h1>История появления</h1>
-			<p>Жопу жечь начало давно, хотелось обособиться, иметь всё своё.<br>
-			GitHub падали, сайты отключали для списка стран, авторы засирали свои репозитории.</p>
-			<p>Так и появился свой <a href="#">GitHub</a>, <a href="#">CDN</a> и другие сервисы.</p>
-			<p>Да, синдромом <a href="https://ru.wikipedia.org/wiki/Синдром_неприятия_чужой_разработки">фатального недостатка</a> и желанием изобретать вилосипеды я болею давно.</p>
-
-			<nav>
-				<h1>Что можно тут найти?</h1>
-				<ul>
-					<!-- <li><a href="#projects">Список проектов</a></li> -->
-					<li><a href="#blog">Мои заметки и мысли</a></li>
-					<!-- <li><a href="#html">Список дизайнерских наработок</a></li> -->
-				</ul>
-			</nav>
+			<h1></h1>
 		</section>
-
-		<!-- <section>
-			<a name="projects"></a>
-			<h2>Список проектов</h2>
-		</section> -->
-
-		<section>
-			<a name="blog"></a>
-			<h2>Мои заметки и мысли</h2>
-			<p>Свои мысли и заметки я оставляю в <a href="gemini://a2s.su" target="_blank">Gemini</a> капсуле.</p>
-			<p>HTTP зеркало доступно по адресу
-				<a href="//gemini.a2s.su/" target="_blank">https://gemini.a2s.su/</a></p>
+		<section id="features">
+			<h1 class="section-title">Features</h1>
+			<div class="features">
+				<div class="feature-item">
+					<img class="feature-item-image" src="/img/box-256.png">
+					<p class="feature-item-content">All-in-One</p>
+				</div>
+				<div class="feature-item">
+					<img class="feature-item-image" src="/img/news-256.png">
+					<p class="feature-item-content">Full document access</p>
+				</div>
+				<div class="feature-item">
+					<img class="feature-item-image" src="/img/user-256.png">
+					<p class="feature-item-content">24/7 Support</p>
+				</div>
+			</div>
+		</section>
+		<section id="try-it">
+			<h1 class="section-title">Try it</h1>
+			<div class="invite-form">
+				<input type="text" id="email" name="email" placeholder="Enter your e-mail">
+				<button onclick="invite();">Invite me!</button>
+			</div>
 		</section>
-
-		<!-- <section>
-			<a name="html"></a>
-			<h2>Список дизайнерских наработок</h2>
-		</section> -->
-	</div>
 	</main>
 
-	<footer>
-	<div class="container">
-		<p class="text-center">since 2021, by 2021, 2022</p>
-		<p class="text-center"><a href="//git.a2s.su/iiiypuk/a2s" target="_blank">Git repo</a></p>
-	</div>
+	<footer class="main-footer">
+		<p>
+			Icons by <a target="_blank" href="https://icons8.com">Icons8</a>
+		</p>
 	</footer>
+
+	<script type="text/javascript">
+		function invite() {
+			'use strict';
+
+			let email = document.getElementById('email').value;
+		}
+	</script>
 </body>
 </html>
diff --git a/src/~iiiypuk/index.html b/src/~iiiypuk/index.html
new file mode 100644
index 0000000..15f4426
--- /dev/null
+++ b/src/~iiiypuk/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="ru" dir="ltr">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width,initial-scale=1">
+	<title>.a2s</title>
+	<link rel="stylesheet" href="/styles.css">
+	<link rel="stylesheet" href="/assets/ttf-iosevka-ss05/15.1.0/stylesheet.css">
+</head>
+<body>
+	<div class="flag">
+		<p id="g"></p>
+		<p id="w"></p>
+		<p id="b"></p>
+		<p id="r"></p>
+		<p id="g"></p>
+	</div>
+
+	<header>
+	<div class="container">
+		<p class="fw-bold text-center">Alexander Popov aka i3k, iiiypuk and other...</p>
+		<p class="text-center"><strong>a2s</strong> &mdash; ренкарнация <code>iiiypuk.me</code>.</p>
+	</div>
+	</header>
+
+	<main>
+	<div class="container">
+		<section>
+			<h1>История появления</h1>
+			<p>Жопу жечь начало давно, хотелось обособиться, иметь всё своё.<br>
+			GitHub падали, сайты отключали для списка стран, авторы засирали свои репозитории.</p>
+			<p>Так и появился свой <a href="#">GitHub</a>, <a href="#">CDN</a> и другие сервисы.</p>
+			<p>Да, синдромом <a href="https://ru.wikipedia.org/wiki/Синдром_неприятия_чужой_разработки">фатального недостатка</a> и желанием изобретать вилосипеды я болею давно.</p>
+
+			<nav>
+				<h1>Что можно тут найти?</h1>
+				<ul>
+					<!-- <li><a href="#projects">Список проектов</a></li> -->
+					<li><a href="#blog">Мои заметки и мысли</a></li>
+					<!-- <li><a href="#html">Список дизайнерских наработок</a></li> -->
+				</ul>
+			</nav>
+		</section>
+
+		<!-- <section>
+			<a name="projects"></a>
+			<h2>Список проектов</h2>
+		</section> -->
+
+		<section>
+			<a name="blog"></a>
+			<h2>Мои заметки и мысли</h2>
+			<p>Свои мысли и заметки я оставляю в <a href="gemini://a2s.su" target="_blank">Gemini</a> капсуле.</p>
+			<p>HTTP зеркало доступно по адресу
+				<a href="//gemini.a2s.su/" target="_blank">https://gemini.a2s.su/</a></p>
+		</section>
+
+		<!-- <section>
+			<a name="html"></a>
+			<h2>Список дизайнерских наработок</h2>
+		</section> -->
+	</div>
+	</main>
+
+	<footer>
+	<div class="container">
+		<p class="text-center">since 2021, by 2021, 2022</p>
+		<p class="text-center"><a href="//git.a2s.su/iiiypuk/a2s" target="_blank">Git repo</a></p>
+	</div>
+	</footer>
+</body>
+</html>
diff --git a/src/styles.css b/src/~iiiypuk/styles.css
similarity index 100%
rename from src/styles.css
rename to src/~iiiypuk/styles.css
