diff --git "a/img/\320\221\320\260\321\200.png" "b/img/\320\221\320\260\321\200.png"
new file mode 100644
index 0000000..0e4a222
Binary files /dev/null and "b/img/\320\221\320\260\321\200.png" differ
diff --git "a/img/\320\224\320\276\320\274.png" "b/img/\320\224\320\276\320\274.png"
new file mode 100644
index 0000000..b8e3511
Binary files /dev/null and "b/img/\320\224\320\276\320\274.png" differ
diff --git "a/img/\320\234\320\265\320\263\320\260\321\202\320\276\321\200\320\263.png" "b/img/\320\234\320\265\320\263\320\260\321\202\320\276\321\200\320\263.png"
new file mode 100644
index 0000000..9dfadca
Binary files /dev/null and "b/img/\320\234\320\265\320\263\320\260\321\202\320\276\321\200\320\263.png" differ
diff --git "a/img/\320\234\320\276\321\200\320\265.png" "b/img/\320\234\320\276\321\200\320\265.png"
new file mode 100644
index 0000000..c21223c
Binary files /dev/null and "b/img/\320\234\320\276\321\200\320\265.png" differ
diff --git "a/img/\320\235\320\260\320\277\320\270\321\202\320\276\320\272.png" "b/img/\320\235\320\260\320\277\320\270\321\202\320\276\320\272.png"
new file mode 100644
index 0000000..aa4a942
Binary files /dev/null and "b/img/\320\235\320\260\320\277\320\270\321\202\320\276\320\272.png" differ
diff --git "a/img/\320\235\320\276\320\266\320\275\320\270\321\206\321\213.png" "b/img/\320\235\320\276\320\266\320\275\320\270\321\206\321\213.png"
new file mode 100644
index 0000000..4cfe495
Binary files /dev/null and "b/img/\320\235\320\276\320\266\320\275\320\270\321\206\321\213.png" differ
diff --git "a/img/\320\242\320\276\321\202\320\265\320\274.png" "b/img/\320\242\320\276\321\202\320\265\320\274.png"
new file mode 100644
index 0000000..6109448
Binary files /dev/null and "b/img/\320\242\320\276\321\202\320\265\320\274.png" differ
diff --git "a/img/\320\245\320\241.png" "b/img/\320\245\320\241.png"
new file mode 100644
index 0000000..8465815
Binary files /dev/null and "b/img/\320\245\320\241.png" differ
diff --git "a/img/\320\255\320\273\321\214\321\204.png" "b/img/\320\255\320\273\321\214\321\204.png"
new file mode 100644
index 0000000..50b7a1a
Binary files /dev/null and "b/img/\320\255\320\273\321\214\321\204.png" differ
diff --git "a/img/\320\261\321\203\321\202\321\213\320\273\320\272\320\260.png" "b/img/\320\261\321\203\321\202\321\213\320\273\320\272\320\260.png"
new file mode 100644
index 0000000..27e722a
Binary files /dev/null and "b/img/\320\261\321\203\321\202\321\213\320\273\320\272\320\260.png" differ
diff --git "a/img/\320\265\320\264\320\260.png" "b/img/\320\265\320\264\320\260.png"
new file mode 100644
index 0000000..d9c7316
Binary files /dev/null and "b/img/\320\265\320\264\320\260.png" differ
diff --git a/index.css b/index.css
index e69de29..d49a153 100644
--- a/index.css
+++ b/index.css
@@ -0,0 +1,320 @@
+.header
+{
+    position: relative;
+    overflow: hidden;
+    font-size: 20px;
+    text-align: center;
+}
+
+.morning
+{
+    border: 5px double;
+}
+
+.first-header
+{
+    height: 75%;
+}
+
+.second-header
+{
+    border-bottom: 3px solid;
+    border-top: 3px solid;
+    height: 24%;
+}
+
+.first-header div
+{
+    display: inline-block;
+}
+
+.second-header div
+{
+    display: inline-block;
+}
+
+.morning
+{
+    width: 20%;
+}
+
+.head-picture
+{
+    width: 15%;
+}
+
+.header-name
+{
+    width: 50%;
+    font-size: 60px;
+    font-family: 'Lobster', cursive;
+}
+
+.release
+{
+    width: 40%;
+}
+
+.series,
+.edition,
+.price
+{
+    width: 19%;
+}
+
+.black-rect
+{
+    background-color: black;
+    width: 20px;
+    height: 18px;
+}
+
+h1
+{
+    font-family: 'Neucha', cursive;
+    font-size: 100px;
+    position: relative;
+    text-align: center;
+}
+
+.hs
+{
+    width: 130px;
+    height: 100px;
+}
+
+.text
+{
+    width: 560px;
+    -moz-column-width: 270px;
+    -webkit-column-width: 270px;
+    column-count: 2;
+    column-width: 270px;
+    font-size: 13px;
+}
+
+.elf
+{
+    width: 80px;
+    height: 80px;
+}
+
+.bar
+{
+    padding-top: 150px;
+    width: 300px;
+    height: 150px;
+}
+
+.colla
+{
+    padding-top: 138px;
+    width: 260px;
+    height: 300px;
+}
+
+.break-column
+{
+    break-after: column;
+}
+
+.bold-text
+{
+    font-weight: bold;
+}
+
+hr
+{
+    height: 3px;
+    border: none;
+    background-color: black;
+}
+
+.main-picture
+{
+    text-align: center;
+}
+
+.main-picture img
+{
+    width: 100%;
+}
+
+.table-of-contents
+{
+    display: relative;
+    width: 300px;
+    height: 216px;
+    border: 2px double;
+    font-weight: normal;
+}
+
+.page
+{
+    padding-left: 250px;
+}
+
+.totem
+{
+    display: relative;
+    width: 300px;
+    height: 200px;
+    padding-top: 30px;
+}
+
+.food
+{
+    width: 150px;
+    height: auto;
+    padding-top: 20px;
+    padding-left: 30px;
+}
+
+.house
+{
+    width: 150px;
+    height: 350px;
+    padding-left: 150px;
+}
+
+.bottle
+{
+    width: 100px;
+    height: auto;
+}
+
+.mega
+{
+    width: 250px;
+}
+
+.picture
+{
+    width: 700px;
+    font-weight: bold;
+}
+
+.picture-header
+{
+    background-color: black;
+    color: white;
+    width: 600px;
+    font-size: 20px;
+}
+
+.picture-header div
+{
+    display: inline-block;
+}
+
+.cake
+{
+    text-align: center;
+}
+
+.big-text
+{
+    text-align: right;
+    width: 70%;
+    font-size: 20px;
+}
+
+.little-text
+{
+    text-align: left;
+    width: 20%;
+    font-size: 10px;
+}
+
+.picture-main-food
+{
+    width: 49%;
+}
+
+.picture-main-shop
+{
+    width: 50%;
+}
+
+.big-house-text
+{
+    font-size: 20px;
+}
+
+.little-house-text
+{
+    font-size: 12px;
+}
+
+.rotatable
+{
+    -webkit-transform: rotate(-20deg);
+    -moz-transform: rotate(-20deg);
+    -o-transform: rotate(-20deg);
+    -ms-transform: rotate(-20deg);
+    transform: rotate(-20deg);
+}
+
+.scissors
+{
+    width: 30px;
+    height: 150px;
+}
+
+.stock
+{
+    width: 300px;
+    height: 155px;
+}
+
+.mega-box
+{
+    text-transform: uppercase;
+    display: inline-block;
+}
+
+.main
+{
+    padding-left: 3%;
+}
+
+.world
+{
+    font-size: 30px;
+    text-align: center;
+}
+
+.big-world
+{
+    font-family: fantasy;
+    font-size: 50px;
+}
+
+.colla-text
+{
+    width: 250px;
+}
+
+.coast
+{
+    color: gray;
+}
+
+h3
+{
+    padding-left: 3%;
+}
+
+h1::first-letter
+{
+    color: darkkhaki;
+}
+
+.vertical
+{
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
diff --git a/index.html b/index.html
index d810ba7..a413caf 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,252 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-    <meta charset="utf-8">
+    <title>Прибамбасск</title>
+    <meta charset="UTF-8">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Neucha" rel="stylesheet">
 </head>
 <body>
+<div class="header">
+    <div class="first-header">
+        <div class="morning">
+            Утренний<br>
+            выпуск
+        </div>
+        <div class="header-name">
+            Вестник Прибамбасска<br>
+        </div>
+        <div class="head-picture">
+            <div class="hs">
+                <img src="img/ХС.png" class="hs" alt="Эмблема" title="Эмблема ХС">
+            </div>
+            <div class="every-day">
+                <div class="black-rect"></div>
+                Ежедневно
+            </div>
+        </div>
+    </div>
+    <div class="second-header">
+        <div class="release">
+            Сегодняшний выпуск
+        </div>
+        <div class="series">
+            Серия 32-№8
+        </div>
+        <div class="edition">
+            Издается с 2013г.
+        </div>
+        <div class="price">
+            8$
+        </div>
+    </div>
+</div>
+<h1>
+    Доходы растут
+</h1>
+<p class="main-picture">
+<img src="img/Море.png" alt="Море" title="Море">
+</p>
+<main>
+    <table>
+        <tr>
+            <td>
+                <h3>
+                    Порт и рынок —<br>
+                    залог процветания Прибамбаcска!
+                </h3>
+                <div class="main">
+                    <div class="text">
+                        <hr>
+                        <p class="bold-text">
+                            <img src="img/Эльф.png" class="elf" alt="Автор" title="Автор">
+                            Автор: Аора Р., ведущий
+                            журналист-расследователь
+                        </p>
+                        <p class="bold-text">
+                            Сегодня администрация порта
+                            Прибам асска объявила о том, что город
+                            достиг рекордных объемов товаро— и
+                            грузооборота. Коша-то Прибамбасск был
+                            лишь оазисом в бескрайней пустыне
+                            Танариса, однако его предприимчивым
+                            жителям удалось изыскать новые
+                            возможности И вывести город из состояния
+                            упадка, сделав его важнейшим портом
+                            Азерота и центром всемирной торговли.
+                        </p>
+                        <p>
+                            Мэр Гогельмогель не преминул отпразновать это
+                            событие: он собрал плату за стоянку в доках и,
+                            предварительно посчитав доходы, высказал
+                            благодарность работникам порта. Среди главных
+                            Факторов, определивших успех Прибамбасска, мэр
+                            назвал удобное прибрежное расположение города —
+                            рядом с Великим морем, а так же политику всячески
+                            поощряющую свооду торговли
+                            Он пренебрежительно
+                            отзывался о «глупых законах», которые принимают в
+                            своих городах другие не столь дальновидные
+                            представители власти. У мэра не нашлось (цензурного)
+                            ответа на обвинение в том, что его попустительская
+                            политика породила новый вид преступных
+                            группировок, — подобные заявления представители
+                            городской власти решительно опровергают.
+                        </p>
+                        <p class="break-column">
+                            Помимо общирной сети доков и складов  (которую часто называют
+                            хаотичной) в портовом районе Прибамбасска расположился
+                            крупнейший в городе рынок «Мегаторг», который туристические
+                            брошюры называют «мегацентром мегаторговли» всего мира.
+                            Интенсивный приток товаров из самых разных земель
+                            <img src="img/Бар.png" class="bar" alt="БарРеклама" title="Реклама">
+                        </p>
+                        <p>
+                            привел к резкому экономическому росту и способствовал
+                            развитию торгового района. По словам местных
+                            жителей, в здешних лабиринтах из магазинов и лавок
+                            вы сможете найти все, что только пожелаете (и даже то,
+                            чего не желаете совсем) — от редких алхимических
+                            ингредиентов до экзотических существ, и все это под
+                            одной огромной крышей.
+                        </p>
+                        <p>
+                            Мы встретились в этом царстве изобилия с мэром
+                            Гогельмогелем, чтобы перекусить, а заодно поговорить
+                            о том, какую роль торговля играет в экономике
+                            Прибамбасска. «Мегаторг» — одно из моих любимых
+                            мест в городе! Ничто так не услаждает слух гоблина, как
+                            звон золотых монет, и мне отрадно наблюдать, как
+                            вращаются славные шестеренки капитализма,
+                            направляя Прибамбасск к благополучию и
+                            процветанию! Город очень гордится тем, что в его
+                            черте расположился такой значимый центр торговли,
+                            как “Мегаторг”. Здесь каждый имеет возможность
+                            проложить себе путь к богатству».
+                        </p>
+                        <p class="break-column">
+                            На вопрос о таинственных Фигурах в плащах и
+                            капюшонах, которые , по слухам связанны с
+                            контрабандой, незаконной торговлей зельями и
+                            странной красной маной. поставляемой из порта. мэр
+                            поощряющую свободу торговли.
+                            ответил довольно скептически: «Да ладно. Что еще за
+                            теории заговора? Вы что? Спросите еще о драконах,
+                            которые тайно проникают в наш город!» К сожалению,
+                            у мэра появились срочные дела, и он был вынужден
+                            уйти, прежде чем мы успели узнать подробности о
+                            тайных агентах — драконах, которые, по слухам,
+                            проникают в Прибамбасск.
+                            <img src="img/Напиток.png" class="colla" alt="КоллаРеклама" title="Реклама">
+                        </p>
+                    </div>
+                </div>
+            </td>
+            <td>
+                <div class="picture">
+                    <table>
+                        <tr>
+                            <td colspan="2">
+                                <div class="picture-header">
+                                    <div class="big-text">Всем посетителям</div>
+                                    <div class="little-text">
+                                        по карте и<br>
+                                        компасу бесплатно!
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <img src="img/Мегаторг.png" class="mega" alt="Мегаторг" title="Магазин">
+                            </td>
+                            <td>
+                                <div class="world">
+                                    все товары<br>
+                                    <div class="big-world">Мира</div><br>
+                                    под одной крышей
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="picture-main-food">
+                                    <figure>
+                                        <figcaption class="rotatable">
+                                            Проголодались?
+                                        </figcaption>
+                                        <img src="img/еда.png" class="food" alt="Еда" title="Еда">
+                                    </figure>
+                                </div>
+                            </td>
+                            <td>
+                                <div>
+                                    <div class="big-house-text">
+                                        Бесчисленное* множество<br>
+                                        Магазинов и лавок!<br>
+                                    </div>
+                                    <div class="little-house-text">
+                                        *в прямом смысле этого слова!<br>
+                                        никто их не пересчитывал!
+                                    </div>
+                                </div>
+                                <p class="cake">
+                                    Отведай рулета<br>во всемирно известной<br>харчевне!
+                                </p>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="stock">
+                                    <table>
+                                        <tr>
+                                            <td>
+                                                -При придъявлении купонa
+                                                <div class="stock-picture">
+                                                    <img src="img/бутылка.png" class="bottle" alt="Бутылка"
+                                                         title="Напиток">
+                                                    <div class="colaText">
+                                                        Бутылка освежающей «Каджа-Колы» в подарок
+                                                        при первой покупке.<br>
+                                                        <div class="coast">у набережной</div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <img src="img/Ножницы.png" class="scissors" alt="Ножницы"
+                                                     title="Вырежи">
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </div>
+                            </td>
+                            <td>
+                                <img src="img/Дом.png" class="house" alt="Харчевня" title="Харчевня">
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <img src="img/Тотем.png" class="totem" alt="ТотемыРеклама" title="Реклама">
+                            </td>
+                            <td>
+                                <div class="table-of-contents">
+                                    Оглавление<br>
+                                    <hr>
+                                    Бизнес<div class="page">2</div><br>
+                                    Искусство<div class="page">2</div><br>
+                                    Спорт<div class="page">2</div><br>
+                                    Стиль жизни<div class="page">2</div><br>
+                                    Поиск работы<div class="page">2</div><br>
+                                    Некролог<div class="page">3-8</div><br>
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </td>
+        </tr>
+    </table>
+</main>
 </body>
 </html>