Еще один вариант на полноэкранную форму подписки, где идет значек, что по клику появляется окно на полную страницу.
При открытие:
HTML
Код
<div class="wrap">
<div class="intro">
<a href="#target" class="toggle"></a>
<div class="content">
<h1>Весна уже скоро!<span>Однако, придётся подождать</span></h1>
<div id="timer"></div>
</div>
</div>
<div id="target">
<a href="#close" class="close"></a>
<form action="" method="get">
<h1>Подписаться,<span> чтобы не пропустить начало зимы</span></h1>
<input type="text" placeholder="Ваш E-mail" required><button type="submit"></button>
</form>
</div>
</div>
CSS
Код
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Playfair+Display:400,700';
*{box-sizing:border-box;transition:.3s linear}
body {
margin: 0;
height: 100vh;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
border: 20px solid rgba(255, 255, 255, 0);
background: url(https://html5book.ru/wp-content/uploads/2017/04/photo-spring.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
.wrap {
position: relative;
height: 100%;
-webkit-perspective: 1000;
perspective: 1000;
transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
background: rgba(255, 255, 255, .5);
}
.content, form {
width: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
.toggle, .close {
text-decoration: none;
display: block;
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
background: #3F3461;
position: relative;
text-align: center;
margin: 20px;
}
.close {
background: #4D452A;
}
.toggle:before, .close:before {
content: "\f003";
font-family: FontAwesome;
color: white;
line-height: 50px;
font-size: 24px;
}
h1 {
color: #3F3461;
font-size: 4em;
font-family: 'Playfair Display', serif;
margin-top: 0;
}
h1 span {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
text-transform: uppercase;
display: block;
color: #596F8B;
letter-spacing: 3px;
font-weight: normal;
}
#target {
opacity: 0;
transform: scale(0.5);
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background: #D4C657;
position: absolute;
}
#target h1, #target span {
color: white;
}
.close:before {
content: "\f00d";
}
#target:target {
opacity: 1;
transform: scale(1);
}
#timer span {
color: #3F3461;
font-size: 4em;
font-weight: bold;
}
form {
padding: 20px;
}
form input {
height: auto;
display: block;
outline:none;
width: 100%;
line-height: 50px;
font-size: 30px;
padding-left: 15px;
border: none;
background-color: rgba(255, 255, 255, .5);
}
button {
position: absolute;
bottom: 21px;
right: 15px;
width: 80px;
font-size: 40px;
background: transparent;
cursor: pointer;
border: none;
}
button:before {
content: "\f003";
font-family: FontAwesome;
color: white;
font-size: 30px;
line-height: 50px;
}
@media (max-width: 768px) {
h1 {font-size: 3em}
h1 span {font-size:14px}
#timer span {font-size: 3em}
form input {font-size:20px}
}
@media (max-width: 400px) {
h1 {font-size: 2em}
}
JS
Код
$('#timer').countdown('2019/03/01').on('update.countdown', function(event) {
var $this = $(this).html(event.strftime(''
+ '<span>%-w</span> недель'
+ '<span>%-d</span> дней'
));
});
На странице подключаем в head для корректной работы.
Код
<script src="https://html5book.ru/examples/plugins/jquery.countdown.min.js"></script>
Также закреплен файл под материал.
Демонстрация
