procxx · unn4m3d · Mar 8, 2017 · Mar 8, 2017 · Mar 8, 2017 · Apr 2, 2017
diff --git a/index.html b/index.html
@@ -1,21 +1,49 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset="utf-8">
-<title>procxx.github.io&nbsp;&mdash; Главная страница</title>
-  <style type="text/css">
-    a[href^="https://telegram"] {
-
-    }
-  </style>
+  <head>
+    <meta charset="utf-8" />
+    <title>procxx.github.io&nbsp;&mdash; Main Page</title>
+    <link rel="stylesheet" type="text/css" href="style/style.css" />
   </head>
- <body>
-  Welcome to the ProCxx main page! Join us in <a href="https://telegram.org/dl">Telegram</a>: 
-   <a href="https://telegram.me/ProCxx">@ProCxx</a> (also you can see chat's live activity 
-   <a href="http://78.155.208.241:3000/iframe/-1001031904034">here</a>)
-   <br>
-   Also we have the newbies' chat, #supapro. Join via this invite link:
-   <a href="https://telegram.me/joinchat/AAAAAD3eN3KytHPyhyh96w">https://telegram.me/joinchat/AAAAAD3eN3KytHPyhyh96w</a>
-   Also we recommend the CodingTeam community: <a href="https://codingteam.org.ru/">https://codingteam.org.ru/</a> 
+  <body>
+    <div id="main">
+      <header>
+        <h3>Welcome to the <span class="procxx">ProCxx</span>!</h3>
+      </header>
+
+      <ul>
+        <li>
+          Join us in <a href="https://telegram.org/dl">Telegram</a>:
+          <a href="https://telegram.me/ProCxx"> @ProCxx</a>
+        </li>
+        <li>
+          You can see chat's live activity
+          <a href="http://embedbot.com/iframe/-1001031904034">here</a>
+        </li>
+        <li>
+          We have the newbies' chat, <span class="procxx">#supapro</span>. Join via
+          <a href="https://telegram.me/joinchat/AAAAAD3eN3KytHPyhyh96w">this invite link</a>
+        </li>
+        <li>
+          Also we recommend the <a href="https://codingteam.org.ru/">CodingTeam community</a>
+        </li>
+      </ul>
+      <h2>Projects [wip]</h2>
+      <ol>
+        <li>Telegram Fork</li>
+      </ol>
+      <h2>Mini-articles (on Telegra.ph) [wip]</h2>
+      <ol>
+        <li><a href="">Git guides</a></li>
+        <li><a href="http://telegra.ph/Matanota-kursota-iz-promath-03-08">Some Math courses for computing</a></li>
+        <li><a href="http://telegra.ph/Some-C-Tips-03-10">Chat tips (work in progress)</a></li>
+      </ol>
+      <h2>Articles on github.io</h2>
+      <ul>
+        <li><a href="https://ps-group.github.io/compilers/cxx17">[ru] Migration to Everyday C++17</a></li>
+        <li><a href="http://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#calling-javascript-from-c-c">Connecting Cpp and Javascript</a></li>
+
+      </ul>
+    </div>
   </body>
 </html>
diff --git a/style/bg.png b/style/bg.png
diff --git a/style/cpp.png b/style/cpp.png
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700');
+
+header {
+  background-image: url("cpp.png");
+  padding-left: 30px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: left top;
+}
+
+body{
+  background-image: url("bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  font-family: Ubuntu;
+}
+
+#main{
+  width: 85%;
+  left: 5%;
+  background-color: rgba(255, 255, 255, 0.7);
+  height: 100%;
+  border: 2px solid white;
+  padding: 20px;
+  top: 0px;
+  position: absolute;
+}
+
+span.procxx{
+  color: blue;
+}