Buttons and GLAGNE

index.html

@@ -20,12 +20,24 @@
         <a href="info.html"><div>Зачем?</div></a>
     </nav>
     <div class="content">
-        <h1>
+        <h1>У вас всегда есть выбор.</h1>
-            Альтернативы - есть.<br>
+	<p> Чем плохи централизованные соцсети и сервисы? Почему ими опасно пользоваться? <a class="button" href="info.html">Узнать подробности</a>
-            Выбор - есть.<br>
+ Почему они никогда не станут лучше? И - главное - что со всем этим делать? Чтоб выйти из-под крыла государственной цензуры и ока Большого Брата корпораций, необязательно бытьхакером, для этого не нужны особые знания. Мы расскажем, как.
-            Ваш выбор - важен.<br>
+	</p>
-            Вы - важны!<br>
+	<hr style="clear: right">
-        </h1>
+	<p>
+	<a class="button" href="social.html">Узнать подробности</a>
+	Флагман перемен в области соцсетей - некоммерческая распределённая сеть Mastodon. Не умеет значения, на каком из тысяч её серверов вы зарегистрируетесь - общаться сможете со всем миром. Подробности и другие альтернативы - по ссылке справа. 
+	<br>
+	А вот рекомендуемые места для регистрации русскоязычных пользователей:
+	</p>
+	<nav id="masto">
+		<a href="https://mastodonsocial.ru"><div>MastodonSocial</div></a>
+		<a href="https://phreedom.tk"><div>Svoboda</div></a>
+		<a href="https://soc.ialis.me"><div>Socialisme</div></a>
+		<a href="https://lor.sh"><div>LinuxOrgRu</div></a>
+	</nav>
+	</p>
     </div>
 </div>
 </body>

style/main.css

@@ -8,6 +8,26 @@ html, body {
     min-height: 100%;
 }
 
+.button {
+    width: 180px;
+    flex: auto;
+    display: block;
+    padding: 20px;
+    background-color:  #cde6ea;
+    box-sizing: border-box;
+    text-decoration: none;
+    font-weight: bold;
+    color: inherit;
+    text-align: center;
+    float: right;
+    font-size: 18px;
+    transition: background-color 0.2s ease;
+}
+
+.button:hover {
+	background-color: rgba(0, 0, 0, 0.2);
+}
+
 nav {
     display: flex;
     overflow: hidden;