diff --git a/images/advertisment.png b/images/advertisment.png new file mode 100644 index 0000000..207cc15 Binary files /dev/null and b/images/advertisment.png differ diff --git a/images/notifications-bell.svg b/images/notifications-bell.svg new file mode 100644 index 0000000..1d861fc --- /dev/null +++ b/images/notifications-bell.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/user-avatar.png b/images/user-avatar.png new file mode 100644 index 0000000..5c2f237 Binary files /dev/null and b/images/user-avatar.png differ diff --git a/images/wide-advertisment.jpg b/images/wide-advertisment.jpg new file mode 100644 index 0000000..0519332 Binary files /dev/null and b/images/wide-advertisment.jpg differ diff --git a/index.css b/index.css index e69de29..ee9ebf2 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,570 @@ +body +{ + margin: 0; + font: 81.25% Arial, Helvetica, sans-serif; +} + +a +{ + text-decoration: none; + color: rgb(0, 0, 0); +} + +.text_link_hover:hover +{ + color: rgb(255, 0, 0); +} + +.grid__row_1 +{ + grid-row: 1; +} + +.grid__row_2 +{ + grid-row: 2; +} + +.grid__row_3 +{ + grid-row: 3; +} + +.grid__row_4 +{ + grid-row: 4; +} + +.grid__row_5 +{ + grid-row: 5; +} + +.grid__row_6 +{ + grid-row: 6; +} + +.grid__row_1-2 +{ + grid-row: 1 / 3; +} + +.grid__row_1-3 +{ + grid-row: 1 / 4; +} + +.grid__row_2-3 +{ + grid-row: 2 / 4; +} + +.grid__column_1 +{ + grid-column: 1; +} + +.grid__column_2 +{ + grid-column: 2; +} + +.grid__column_1-2 +{ + grid-column: 1 / 3; +} + +.grid__column_1-3 +{ + grid-column: 1 / 4; +} + +.notifications_icon, +.favorites_icon, +.current-city, +.settings +{ + cursor: pointer; +} + +.grid +{ + display: grid; + grid-area: 1 / 1 / 3 / 3; + grid-template-columns: 1fr auto; + min-width: 100px; + min-height: 100px; +} + +.header +{ + display: grid; + grid-template-columns: auto 1fr repeat(3, auto); + padding: 10px; + padding-left: 25px; + padding-right: 25px; + font-size: 15px; + line-height: 42px; +} + +.current-city +{ + position: relative; + display: grid; + grid-column: 1; + max-height: 40px; +} + +.get-plus, +.advertisment-link, +.media-type, +.news-title, +.joke-category +{ + color: rgb(0, 0, 255); +} + +.current-city__link, +.favorites_icon, +.notifications_icon, +.get-mail, +.now-in__city, +.now-in__time, +.news-title, +.request-example, +.channel, +.joke-category, +.next-joke_button +{ + opacity: .5; +} + +.short-news, +.media-type +{ + opacity: .75; +} + +.favorites_icon:hover, +.notifications_icon:hover, +.settings:hover, +.get-mail:hover +{ + opacity: 1; +} + +.current-city__navigation-arrow +{ + width: 14px; + height: 14px; +} + +.current-city:hover > .current-city__link +{ + color: rgb(255, 0, 0); +} + +.current-city:hover > .current-city__link > .current-city__navigation-arrow +{ + fill: rgb(255, 0, 0); +} + +.favorites_icon +{ + width: 36px; + height: 36px; +} + +.notifications_icon +{ + margin: 8px; + width: 22px; + height: 22px; +} + +.favorites_icon +{ + background-image: url(https://yastatic.net/www/_/v/X/dZjvoEUcPufjAEuUTURYB_waU.svg); + grid-column: 3; +} + +.notifications_icon +{ + background-image: url('images/notifications-bell.svg'); + grid-column: 4; +} + +.settings +{ + grid-column: 5; + max-height: 40px; +} + +.settings-button:hover +{ + color: rgb(255, 0, 0); +} + +.header__space +{ + grid-column: 2; +} + +.notifications-bar +{ + margin-left: 5px; + margin-right: 15px; + margin-top: 15px; +} + +.user-info +{ + padding: 5px; + display: grid; + grid-area: 1 / 1 / 4 / 3; + grid-template-rows: auto 25px 25px 35px; + grid-template-columns: auto 1fr; + font-size: 15px; + box-shadow: -1px 1px 5px rgb(128, 128, 128); +} + +.user-avatar +{ + width: 32px; + height: 32px; + border-radius: 100px; +} + +.user-login::first-letter, +.user-login:hover +{ + color: rgb(255, 0, 0); +} + +.get-plus +{ + grid-column: 1; +} + +.get-mail +{ + grid-column: 1 / 3; + background: rgb(223, 220, 220); + border-radius: 5px; + text-align: center; + line-height: 25px; + margin: 5px; +} + +.news +{ + margin: auto; +} + +.main-news +{ + display: grid; + grid-template-columns: 800px 200px; + margin: auto; +} + +.now-in__mass-media +{ + color: rgb(0, 0, 255); + + font-size: 25px; + margin: 5px; +} + +.now-in__city +{ + color: rgb(0, 0, 255); + font-size: 23px; + margin: 5px; +} + +.now-in__time +{ + font-size: 15px; + margin: 5px; + padding: 0; + padding-left: 50px; +} + +.short-news +{ + font-size: 18px; +} + +.headers +{ + margin: 0; + padding-left: 0; +} + +.quotation-name +{ + font-size: 18px; + margin: 5px; + margin-right: 0; +} + +.current-rates, +.negative-change, +.positive-change +{ + font-size: 16px; + margin: 2px; +} + +.negative-change +{ + color: rgb(255, 0, 0); +} + +.positive-change +{ + color: rgb(0, 255, 0); +} + +.advertisment +{ + margin-left: 15px; + margin-top: 15px; +} + +.advertisment-img +{ + width: 150px; + height: 150px; + border-radius: 100px; + display: block; + box-shadow: 1px 1px 15px rgb(128, 128, 128); +} + +.advertisment-link, +.advertisment-description +{ + font-size: 18px; +} + +.media-types +{ + margin-top: 20px; +} + +.media-type +{ + font-size: 18px; + margin-right: 10px; +} + +.search +{ + position: relative; +} + +.search-bar +{ + width: 80%; + height: 30px; + border: 2px solid rgb(255, 219, 77); + font-size: 18px; + padding: 2px; +} + +.search-bar_button +{ + position: absolute; + display: inline-block; + height: 38px; + width: 70px; + line-height: 38px; + text-align: center; + font-size: 18px; + background-color: rgb(255, 219, 77); +} + +.search-bar_button::after +{ + content: ''; + position: absolute; + left: 70px; + border: 19px solid transparent; + border-left: 10px solid rgb(255, 219, 77); +} + +.search-bar:focus +{ + outline: none; +} + +.search-logo +{ + position: absolute; + width: 140px; + height: 100px; + left: -140px; + top: -35px; + display: block; + background-image: url(https://yastatic.net/www/_/x/Q/xk8YidkhGjIGOrFm_dL5781YA.svg); +} + +.search-example +{ + font-size: 16px; + margin-top: 10px; +} + +.thematic-news +{ + padding-top: 50px; + display: grid; + margin: auto; +} + +.wide-advertisment-img +{ + height: 150px; + width: 80%; + border: 2px solid rgb(0, 0, 0); + margin-bottom: 25px; +} + +.news-title +{ + font-size: 18px; +} + +.titles-list +{ + list-style-type: none; + margin-left: 0; + padding-left: 0; + font-size: 16px; +} + +.visit-title_bold +{ + font-weight: bold; +} + +.visit-title +{ + margin: 10px; + margin-left: 0; +} + +.now-on-tv +{ + display: inline-block; + margin-left: 10px; + font-size: 16px; + text-align: center; + width: 50px; + height: 30px; + line-height: 30px; + background: rgb(106, 163, 255); + border-radius: 5px; + color: rgb(255, 255, 255); +} + +.now-on-tv:hover +{ + transform: scale(1.15); +} + +.best-jokes +{ + max-width: 300px; +} + +.joke-category +{ + font-size: 16px; +} + +.jokes +{ + font-size: 16px; + overflow: hidden; +} + +.category +{ + font-size: 16px; +} + +.settings__most-visited, +.settings__tv-program, +.settings__best-jokes +{ + display: none; +} + +.settings-menu +{ + list-style-type: none; + margin: 0; + padding: 5px; + box-shadow: 1px 1px 5px rgb(128, 128, 128); + display: none; +} + +.input__settings-button +{ + display: none; +} + +.input__settings-button:checked ~ .settings-menu +{ + display: block; +} + +.settings-menu__title:hover +{ + background: rgb(255, 219, 77); +} + +.settings__most-visited:checked ~ .grid > .news > .thematic-news > .most-visited +{ + display: none; +} + +.settings__tv-program:checked ~ .grid > .news > .thematic-news > .tv-program +{ + display: none; +} + +.settings__best-jokes:checked ~ .grid > .news > .thematic-news > .best-jokes +{ + display: none; +} + +.next-joke_button +{ + width: 50%; + font-size: 16px; + line-height: 40px; + color: rgb(0, 0, 255); +} + +.next-joke_radio +{ + display: none; +} + +.joke1, +.joke2, +.joke3 +{ + display: none; +} + +.joke1_radio:checked ~ .joke2, +.joke2_radio:checked ~ .joke3, +.joke3_radio:checked ~ .joke1 +{ + display: inline; +} diff --git a/index.html b/index.html index 1e52ffa..716a292 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,216 @@ - - - Задача «Морда» - - - + + + Задача «Морда» + + + + + + + +
+
+
+ + + + + Екатеринбург + +
+
+ + +
+ + +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+ +
+
+
+ Сейчас в СМИ + в Екатеринбурге + 21 ноября, среда 20:18 +
+
+ +
+
+ USD MOEX + 65,88 + -0,29 + + EUR MOEX + 75,04 + -0,21 + + Нефть + 62,85 + +0,83 +
+
+ + Racoon + + Загрузите енота
+ Еноты спасают жизни +
+
+ Видео + Картинки + Новости + Карты + Маркет + Переводчик + Музыка + Эфир + ещё +
+
+ + + Найти +
+
+ Найдется все. Например: + + Как объяснить собаке, что она не кошка + +
+
+ +
+
+ + Crutches + +
+
+ Посещаемое
+ +
+
+ Телепрограмма + Эфир + +
+
+ Лучшие анекдоты
+ + + + Раздел: + Нуждики +

+
+ + Из хроники происшествий: сегодня под Дублином + двухместный самолёт Cessna упал на католическое кладбище. + Спасатели уже обнаружили 750 тел, поиски продолжаются. +
+ +
+
+ + Фаберже. Автопортрет. Фрагмент.
+ - Я вчера в лесу три ведра грибов собрал для тёщи.
+ - А вдруг они ядовитые?
+ - Что значит 'вдруг'? +
+ +
+
+ + Объявление. Продаётся собака. Добрая, ласковая. Ест всё. Очень любит детей. +
+ +
+
+
+
+ +
+ +
+
+