mirror of
https://gitea.phreedom.club/tolstoevsky/fedi.git
synced 2024-11-23 20:01:29 +00:00
размытые карточки под текстом над изображением
This commit is contained in:
blue
parent
804aa25685
commit
fea2c31c2c
|
|
@ -413,7 +413,7 @@ h1, h2, h3, h4, h5, h6, figure {
|
||||||
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1, #fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
|
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1, #fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: black;
|
color: white;
|
||||||
font-family: "Oxygen", sans-serif;
|
font-family: "Oxygen", sans-serif;
|
||||||
}
|
}
|
||||||
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
|
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
|
||||||
|
|
@ -1473,4 +1473,69 @@ input[type="text"] {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blurred-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 2px 2px 9px 2px black;
|
||||||
|
overflow: hidden;
|
||||||
|
color: white;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blurred-card > .background-faker {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: black;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blurred-card > .background-faker > div {
|
||||||
|
width: calc(100vw - 15px);
|
||||||
|
height: 500px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: bottom center;
|
||||||
|
background-size: cover;
|
||||||
|
filter: blur(10px);
|
||||||
|
opacity: 0.6;
|
||||||
|
max-width: 1060px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-pull-3 .blurred-card > .background-faker > div {
|
||||||
|
left: calc(-1 * (15px + 2em));
|
||||||
|
right: auto;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-push-3 .blurred-card > .background-faker > div {
|
||||||
|
right: calc(-1 * (15px + 2em));
|
||||||
|
left: auto;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 992px) {
|
||||||
|
.col-md-push-3 .blurred-card > .background-faker > div,
|
||||||
|
.col-md-pull-3 .blurred-card > .background-faker > div
|
||||||
|
{
|
||||||
|
right: auto;
|
||||||
|
left: calc(-1 * (15px + 2em));
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blurred-card > .card-content {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=style.css.map */
|
||||||
|
|
|
||||||
91
index.html
91
index.html
|
|
@ -76,10 +76,28 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
|
<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
|
||||||
<div class="slider-text-inner">
|
<div class="slider-text-inner">
|
||||||
<h1><font color="white"><b>Огорчи силовика <br> — удаляйся из ВК!</b></font></h1>
|
<div class="blurred-card">
|
||||||
<h2><font color="white"><b>Привычные централизованные соцсети не защитят вас от произвола и слежки</b></font></h2>
|
<!--
|
||||||
|
Будьте внимательны! В этой и других карточках текст дублируется умышленно!
|
||||||
|
Одно повторение нужно для того, что бы автоматически подобрались размеры блока
|
||||||
|
с учетом переносов строк
|
||||||
|
Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
|
||||||
|
Это плохое решение, но другого я не нашел
|
||||||
|
-->
|
||||||
|
<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>
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -91,10 +109,28 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
|
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
|
||||||
<div class="slider-text-inner">
|
<div class="slider-text-inner">
|
||||||
<h1>Надоело быть товаром?</h1>
|
<div class="blurred-card">
|
||||||
|
<!--
|
||||||
|
Будьте внимательны! В этой и других карточках текст дублируется умышленно!
|
||||||
|
Одно повторение нужно для того, что бы автоматически подобрались размеры блока
|
||||||
|
с учетом переносов строк
|
||||||
|
Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
|
||||||
|
Это плохое решение, но другого я не нашел
|
||||||
|
-->
|
||||||
|
<h1>Надоело быть товаром?</h1>
|
||||||
<h2>Вконтакте, Facebook, Instagram — цинично торгуют данными своих пользователей. Вы - товар!</h2>
|
<h2>Вконтакте, Facebook, Instagram — цинично торгуют данными своих пользователей. Вы - товар!</h2>
|
||||||
<p><a class="btn btn-primary btn-demo" href="https://mastodon.ml/about#new_user"></i>Освободиться</a>
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -106,10 +142,28 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 col-md-offset-3 slider-text">
|
<div class="col-md-6 col-md-offset-3 slider-text">
|
||||||
<div class="slider-text-inner text-center">
|
<div class="slider-text-inner text-center">
|
||||||
<h1>Что делать с корпоративной слежкой?</h1>
|
<div class="blurred-card">
|
||||||
<h2>Корпорации Mail.ru (ВК, OK, Mail), Facebook (Instagram, WhatsApp)
|
<!--
|
||||||
и Google следят за вами</h2>
|
Будьте внимательны! В этой и других карточках текст дублируется умышленно!
|
||||||
|
Одно повторение нужно для того, что бы автоматически подобрались размеры блока
|
||||||
|
с учетом переносов строк
|
||||||
|
Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
|
||||||
|
Это плохое решение, но другого я не нашел
|
||||||
|
-->
|
||||||
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -121,9 +175,26 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
|
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
|
||||||
<div class="slider-text-inner">
|
<div class="slider-text-inner">
|
||||||
<h1><font color="white"><b>Стать невидимкой, но только для Большого Брата</b></font></h1>
|
<div class="blurred-card">
|
||||||
<h2><font color="white"><b>Общайтесь с друзьями, без цензуры и слежки!</b></font></h2>
|
<!--
|
||||||
|
Будьте внимательны! В этой и других карточках текст дублируется умышленно!
|
||||||
|
Одно повторение нужно для того, что бы автоматически подобрались размеры блока
|
||||||
|
с учетом переносов строк
|
||||||
|
Другое повторение нужно для отображения текста поверх абсолютно позицированного блока.
|
||||||
|
Это плохое решение, но другого я не нашел
|
||||||
|
-->
|
||||||
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -492,7 +492,7 @@ h1, h2, h3, h4, h5, h6, figure {
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: rgba(0,0,0,1);
|
color: white;
|
||||||
font-family: $font-primary;
|
font-family: $font-primary;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -1480,3 +1480,68 @@ input[type="text"] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blurred-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 2px 2px 9px 2px black;
|
||||||
|
overflow: hidden;
|
||||||
|
color: white;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blurred-card > .background-faker {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: black;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blurred-card > .background-faker > div {
|
||||||
|
width: calc(100vw - 15px);
|
||||||
|
height: 500px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: bottom center;
|
||||||
|
background-size: cover;
|
||||||
|
filter: blur(10px);
|
||||||
|
opacity: 0.6;
|
||||||
|
max-width: 1060px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-pull-3 .blurred-card > .background-faker > div {
|
||||||
|
left: calc(-1 * (15px + 2em));
|
||||||
|
right: auto;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-push-3 .blurred-card > .background-faker > div {
|
||||||
|
right: calc(-1 * (15px + 2em));
|
||||||
|
left: auto;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 992px) {
|
||||||
|
.col-md-push-3 .blurred-card > .background-faker > div,
|
||||||
|
.col-md-pull-3 .blurred-card > .background-faker > div
|
||||||
|
{
|
||||||
|
right: auto;
|
||||||
|
left: calc(-1 * (15px + 2em));
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blurred-card > .card-content {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue