+ );
+ }
+}
diff --git a/src/components/circle.png b/src/components/circle.png
new file mode 100644
index 0000000..4b9b3c9
Binary files /dev/null and b/src/components/circle.png differ
diff --git a/src/components/css/animation.css b/src/components/css/animation.css
new file mode 100644
index 0000000..ea0900d
--- /dev/null
+++ b/src/components/css/animation.css
@@ -0,0 +1,23 @@
+.msg-adding-start {
+ height: 0;
+ margin-top: -1px;
+ opacity: 0;
+}
+
+.msg-adding-finish {
+ height: 39.33px;
+ opacity: 1;
+ transition: height 1s ease 0s, opacity 1s ease 0s;
+}
+
+.msg-deleting-right {
+ opacity: 0;
+ transform: translateX(100%);
+ transition: transform 2s ease 0s, opacity 2s ease 0s;
+}
+
+.msg-deleting-left {
+ opacity: 0;
+ transform: translateX(-100%);
+ transition: transform 2s ease 0s, opacity 2s ease 0s;
+}
diff --git a/src/components/css/common-styles.css b/src/components/css/common-styles.css
new file mode 100644
index 0000000..8077d14
--- /dev/null
+++ b/src/components/css/common-styles.css
@@ -0,0 +1,11 @@
+li {
+ list-style-type: none;
+}
+
+a {
+ text-decoration: none;
+}
+
+.hidden {
+ display: none;
+}
diff --git a/src/components/fonts/HelveticaNeueCyr.otf b/src/components/fonts/HelveticaNeueCyr.otf
new file mode 100644
index 0000000..a2cde16
Binary files /dev/null and b/src/components/fonts/HelveticaNeueCyr.otf differ
diff --git a/src/components/fonts/YandexSansDisplay.ttf b/src/components/fonts/YandexSansDisplay.ttf
new file mode 100644
index 0000000..3b8e196
Binary files /dev/null and b/src/components/fonts/YandexSansDisplay.ttf differ
diff --git a/src/components/fonts/fonts.css b/src/components/fonts/fonts.css
new file mode 100644
index 0000000..4e0ea3e
--- /dev/null
+++ b/src/components/fonts/fonts.css
@@ -0,0 +1,9 @@
+@font-face {
+ font-family: 'YSText';
+ src: url('./YandexSansDisplay.ttf');
+}
+
+@font-face {
+ font-family: 'HelveticaNeue';
+ src: url('./HelveticaNeueCyr.otf');
+}
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
new file mode 100644
index 0000000..f580daf
--- /dev/null
+++ b/src/components/footer/footer.css
@@ -0,0 +1,12 @@
+.footer__links {
+ margin-left: 30px;
+ color: #9b9b9b;
+ font-family: 'HelveticaNeue', serif;
+ font-size: 11px;
+ font-stretch: normal;
+ font-style: normal;
+ font-weight: normal;
+ letter-spacing: normal;
+ line-height: normal;
+ vertical-align: top;
+}
diff --git a/src/components/footer/footer.jsx b/src/components/footer/footer.jsx
new file mode 100644
index 0000000..a98cc20
--- /dev/null
+++ b/src/components/footer/footer.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './footer.css';
+
+export function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/genLetter.jsx b/src/components/genLetter.jsx
new file mode 100644
index 0000000..e710a45
--- /dev/null
+++ b/src/components/genLetter.jsx
@@ -0,0 +1,134 @@
+export class GenerateLetter {
+ constructor() {
+ this.months = [
+ 'янв',
+ 'фев',
+ 'мар',
+ 'апр',
+ 'май',
+ 'июн',
+ 'июл',
+ 'авг',
+ 'сен',
+ 'окт',
+ 'ноя',
+ 'дек'
+ ];
+
+ this.womenSenders = [
+ 'Астахова',
+ 'Ассоль',
+ 'Железнова',
+ 'Душечка',
+ 'Каренина',
+ 'Измайлова',
+ 'Иванова',
+ 'Мармеладова',
+ 'Эсмиральда',
+ 'Кармен',
+ 'Бовари'
+ ];
+
+ this.menSenders = [
+ 'Незнайка',
+ 'Иван',
+ 'Тёркин',
+ 'Швейк',
+ 'Тимур',
+ 'Шариков',
+ 'Мелехов',
+ 'Бендер',
+ 'Епанчин',
+ 'Левша',
+ 'Мышкин',
+ 'Раскольников',
+ 'Опискин',
+ 'Головлев',
+ 'Печорин',
+ 'Чичиков',
+ 'Ревизор',
+ 'Хлестаков',
+ 'Бульба',
+ 'Онегин',
+ 'Чацкий',
+ 'Митрофанушка',
+ 'Мегрэ',
+ 'Брюньон',
+ 'Готье',
+ 'Квазимодо',
+ 'Паганель',
+ 'Тартарен',
+ 'Монте-Кристо',
+ 'Фигаро',
+ 'Базаров',
+ 'Обломов',
+ 'Прутков'
+ ];
+
+ this.womenMails = [
+ '«Любить Вас сильнее» мне трудно – но я нежно обнимаю Вас. Письмо Ваше, полученное нынче утром, наполнено такой печалью, что тронуло меня до ГЛУБИНЫ души. Мы расстались в тот момент, когда многие вещи готовы уже были сорваться с наших губ. Все двери между нами еще не открыты. Вы внушаете мне великое уважение, и я не осмеливаюсь задать Вам главный вопрос.',
+ 'Вы так красивы, что Вам необходимо делать паспортные фотографии в полный рост',
+ 'Я чувствую, что ты настоящий друг моей души и дороже для меня, чем сама жизнь; я то же самое для тебя. Никто не сможет сравниться с тобой.',
+ 'Ничто не может доставить мне большего удовольствия, чем весточка от Вас. Перспектива жить два месяца, ничего о Вас не зная, для меня совершенно невыносима. Я хочу сказать, Ваша маленькая записка была более чем желанна.',
+ 'Надеюсь, Вы надышитесь свежим воздухом и вернетесь к нам в октябре. Что до меня, то я никуда не поеду. Останусь в деревне, здесь я провожу целый день перед открытым окном или в саду.',
+ 'Мы обещали друг другу – не так ли? – быть, по крайней мере, близкими друзьями. Только бы Вы не передумали! Ведь нет таких обещаний, которые связывают навеки; наши чувства не подчиняются усилию воли. Как было бы прекрасно (об этом я не смею даже думать) вместе пройти по жизни, мечтая: Ваша патриотическая мечта, наша гуманитарная мечта и наша научная мечта.',
+ 'Разговор с твоим отцом был ужасен… Такая холодность, такая неискренность, такая изощренная хитрость, такое упрямство – у него новая манера уничтожения, он наносит тебе удар в сердце, вонзая нож в грудь по самую рукоятку…',
+ 'Пока я не чувствую, что ты «к чему – то идешь», мне тяжело с тобой, потому что невыносимо видеть, как глупо и пошло ты тратишь время',
+ 'Не беспокойся о потерях. Если это правильно, это происходит. Главное, не спешить. Ничто хорошее не исчезает.',
+ 'Мы будем рады встретиться со Сьюзен, мы с удовольствием примем ее. Элейн обо всем позаботится, это ее вотчина. Она тоже знает многое о любви и, может быть, она поможет тебе лучше, чем я.',
+ 'Если любишь кого-то — нет ничего страшного в том, чтобы сказать об этом. Но только ты должен помнить, что некоторые люди очень стеснительны, и иногда нужно с этим считаться.',
+ 'Память подобна мускулам твоих ног. Если ты ее перестанешь упражнять, то она станет дряблой, и ты превратишься в идиота. Кроме того, все мы в старости рискуем заболеть болезнью Альцгеймера, и один из способов избежать этой неприятности заключается в постоянном упражнении нашей памяти.',
+ 'Но почему так важно знать о событиях далекого прошлого? Потому что часто подобные знания помогают понять ход сегодняшних событий и в любом случае, как знание состава футбольных команд, помогают обогатить нашу память.',
+ 'Пока я не чувствую, что ты «к чему – то идешь», мне тяжело с тобой, потому что невыносимо видеть, как глупо и пошло ты тратишь время'
+ ];
+
+ this.menMails = [
+ 'Вы грустны, бедный мой друг и дорогой мэтр. Я подумал о Вас, узнав о смерти Дюверье. Вы любили его, поэтому я соболезную Вам. Эта потеря добавляется к остальным. Как нам удержать умершие души в наших сердцах? Каждый из нас носит внутри свой некрополь.',
+ 'После Вашего отъезда я совершенно РАЗБИТ. Мне кажется, я не видел Вас десять лет. Вы – единственный предмет моих разговоров с матерью, все здесь Вас любят. Под какой звездой, скажите, Вы родились, если соединили в себе столь несовместимые качества, так много и такие редкие?',
+ 'Не знаю, что именно я испытываю по отношению к Вам. Но питаю к Вам особенную нежность. Никто до сегодняшнего дня не вызывал у меня подобных чувств. Мы поняли друг друга, правда. И это благо.',
+ 'Особенно я переживал Ваше отсутствие вчера вечером, в десять часов. Неподалеку что-то горело. Небо светилось розоватым светом, Сена была цвета крыжовенного сиропа. Я работал три часа и вернулся домой измученный, как турок, объезжавший жирафа.',
+ 'Руанская газета, Nouvelliste, написала о Вашем приезде в Руан, и в субботу после расставания с Вами я встретил нескольких обывателей, возмущенных тем, что я не представил их Вам. Лучше всего выразился бывший зампрефекта: «Ах! Если бы мы знали, что она была здесь… мы бы… мы бы… – он пять минут пытался подобрать нужное слово, – мы бы улыбнулись ей». Но этого было бы недостаточно, не так ли?',
+ 'Наверно, можно сказать, что мы с тобой достигли всего, чего не достигли другие люди. И что? И ничего, одно дерьмо. Я тебя люблю, как любил всегда. Папа',
+ 'Я не могу выразить словами то, что каждый раз, когда я обнимал Вас, я чувствовал, что был дома',
+ 'Марлен, я люблю Вас настолько страстно, что эта любовь навсегда будет моим проклятием',
+ 'Моя дорогая Эмма, все твои письма, дорогие мне письма, так занимательны и так полно открывают твою сущность, что, прочитав их, я испытываю либо величайшее удовольствие, либо величайшую боль. Это еще одна лучшая вещь бытия с тобой',
+ 'Я только желаю, моя дражайшая Эмма, чтоб ты всегда верила, что Нельсон – твой; альфа и омега Нельсона – это Эмма. Я не могу измениться – моя привязанность и любовь к тебе лежит за пределами этого мира! Ничто не в силах разбить ее, только ты одна. Но об этом я не позволяю себе задуматься ни на мгновение.',
+ 'Я рад, что ты совершила столь приятное путешествие в Норфолк. Надеюсь однажды поймать тебя там и связать узами закона, более крепкими, чем узы любви и привязанности, которые соединяют нас сейчас…',
+ 'Я очень хочу знать, приходил ли навестить нас шурин Хофер на следующий день после моего отъезда? Часто ли он приходит, как обещал мне? Заходят ли Лангесы иногда? Как движется работа над портретом? Как ты живешь? Все это, естественно, меня чрезвычайно интересует.',
+ 'Я умоляю тебя вести себя так, чтобы не пострадало ни твое, ни мое доброе имя, также следи за своей внешностью. Не сердись на меня за такую просьбу. Ты должна любить меня еще сильнее за то, что я забочусь о нашей с тобой чести.',
+ 'Я хотел просить разрешения случайно встретиться с Вами во Фрайбурге. Но Вы остаетесь там, если я не ошибаюсь, только на один день, и в этот день, конечно, будете принадлежать нашим друзьям Ковальски.',
+ 'Я был бы счастлив, если бы Вы ответили мне и уверили меня в том, что собираетесь вернуться в октябре. Если Вы напишете прямо в Со, письмо дойдет быстрее.',
+ 'Сегодня я настолько бессилен, настолько унижен, что едва ли смогу найти достойный выход. Настолько бессердечным, чтобы бросить тебя, я еще не стал; но ожесточенным, оскорбленным в лучших чувствах, стиснутым в рамках самых общих мест – да.',
+ 'Если бы я получил хоть словечко от тебя! Ты должна сказать мне, что делать. В противном случае мое существование сведется к насмешке и глупой шутке, и я уйду прочь.',
+ 'Бог знает, никогда до этой минуты я не думал, что Вы, моя любовь, мой дорогой друг, можете быть такой неистовой. Я не могу выразить все, сейчас не время для слов. Но я буду испытывать чувство гордости и получать печальное удовольствие от страданий, которые Вы испытали. И от того, что Вы совсем не знаете меня.',
+ 'Меня не заботит, кто знает об этом и как это может быть использовано – это для тебя, только для тебя. Я был твоим и сейчас я твой, целиком и полностью, чтобы повиноваться, почитать, любить тебя и летать с тобой, когда, где и как тебе будет угодно.',
+ 'Я оттого и пишу эти письма, чтобы исправить что-то неправильное, и выгляжу, наверное, смешным и нелепым, как некоторые мои персонажи. Но ведь это я! В сущности, дружочек, ничего нет проще живой тревоги отцовского сердца.',
+ 'Дорогая Скотти, те моменты, когда тебя душит отчаяние, когда тебе кажется, что у тебя ничего не получается и что невозможно ничего сделать, вот знай, дорогая Скотти: только в такие моменты ты по-настоящему идёшь вперёд.',
+ 'Если ты влюбился, это хорошо, это самое лучшее, что может случиться с каждым. Не позволяй никому сделать это чувство мелким или незначимым.',
+ 'Я был таким, как они, Джеральдина. В те ночи, в те волшебные ночи, когда ты засыпала, убаюканная моими сказками, я бодрствовал.'
+ ];
+ }
+
+ genDate() {
+ const day = Math.floor(Math.random() * 27) + 1;
+ const month = this.months[Math.floor(Math.random() * this.months.length)];
+ const date = `${day} ${month}`;
+ const formatedDate = `2019-${this.months.findIndex(curMonth => {
+ return curMonth === month;
+ })}-${day}`;
+ return [date, formatedDate];
+ }
+
+ genSenderAndMail() {
+ let sender;
+ let mail;
+ if (Math.random() > 0.5) {
+ sender = this.menSenders[Math.floor(Math.random() * this.menSenders.length)];
+ mail = this.menMails[Math.floor(Math.random() * this.menMails.length)];
+ } else {
+ sender = this.womenSenders[Math.floor(Math.random() * this.womenSenders.length)];
+ mail = this.womenMails[Math.floor(Math.random() * this.womenMails.length)];
+ }
+ return [sender, mail];
+ }
+}
diff --git a/src/components/header/Yandex.png b/src/components/header/Yandex.png
new file mode 100644
index 0000000..e79b98c
Binary files /dev/null and b/src/components/header/Yandex.png differ
diff --git a/src/components/header/header.css b/src/components/header/header.css
new file mode 100644
index 0000000..f21a275
--- /dev/null
+++ b/src/components/header/header.css
@@ -0,0 +1,36 @@
+.header {
+ margin-top: 11px;
+}
+
+.header__pic-yandex {
+ box-sizing: border-box;
+ margin-top: 1px;
+ margin-left: 15px;
+ vertical-align: top;
+}
+
+.header__search {
+ left: 324px;
+
+ display: inline-block;
+ width: 301px;
+ height: 32px;
+ box-sizing: border-box;
+ padding-left: 16px;
+ margin-left: 114px;
+ background-color: #fff;
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+ font-family: 'YSText', serif;
+ font-size: 15px;
+ line-height: 2.13;
+ opacity: 0.5;
+ vertical-align: top;
+}
+
+.header__close {
+ position: absolute;
+ top: 15px;
+ left: 600px;
+ color: #000;
+ font-size: 20px;
+}
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
new file mode 100644
index 0000000..5fb19ec
--- /dev/null
+++ b/src/components/header/header.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './header.css';
+
+import { Menu } from '../menu/menu';
+import yandexLogo from './Yandex.png';
+
+export function Header() {
+ return (
+
+
+
+
+