Открытка с Новым годом
![](/uploads/posts/2017-12/1512738121_newyear_card.jpg)
HTML
Разметка. Тут картинка для левой половинки открытки и текст поздравления для правой.<div class="card">
<div class="card-page cart-page-front">
<div class="card-page cart-page-outside"></div>
<div class="card-page cart-page-inside">
<span class="merry-christmas">
<img src="img/newyear.png" alt="">
</span>
</div>
</div>
<div class="card-page cart-page-bottom">
<h3 class="card-page__title">Поздравляем с Новым годом!</h3>
<div class="card-page__text">
<p>Желаем преданных друзей, верных соратников, искренних эмоций, щенячьего восторга, тепла, любви и ласки!</p>
<p>Здоровья, успехов, достатка, радости и взаимных симпатий. Будьте уверены, что все мечты исполнятся!</p>
</div>
</div>
</div>
CSS
В файле main.css стили открытки с анимацией. Учтена и адаптивность.JS
Небольшой jQuery скрипт для смены классов по клику на открытку.$(document).ready(function() {
var $clickMe = $('.click-icon'),
$card = $('.card');
$card.on('click', function() {
$(this).toggleClass('is-opened');
$clickMe.toggleClass('is-hidden');
});
});