urfu-2018 · Tassadar2499 · Nov 20, 2018 · Nov 22, 2018 · Nov 22, 2018 · Nov 22, 2018
diff --git a/img/apperture.png b/img/apperture.png
diff --git a/img/find.png b/img/find.png
diff --git a/img/kama-pulya.jpg b/img/kama-pulya.jpg
diff --git a/img/weather.jpg b/img/weather.jpg
diff --git a/img/yadisk-logo1.jpg b/img/yadisk-logo1.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,225 @@
+@font-face
+{
+    font-family: 'PT Sans Narrow';
+    src: local('PT Sans Narrow'), local('PTSans-Narrow'), url('ptsansnarrow.woff2') format('woff2'), url('ptsansnarrow.woff') format('woff'), url('ptsansnarrow.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+.yandex-font
+{
+    font-family: PT Sans Narrow;
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.yandex-font::first-letter
+{
+    color: red;
+}
+
+.left-side-header a
+{
+    text-decoration: none;
+    color: gray;
+}
+
+.left-side-header a:hover
+{
+    color: red;
+    cursor: pointer;
+}
+
+.left-side-header
+{
+    left: 5%;
+    position: absolute;
+}
+
+.settings
+{
+    right: 15%;
+    position: absolute;
+}
+
+.login
+{
+    right: 1%;
+    border: 1px solid lightgray;
+    box-shadow: 0 0 10px rgba(0,0,0,.5);
+    width: 10%;
+    height: 60px;
+    position: absolute;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+main
+{
+    left: 15%;
+    right: 15%;
+    top: 15%;
+    position: absolute;
+    display: grid;
+    grid-template-columns: 19% 27% 27% 27%;
+    grid-template-rows: 20% 10% 150px 400px 400px;
+    grid-gap: 30px;
+}
+
+.news
+{
+    grid-column: 2 / 4;
+    overflow: auto;
+}
+
+.yandex-disk
+{
+    grid-column: 4 / 5;
+}
+
+.searching-field,
+.image-application
+{
+    grid-column: 2 / 5;
+}
+
+.visited-sites,
+.umoreski
+{
+    grid-column: 2 / 3;
+}
+
+.tv-program,
+.auto-news
+{
+    grid-column: 3 / 4;
+}
+
+.weather,
+.poster
+{
+    grid-column: 4 / 5;
+}
+
+.logo
+{
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+}
+
+.blue-link
+{
+    text-decoration: none;
+    color: blue;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: 600;
+}
+
+.blue-link:hover
+{
+    opacity: .8;
+}
+
+.head-title
+{
+    font-size: 25px;
+}
+
+.transp-text
+{
+    opacity: .5;
+    display: inline;
+}
+
+.gray-text
+{
+    color: gray;
+    display: inline;
+}
+
+li
+{
+    padding-top: 10px;
+}
+
+.valute
+{
+    padding-left: 30px;
+    display: inline;
+}
+
+.yandex-disk img
+{
+    width: 70%;
+    margin-left: 15%;
+    margin-right: 15%;
+}
+
+.yandex-disk .blue-link
+{
+    font-size: 20px;
+}
+
+.text-center
+{
+    text-align: center;
+}
+
+.searching-field .blue-link
+{
+    padding-right: 20px;
+    font-size: 18px;
+}
+
+.textbox
+{
+    height: 40px;
+    border: 2px solid yellow;
+    width: 80%;
+    margin-bottom: 10px;
+}
+
+.find-image
+{
+    height: 46px;
+    float: right;
+    width: 19%;
+}
+
+.yandex-logo-font
+{
+    font-size: 50px;
+    font-family: PT Sans Narrow;
+    font-weight: bold;
+    margin: 20%;
+    margin-top: 20px;
+}
+
+.yandex-logo-font::first-letter
+{
+    color: red;
+}
+
+.image-application img
+{
+    width: 100%;
+    height: 100%;
+}
+
+.weather img
+{
+    height: 50px;
+    width: 50px;
+}
+
+.degrees
+{
+    font-size: 20px;
+    display: inline;
+}
+
+.auto-news
+{
+    overflow-y: scroll;
+}
diff --git a/index.html b/index.html
@@ -2,8 +2,149 @@
 <html lang="ru">
 <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="index.css">
     <title>Задача «Морда»</title>
 </head>
 <body>
+    <header>
+        <div class="left-side-header">
+                <a href="#">&#10148; Екатеринбург</a>
+        </div>
+        <div class="right-side-header">
+            <div class="settings">
+                Настройка
+            </div>
+            <div class="login">
+                <div class="yandex-font">login</div><br>
+                Почта <strong>138</strong>
+            </div>
+        </div>
+    </header>
+    <main>
+        <div class="news">
+            <a href="#" class="blue-link head-title">Сейчас в СМИ
+                <div class="transp-text">в Екатеринбурге</div>
+            </a>
+            <div class="gray-text">13 ноября понедельник 16:57</div>
+            <ul>
+                <li>В Кремле ответили на млова ЭКС главы ЦРУ о запуганном Путиным Трампе</li>
+                <li>В Кремле ответили на млова ЭКС главы ЦРУ о запуганном Путиным Трампе</li>
+                <li>В Кремле ответили на млова ЭКС главы ЦРУ о запуганном Путиным Трампе</li>
+                <li>В Кремле ответили на млова ЭКС главы ЦРУ о запуганном Путиным Трампе</li>
+                <li>В Кремле ответили на млова ЭКС главы ЦРУ о запуганном Путиным Трампе</li>
+            </ul>
+            <div class="valute"><strong>USD ЦБ</strong> 59,18 <div class="gray-text">-0,10</div></div>
+            <div class="valute"><strong>USD ЦБ</strong> 59,18 <div class="gray-text">-0,10</div></div>
+            <div class="valute"><strong>USD ЦБ</strong> 59,18 <div class="gray-text">-0,10</div></div>
+        </div>
+        <div class="yandex-disk">
+            <a href="#"><img src="img/yadisk-logo1.jpg" alt="logo"></a>
+            <a href="#" class="blue-link">
+                <div class="text-center">
+                    32 ГБ Студентам<br>на Яндекс диске
+                </div>
+            </a>
+            <br>
+            <div class="text-center">Бесплатно и навсегда</div>
+        </div>
+        <div class="searching-field">
+            <a href="#" class="blue-link">Видео</a>
+            <a href="#" class="blue-link">Картинки</a>
+            <a href="#" class="blue-link">Новости</a>
+            <a href="#" class="blue-link">Карты</a>
+            <a href="#" class="blue-link">Макет</a>
+            <a href="#" class="blue-link">Переводчик</a>
+            <a href="#" class="blue-link">Музыка</a>
+            <a href="#" class="blue-link">Ещё</a>
+            <br><br>
+            <input type="text" class="textbox">
+            <input type="image" src="img/find.png" class="find-image" alt="kek">
+            <br>
+            Найдётся все, например: <div class="gray-text">Выхожу один я на дорогу</div>
+        </div>
+        <div class="logo">
+            <div class="yandex-logo-font">Яндекс</div>
+        </div>
+        <div class="image-application">
+            <a href="https://www.youtube.com/watch?v=DXbqsjY2u_0">
+                <img src="img/kama-pulya.jpg" alt="kama">
+            </a>
+        </div>
+        <div class="visited-sites">
+            <a class="blue-link head-title" href="#">Посещаемое</a>
+            <p><strong>Маркет</strong> - китайская распродажа</p>
+            <p><strong>Маркет</strong> - китайская распродажа</p>
+            <p><strong>Маркет</strong> - китайская распродажа</p>
+            <p><strong>Маркет</strong> - китайская распродажа</p>
+            <p><strong>Маркет</strong> - китайская распродажа</p>
+            <p><strong>Маркет</strong> - китайская распродажа</p>
+            <p><strong>Маркет</strong> - китайская распродажа</p>
+        </div>
+        <div class="tv-program">
+            <a class="blue-link head-title" href="#">ТВ-программа</a>
+            <br><br>
+            16:00 - Понять Простить <div class="gray-text">От души ежжи</div>
+            <br><br>
+            16:00 - Понять Простить <div class="gray-text">От души ежжи</div>
+            <br><br>
+            16:00 - Понять Простить <div class="gray-text">От души ежжи</div>
+            <br><br>
+            16:00 - Понять Простить <div class="gray-text">От души ежжи</div>
+            <br><br>
+            16:00 - Понять Простить <div class="gray-text">От души ежжи</div>
+            <br><br>
+            16:00 - Понять Простить <div class="gray-text">От души ежжи</div>
+        </div>
+        <div class="weather">
+            <a class="blue-link head-title" href="#">Погода</a>
+            <img src="img/weather.jpg" alt="weathe">
+            <div class="degrees">100 K</div><br>
+            Вечер -5, Ночь -7
+            <br><br><br>
+            <a class="blue-link head-title" href="#">Наука</a>
+            <img src="img/apperture.png" alt="apperture">
+            <div class="degrees">Развивается</div><br>
+            Тортик ложь
+        </div>
+        <div class="umoreski">
+            <a class="blue-link head-title" href="#">Анекдоты</a><br><br>
+            Раздел: <a class="blue-link">Категория Б</a><br>
+            Техасец заходит в паб в Ирландии и заявляет:<br>
+            — Я слышал, что вы — ирландцы редкие пьянчуги! Сейчас проверим!
+            Я дам 500 долларов тому, кто выпьет 10 пинт пива подряд!<br>
+            Все в баре притихли; некоторые посетители даже ушли.
+            Через некоторое время один вернулся и спросил:<br>
+            — Ваше предложение все еще в силе?<br>
+            — Да, — сказал техасец.<br>
+            Мужик выпивает 10 пинт подряд.
+            Техасец в шоке отдал ему деньги и спросил:<br>
+            — Слушай, а куда ты уходил?<br>
+            — Да я пошел в другой паб и проверил, смогу ли я столько выпить...
+        </div>
+        <div class="auto-news">
+            <a class="blue-link head-title" href="#">Новости</a><br><br>
+            <p>20 яхт российских миллиардеров превосходят по стоимости военно-морской флот</p>
+            <p>20 яхт российских миллиардеров превосходят по стоимости военно-морской флот</p>
+            <p>20 яхт российских миллиардеров превосходят по стоимости военно-морской флот</p>
+            <p>20 яхт российских миллиардеров превосходят по стоимости военно-морской флот</p>
+            <p>20 яхт российских миллиардеров превосходят по стоимости военно-морской флот</p>
+            <p>20 яхт российских миллиардеров превосходят по стоимости военно-морской флот</p>
+            <p>20 яхт российских миллиардеров превосходят по стоимости военно-морской флот</p>
+        </div>
+        <div class="poster">
+            <a class="blue-link head-title" href="#">Афиша</a>
+            <br><br>
+            Кинчик за жизнь <div class="gray-text">вообще по красоте</div>
+            <br><br>
+            Кинчик за жизнь <div class="gray-text">вообще по красоте</div>
+            <br><br>
+            Кинчик за жизнь <div class="gray-text">вообще по красоте</div>
+            <br><br>
+            Кинчик за жизнь <div class="gray-text">вообще по красоте</div>
+            <br><br>
+            Кинчик за жизнь <div class="gray-text">вообще по красоте</div>
+            <br><br>
+        </div>
+    </main>
 </body>
 </html>
diff --git a/ptsansnarrow.ttf b/ptsansnarrow.ttf
diff --git a/ptsansnarrow.woff b/ptsansnarrow.woff
diff --git a/ptsansnarrow.woff2 b/ptsansnarrow.woff2