Адаптация под responsive design, тексты переписаны под обладателей клипового мышления.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

315 lines
17 KiB

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>У вас всегда есть выбор!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container-wrap">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo"><a href="index.html">Fediverse</a></div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<li class="active"><a href="index.html">Главная</a></li>
<li><a href="social.html">Соцсети</a></li>
<li><a href="im.html">Мессенджеры</a></li>
<li><a href="mail.html">Почта</a></li>
<li><a href="info.html">Подробнее</a></li>
<li><a href="extra.html">Доп. материалы</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/silovik.png);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
<div class="slider-text-inner">
<div class="blurred-card">
<!--
Будьте внимательны! В этой и других карточках текст дублируется умышленно!
Одно повторение нужно для того, что бы автоматически подобрались размеры блока
с учетом переносов строк
Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
Это плохое решение, но другого я не нашел
-->
<h1><b>Огорчи силовика <br> — удаляйся из ВК!</b></h1>
<h2><b>Привычные централизованные соцсети не защитят вас от произвола и слежки</b></h2>
<p><a class="btn btn-primary btn-demo" href="https://phreedom.tk/about#new_user"></i>Сбежать</a>
<a class="btn btn-primary btn-learn" href="info.html">Узнать подробности</a></p>
<div class="background-faker">
<div style="background-image: url(images/silovik.png);"></div>
</div>
<div class="card-content">
<h1><b>Огорчи силовика <br> — удаляйся из ВК!</b></h1>
<h2><b>Привычные централизованные соцсети не защитят вас от произвола и слежки</b></h2>
<p><a class="btn btn-primary btn-demo" href="https://phreedom.tk/about#new_user"></i>Сбежать</a>
<a class="btn btn-primary btn-learn" href="info.html">Узнать подробности</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/zuker.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
<div class="slider-text-inner">
<div class="blurred-card">
<!--
Будьте внимательны! В этой и других карточках текст дублируется умышленно!
Одно повторение нужно для того, что бы автоматически подобрались размеры блока
с учетом переносов строк
Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
Это плохое решение, но другого я не нашел
-->
<h1>Надоело быть товаром?</h1>
<h2>Вконтакте, Facebook, Instagram — цинично торгуют данными своих пользователей. Вы - товар!</h2>
<p><a class="btn btn-primary btn-demo" href="https://mastodon.ml/about#new_user"></i>Освободиться</a>
<a class="btn btn-primary btn-learn" href="info.html">Узнать подробности</a></p>
<div class="background-faker">
<div style="background-image: url(images/zuker.jpg);"></div>
</div>
<div class="card-content">
<h1>Надоело быть товаром?</h1>
<h2>Вконтакте, Facebook, Instagram — цинично торгуют данными своих пользователей. Вы - товар!</h2>
<p><a class="btn btn-primary btn-demo" href="https://mastodon.ml/about#new_user"></i>Освободиться</a>
<a class="btn btn-primary btn-learn" href="info.html">Узнать подробности</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/corporation.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluids">
<div class="row">
<div class="col-md-6 col-md-offset-3 slider-text">
<div class="slider-text-inner text-center">
<div class="blurred-card">
<!--
Будьте внимательны! В этой и других карточках текст дублируется умышленно!
Одно повторение нужно для того, что бы автоматически подобрались размеры блока
с учетом переносов строк
Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
Это плохое решение, но другого я не нашел
-->
<h1>Что делать с корпоративной слежкой?</h1>
<h2>Корпорации Mail.ru (ВК, OK, Mail), Facebook (Instagram, WhatsApp)
и Google следят за вами</h2>
<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>
<div class="background-faker">
<div style="background-image: url(images/corporation.jpg);"></div>
</div>
<div class="card-content">
<h1>Что делать с корпоративной слежкой?</h1>
<h2>Корпорации Mail.ru (ВК, OK, Mail), Facebook (Instagram, WhatsApp)
и Google следят за вами</h2>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/bigbrother.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
<div class="slider-text-inner">
<div class="blurred-card">
<!--
Будьте внимательны! В этой и других карточках текст дублируется умышленно!
Одно повторение нужно для того, что бы автоматически подобрались размеры блока
с учетом переносов строк
Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
Это плохое решение, но другого я не нашел
-->
<h1><b>Стать невидимкой, но только для Большого Брата</b></h1>
<h2><b>Общайтесь с друзьями, без цензуры и слежки!</b></h2>
<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>
<div class="background-faker">
<div style="background-image: url(images/bigbrother.jpg);"></div>
</div>
<div class="card-content">
<h1><b>Стать невидимкой, но только для Большого Брата</b></h1>
<h2><b>Общайтесь с друзьями, без цензуры и слежки!</b></h2>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<div id="fh5co-work" class="fh5co-light-grey">
<div class="row animate-box">
<div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
<h2>Альтернатива</h2>
<p>Мы предлагаем свободные альтернативы популярным сервисам, сделанные людьми и для людей, а не корпорациями с целью извлечения прибыли.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center animate-box">
<a href="social.html#mastodon" class="work" style="background-image: url(images/mastodon2.png);">
<div class="desc">
<h3>Mastodon</h3>
<span>Вместо Твиттера</span>
</div>
</a>
</div>
<div class="col-md-4 text-center animate-box">
<a href="social.html#friendica" class="work" style="background-image: url(images/frendica.png);">
<div class="desc">
<h3>Friendica</h3>
<span>Вместо Facebook и ВК</span>
</div>
</a>
</div>
<div class="col-md-4 text-center animate-box">
<a href="social.html#pixelfed" class="work" style="background-image: url(images/pixelfed.png);">
<div class="desc">
<h3>PixelFed</h3>
<span>Вместо Instagram</span>
</div>
</a>
</div>
</div>
</div>
<div id="fh5co-services">
<div class="row">
<div class="col-md-4 text-center animate-box">
<div class="services">
<span class="icon">
<i class="icon-diamond"></i>
</span>
<div class="desc">
<h3><a href="#">Абсолютная взаимосвязанность</a></h3>
<p> У каждого есть свой предпочтительный формат общения — кто-то любит потоки молниеносных сообщений Твиттера, кто-то сложный формат взаимодействия ВК и Facebook,
кто-то предпочитает видео или фото... Теперь представьте, что из Твиттера вы можете комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы,
вещающие в удобном для них формате, оттуда вам отвечают, поддерживая полноценное общение, и никуда не надо перелогиниваться. Удобно? <b>У нас так можно.</b></p>
</div>
</div>
</div>
<div class="col-md-4 text-center animate-box">
<div class="services">
<span class="icon">
<i class="icon-lab2"></i>
</span>
<div class="desc">
<h3><a href="#">Неподцензурность пользователя</a></h3>
<p>А представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения удаляют, аккаунт блокируют. И заново зайти в привычный уже Вконтакте/Facebook
— в лучшем случае через долгое унижение в чате техподдержки, фотографии паспорта и прочую дурь. Хотелось бы вам в этом случае просто по щелчку мышки зайти в "другой" ВК/FB
и продолжить общение с теми же друзьями, обсуждать те же темы, но уже в недосягаемости от обозлённой администрации?<b> У нас так можно.</b> И даже больше — никто не мешает самому
стать полновластным админом (при наличии минимальной технической подготовки).</p>
</div>
</div>
</div>
<div class="col-md-4 text-center animate-box">
<div class="services">
<span class="icon">
<i class="icon-settings"></i>
</span>
<div class="desc">
<h3><a href="#">Сеть, как она была задумана</a></h3>
<p>Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют на равных и обладают равными правами.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-wrap">
<footer role="contentinfo">
<div class="row">
<div class="col-md-10 col-md-offset-1 text-center">
<a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
<a href="https://switching.software">Switching.Social</a>. Дополнения принимаются <a href="https://git.macaw.me/Tolstoevsky/switching">здесь</a>.
Поддержать деньгами можно <a href="https://www.patreon.com/tolstoevsky">на Patreon</a> или на <a href="https://ru.liberapay.com/tolstoevsky/donate">Liberapay</a>.
</div>
</div>
</footer>
</div><!-- END container-wrap -->
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html>