размытые карточки под текстом над изображением

This commit is contained in:
Blue 2019-08-22 16:37:58 +03:00
parent 804aa25685
commit fea2c31c2c
3 changed files with 215 additions and 14 deletions

View file

@ -76,10 +76,28 @@
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
<div class="slider-text-inner">
<h1><font color="white"><b>Огорчи силовика <br> — удаляйся из ВК!</b></font></h1>
<h2><font color="white"><b>Привычные централизованные соцсети не защитят вас от произвола и слежки</b></font></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="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>
@ -91,10 +109,28 @@
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
<div class="slider-text-inner">
<h1>Надоело быть товаром?</h1>
<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>
<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>
@ -106,10 +142,28 @@
<div class="row">
<div class="col-md-6 col-md-offset-3 slider-text">
<div class="slider-text-inner text-center">
<h1>Что делать с корпоративной слежкой?</h1>
<h2>Корпорации Mail.ru (ВК, OK, Mail), Facebook (Instagram, WhatsApp)
и Google следят за вами</h2>
<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>
@ -121,9 +175,26 @@
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
<div class="slider-text-inner">
<h1><font color="white"><b>Стать невидимкой, но только для Большого Брата</b></font></h1>
<h2><font color="white"><b>Общайтесь с друзьями, без цензуры и слежки!</b></font></h2>
<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>