Адаптация под responsive design, тексты переписаны под обладателей клипового мышления.
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

316 lines
17KB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>У вас всегда есть выбор!</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <!-- Animate.css -->
  9. <link rel="stylesheet" href="css/animate.css">
  10. <!-- Icomoon Icon Fonts-->
  11. <link rel="stylesheet" href="css/icomoon.css">
  12. <!-- Bootstrap -->
  13. <link rel="stylesheet" href="css/bootstrap.css">
  14. <!-- Magnific Popup -->
  15. <link rel="stylesheet" href="css/magnific-popup.css">
  16. <!-- Flexslider -->
  17. <link rel="stylesheet" href="css/flexslider.css">
  18. <!-- Theme style -->
  19. <link rel="stylesheet" href="css/style.css">
  20. <!-- Modernizr JS -->
  21. <script src="js/modernizr-2.6.2.min.js"></script>
  22. <!-- FOR IE9 below -->
  23. <!--[if lt IE 9]>
  24. <script src="js/respond.min.js"></script>
  25. <![endif]-->
  26. </head>
  27. <body>
  28. <div class="fh5co-loader"></div>
  29. <div id="page">
  30. <nav class="fh5co-nav" role="navigation">
  31. <div class="container-wrap">
  32. <div class="top-menu">
  33. <div class="row">
  34. <div class="col-xs-2">
  35. <div id="fh5co-logo"><a href="index.html">Fediverse</a></div>
  36. </div>
  37. <div class="col-xs-10 text-right menu-1">
  38. <ul>
  39. <li class="active"><a href="index.html">Главная</a></li>
  40. <li><a href="social.html">Соцсети</a></li>
  41. <li><a href="im.html">Мессенджеры</a></li>
  42. <li><a href="mail.html">Почта</a></li>
  43. <li><a href="info.html">Подробнее</a></li>
  44. <li><a href="extra.html">Доп. материалы</a></li>
  45. </ul>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. </nav>
  51. <div class="container-wrap">
  52. <aside id="fh5co-hero">
  53. <div class="flexslider">
  54. <ul class="slides">
  55. <li style="background-image: url(images/silovik.png);">
  56. <div class="overlay-gradient"></div>
  57. <div class="container-fluid">
  58. <div class="row">
  59. <div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
  60. <div class="slider-text-inner">
  61. <div class="blurred-card">
  62. <!--
  63. Будьте внимательны! В этой и других карточках текст дублируется умышленно!
  64. Одно повторение нужно для того, что бы автоматически подобрались размеры блока
  65. с учетом переносов строк
  66. Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
  67. Это плохое решение, но другого я не нашел
  68. -->
  69. <h1><b>Огорчи силовика <br> — удаляйся из ВК!</b></h1>
  70. <h2><b>Привычные централизованные соцсети не защитят вас от произвола и слежки</b></h2>
  71. <p><a class="btn btn-primary btn-demo" href="https://phreedom.tk/about#new_user"></i>Сбежать</a>
  72. <a class="btn btn-primary btn-learn" href="info.html">Узнать подробности</a></p>
  73. <div class="background-faker">
  74. <div style="background-image: url(images/silovik.png);"></div>
  75. </div>
  76. <div class="card-content">
  77. <h1><b>Огорчи силовика <br> — удаляйся из ВК!</b></h1>
  78. <h2><b>Привычные централизованные соцсети не защитят вас от произвола и слежки</b></h2>
  79. <p><a class="btn btn-primary btn-demo" href="https://phreedom.tk/about#new_user"></i>Сбежать</a>
  80. <a class="btn btn-primary btn-learn" href="info.html">Узнать подробности</a></p>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. </li>
  88. <li style="background-image: url(images/zuker.jpg);">
  89. <div class="overlay-gradient"></div>
  90. <div class="container-fluid">
  91. <div class="row">
  92. <div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
  93. <div class="slider-text-inner">
  94. <div class="blurred-card">
  95. <!--
  96. Будьте внимательны! В этой и других карточках текст дублируется умышленно!
  97. Одно повторение нужно для того, что бы автоматически подобрались размеры блока
  98. с учетом переносов строк
  99. Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
  100. Это плохое решение, но другого я не нашел
  101. -->
  102. <h1>Надоело быть товаром?</h1>
  103. <h2>Вконтакте, Facebook, Instagram — цинично торгуют данными своих пользователей. Вы - товар!</h2>
  104. <p><a class="btn btn-primary btn-demo" href="https://mastodon.ml/about#new_user"></i>Освободиться</a>
  105. <a class="btn btn-primary btn-learn" href="info.html">Узнать подробности</a></p>
  106. <div class="background-faker">
  107. <div style="background-image: url(images/zuker.jpg);"></div>
  108. </div>
  109. <div class="card-content">
  110. <h1>Надоело быть товаром?</h1>
  111. <h2>Вконтакте, Facebook, Instagram — цинично торгуют данными своих пользователей. Вы - товар!</h2>
  112. <p><a class="btn btn-primary btn-demo" href="https://mastodon.ml/about#new_user"></i>Освободиться</a>
  113. <a class="btn btn-primary btn-learn" href="info.html">Узнать подробности</a></p>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </li>
  121. <li style="background-image: url(images/corporation.jpg);">
  122. <div class="overlay-gradient"></div>
  123. <div class="container-fluids">
  124. <div class="row">
  125. <div class="col-md-6 col-md-offset-3 slider-text">
  126. <div class="slider-text-inner text-center">
  127. <div class="blurred-card">
  128. <!--
  129. Будьте внимательны! В этой и других карточках текст дублируется умышленно!
  130. Одно повторение нужно для того, что бы автоматически подобрались размеры блока
  131. с учетом переносов строк
  132. Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
  133. Это плохое решение, но другого я не нашел
  134. -->
  135. <h1>Что делать с корпоративной слежкой?</h1>
  136. <h2>Корпорации Mail.ru (ВК, OK, Mail), Facebook (Instagram, WhatsApp)
  137. и Google следят за вами</h2>
  138. <p><a class="btn btn-primary btn-demo" href="https://va11hal.la/about#new_user"></i>Спрятаться</a> <a class="btn btn-primary btn-learn" href="info.html">Узнать больше</a></p>
  139. <div class="background-faker">
  140. <div style="background-image: url(images/corporation.jpg);"></div>
  141. </div>
  142. <div class="card-content">
  143. <h1>Что делать с корпоративной слежкой?</h1>
  144. <h2>Корпорации Mail.ru (ВК, OK, Mail), Facebook (Instagram, WhatsApp)
  145. и Google следят за вами</h2>
  146. <p><a class="btn btn-primary btn-demo" href="https://va11hal.la/about#new_user"></i>Спрятаться</a> <a class="btn btn-primary btn-learn" href="info.html">Узнать больше</a></p>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </li>
  154. <li style="background-image: url(images/bigbrother.jpg);">
  155. <div class="overlay-gradient"></div>
  156. <div class="container-fluid">
  157. <div class="row">
  158. <div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
  159. <div class="slider-text-inner">
  160. <div class="blurred-card">
  161. <!--
  162. Будьте внимательны! В этой и других карточках текст дублируется умышленно!
  163. Одно повторение нужно для того, что бы автоматически подобрались размеры блока
  164. с учетом переносов строк
  165. Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
  166. Это плохое решение, но другого я не нашел
  167. -->
  168. <h1><b>Стать невидимкой, но только для Большого Брата</b></h1>
  169. <h2><b>Общайтесь с друзьями, без цензуры и слежки!</b></h2>
  170. <p><a class="btn btn-primary btn-demo" href="https://lor.sh/about#new_user"></i>Приступить</a> <a class="btn btn-primary btn-learn" href="info.html">Узнать больше</a></p>
  171. <div class="background-faker">
  172. <div style="background-image: url(images/bigbrother.jpg);"></div>
  173. </div>
  174. <div class="card-content">
  175. <h1><b>Стать невидимкой, но только для Большого Брата</b></h1>
  176. <h2><b>Общайтесь с друзьями, без цензуры и слежки!</b></h2>
  177. <p><a class="btn btn-primary btn-demo" href="https://lor.sh/about#new_user"></i>Приступить</a> <a class="btn btn-primary btn-learn" href="info.html">Узнать больше</a></p>
  178. </div>
  179. </div>
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. </li>
  185. </ul>
  186. </div>
  187. </aside>
  188. <div id="fh5co-work" class="fh5co-light-grey">
  189. <div class="row animate-box">
  190. <div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
  191. <h2>Альтернатива</h2>
  192. <p>Мы предлагаем свободные альтернативы популярным сервисам, сделанные людьми и для людей, а не корпорациями с целью извлечения прибыли.</p>
  193. </div>
  194. </div>
  195. <div class="row">
  196. <div class="col-md-4 text-center animate-box">
  197. <a href="social.html#mastodon" class="work" style="background-image: url(images/mastodon2.png);">
  198. <div class="desc">
  199. <h3>Mastodon</h3>
  200. <span>Вместо Твиттера</span>
  201. </div>
  202. </a>
  203. </div>
  204. <div class="col-md-4 text-center animate-box">
  205. <a href="social.html#friendica" class="work" style="background-image: url(images/frendica.png);">
  206. <div class="desc">
  207. <h3>Friendica</h3>
  208. <span>Вместо Facebook и ВК</span>
  209. </div>
  210. </a>
  211. </div>
  212. <div class="col-md-4 text-center animate-box">
  213. <a href="social.html#pixelfed" class="work" style="background-image: url(images/pixelfed.png);">
  214. <div class="desc">
  215. <h3>PixelFed</h3>
  216. <span>Вместо Instagram</span>
  217. </div>
  218. </a>
  219. </div>
  220. </div>
  221. </div>
  222. <div id="fh5co-services">
  223. <div class="row">
  224. <div class="col-md-4 text-center animate-box">
  225. <div class="services">
  226. <span class="icon">
  227. <i class="icon-diamond"></i>
  228. </span>
  229. <div class="desc">
  230. <h3><a href="#">Абсолютная взаимосвязанность</a></h3>
  231. <p> У каждого есть свой предпочтительный формат общения — кто-то любит потоки молниеносных сообщений Твиттера, кто-то сложный формат взаимодействия ВК и Facebook,
  232. кто-то предпочитает видео или фото... Теперь представьте, что из Твиттера вы можете комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы,
  233. вещающие в удобном для них формате, оттуда вам отвечают, поддерживая полноценное общение, и никуда не надо перелогиниваться. Удобно? <b>У нас так можно.</b></p>
  234. </div>
  235. </div>
  236. </div>
  237. <div class="col-md-4 text-center animate-box">
  238. <div class="services">
  239. <span class="icon">
  240. <i class="icon-lab2"></i>
  241. </span>
  242. <div class="desc">
  243. <h3><a href="#">Неподцензурность пользователя</a></h3>
  244. <p>А представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения удаляют, аккаунт блокируют. И заново зайти в привычный уже Вконтакте/Facebook
  245. — в лучшем случае через долгое унижение в чате техподдержки, фотографии паспорта и прочую дурь. Хотелось бы вам в этом случае просто по щелчку мышки зайти в "другой" ВК/FB
  246. и продолжить общение с теми же друзьями, обсуждать те же темы, но уже в недосягаемости от обозлённой администрации?<b> У нас так можно.</b> И даже больше — никто не мешает самому
  247. стать полновластным админом (при наличии минимальной технической подготовки).</p>
  248. </div>
  249. </div>
  250. </div>
  251. <div class="col-md-4 text-center animate-box">
  252. <div class="services">
  253. <span class="icon">
  254. <i class="icon-settings"></i>
  255. </span>
  256. <div class="desc">
  257. <h3><a href="#">Сеть, как она была задумана</a></h3>
  258. <p>Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют на равных и обладают равными правами.</p>
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  263. </div>
  264. <div class="container-wrap">
  265. <footer role="contentinfo">
  266. <div class="row">
  267. <div class="col-md-10 col-md-offset-1 text-center">
  268. <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
  269. Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
  270. <a href="https://switching.software">Switching.Social</a>. Дополнения принимаются <a href="https://git.macaw.me/Tolstoevsky/switching">здесь</a>.
  271. Поддержать деньгами можно <a href="https://www.patreon.com/tolstoevsky">на Patreon</a> или на <a href="https://ru.liberapay.com/tolstoevsky/donate">Liberapay</a>.
  272. </div>
  273. </div>
  274. </footer>
  275. </div><!-- END container-wrap -->
  276. </div>
  277. <div class="gototop js-top">
  278. <a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
  279. </div>
  280. <!-- jQuery -->
  281. <script src="js/jquery.min.js"></script>
  282. <!-- jQuery Easing -->
  283. <script src="js/jquery.easing.1.3.js"></script>
  284. <!-- Bootstrap -->
  285. <script src="js/bootstrap.min.js"></script>
  286. <!-- Waypoints -->
  287. <script src="js/jquery.waypoints.min.js"></script>
  288. <!-- Flexslider -->
  289. <script src="js/jquery.flexslider-min.js"></script>
  290. <!-- Magnific Popup -->
  291. <script src="js/jquery.magnific-popup.min.js"></script>
  292. <script src="js/magnific-popup-options.js"></script>
  293. <!-- Counters -->
  294. <script src="js/jquery.countTo.js"></script>
  295. <!-- Main -->
  296. <script src="js/main.js"></script>
  297. </body>
  298. </html>