- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<a class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="Логотип портала FlashNews!">
</a>
<button class="menu menu-open" type="button">Меню</button>
<nav class="main-menu">
<ul>
<li>
<a href="#">Колонка редактора</a>
</li>
<li>
<a href="#">Контакты</a>
</li>
<li>
<a href="#">Подписка</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="index-main">
<div class="container">
<h1 class="visually-hidden">Новостной портал FlashNews!</h1>
<div class="news-view">
<button class="row-view view-checked" type="button">Список</button>
<button class="tile-view" type="button">Плитка</button>
</div>
<section class="news-list">
<h2 class="visually-hidden">Все новости</h2>
<article class="new-block">
<img src="img/new-graph.jpg" alt="Новая библиотека">
<div class="new-block-text">
<h3>Новая библиотека для создания графиков</h3>
<p>Теперь вы можете создать дашборд за считанные секунды.</p>
<time datetime="2019-10-16">16 октября 2019</time>
</div>
</article>
<article class="new-block">
<img src="img/new-robot.jpg" alt="Что там у роботов?">
<div class="new-block-text">
<h3>Что там у роботов?</h3>
<p>В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.</p>
<time datetime="2019-10-15">15 октября 2019</time>
</div>
</article>
<article class="new-block">
<img src="img/new-loop.jpg" alt="Бесконечные циклы">
<div class="new-block-text">
<h3>Бесконечные циклы: пора завязывать с этим</h3>
<p>Британские учёные выяснили, что работа ПО напрямую зависит от наличия в нём бесконечных циклов.</p>
<time datetime="2019-10-14">14 октября 2019</time>
</div>
</article>
<article class="new-block">
<img src="img/new-drone.jpg" alt="Кадры с дрона">
<div class="new-block-text">
<h3>ШОК! Секретные кадры с дрона-разведчика</h3>
<p>Никто не ожидал, что за стенами происходит ТАКОЕ…</p>
<time datetime="2019-10-13">13 октября 2019</time>
</div>
</article>
<article class="new-block">
<img src="img/new-research.jpg" alt="Новость 5">
<div class="new-block-text">
<h3>Из мира психологии</h3>
<p>Исследования показывают, что если делать больше, то можно сделать больше.</p>
<time datetime="2019-10-12">12 октября 2019</time>
</div>
</article>
<article class="new-block">
<img src="img/new-cat.jpg" alt="Новость 6">
<div class="new-block-text">
<h3>Внезапно</h3>
<p>Оказывается, чтобы начать учить JavaScript, необязательно быть котом.</p>
<time datetime="2019-10-11">11 октября 2019</time>
</div>
</article>
</section>
</div>
</main>
<aside class="cookies-agreement">
<p>Пока вы находитесь на нашем сайте и читаете новости, мы используем ваши кукис. Очень надеемся, что вы не против.</p>
<button class="button" type="button">Окей, продолжайте</button>
</aside>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<a class="footer-logo">
<img src="img/white-logo.svg" alt="Логотип портала FlashNews!">
</a>
</div>
</footer>
<!-- <script src="script.js"></script> -->
</body>
</html>
CSS
/* Светлая тема */
.light-theme {
color: #333333;
background-color: #eae9f2;
}
.light-theme .page-header {
background-color: #ffffff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.light-theme .header-link {
color: #6653d9;
}
.light-theme .header-link::before {
background: url("img/arrow-back-light.svg") no-repeat 0 0;
}
.light-theme .theme-button {
color: #6653d9;
border: 1px solid #6653d9;
}
.light-theme .theme-button::before {
background-image: url("img/moon-normal.svg");
}
.light-theme .theme-button:focus,
.light-theme .theme-button:hover {
color: #ffffff;
background-color: #6653d9;
}
.light-theme .theme-button:focus::before,
.light-theme .theme-button:hover::before {
background-image: url("img/moon-hover.svg");
}
.light-theme .menu-open {
background-color: #ffffff;
background-image: url("img/menu-open-light.svg");
}
.light-theme .menu-open:focus,
.light-theme .menu-open:hover {
background-color: #6653d9;
background-image: url("img/menu-open-dark.svg");
}
.light-theme .menu-close {
background-color: #6653d9;
}
.light-theme .menu-close:focus,
.light-theme .menu-close:hover {
background-color: #473c8d;
}
.light-theme .main-menu {
background-color: #6653d9;
color: #ffffff;
}
.light-theme .main-menu a:focus,
.light-theme .main-menu a:hover {
background-color: #473c8d;
}
.light-theme .news-view button {
border: 1px solid #6653d9;
color: #6653d9;
}
.light-theme .news-view button:focus,
.light-theme .news-view button:hover,
.light-theme .news-view button:active,
.light-theme .news-view .view-checked {
background-color: #6653d9;
color: #ffffff;
}
.light-theme .news-view .row-view:focus::before,
.light-theme .news-view .row-view:hover::before,
.light-theme .news-view .row-view:active::before {
background-image: url("img/rows-light-checked.svg");
}
.light-theme .news-view .tile-view:focus::before,
.light-theme .news-view .tile-view:hover::before,
.light-theme .news-view .tile-view:active::before {
background-image: url("img/tiles-light-checked.svg");
}
.light-theme .row-view::before {
background-image: url("img/rows-light.svg");
}
.light-theme .tile-view::before {
background-image: url("img/tiles-light.svg");
}
.light-theme .row-view::before {
background-image: url("img/rows-light.svg");
}
.light-theme .row-view.view-checked::before {
background-image: url("img/rows-light-checked.svg");
}
.light-theme .tile-view.view-checked::before {
background-image: url("img/tiles-light-checked.svg");
}
.light-theme .new-block {
background-color: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.light-theme .new-block time {
color: #aaaaaa;
}
.light-theme .cookies-agreement {
background-color: #fdeacd;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2);
}
.light-theme .button {
background-color: #6653d9;
color: #ffffff;
}
.light-theme .button:focus,
.light-theme .button:hover {
background-color: #473c8d;
}
.light-theme .page-footer {
background-color: #6653d9;
color: #ffffff;
}
.light-theme .subscription {
background-color: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.light-theme .subscription-message {
background-color: #6653d9;
color: #eae9f2;
}
.light-theme .subscription-message::before {
background-image: url("img/icon-ok-light.svg");
}
.light-theme .subscription-label {
color: #6653d9;
}
.light-theme .subscription-email {
border-bottom: 1px solid #6653d9;
color: #333333;
}
/* Тёмная тема */
.dark-theme {
color: #f2f2f2;
background-color: #17161a;
}
.dark-theme .page-header {
background-color: #373540;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
}
.dark-theme .header-link {
color: #9484f2;
}
.dark-theme .header-link::before {
background: url("img/arrow-back-dark.svg") no-repeat 0 0;
}
.dark-theme .theme-button {
color: #9484f2;
border: 1px solid #9484f2;
}
.dark-theme .theme-button::before {
background-image: url("img/sun-normal.svg");
}
.dark-theme .theme-button:focus,
.dark-theme .theme-button:hover {
color: #17161a;
background-color: #9484f2;
}
.dark-theme .theme-button:focus::before,
.dark-theme .theme-button:hover::before {
background-image: url("img/sun-hover.svg");
}
.dark-theme .menu-open {
background-color: #373540;
background-image: url("img/menu-open-dark.svg");
}
.dark-theme .menu-open:focus,
.dark-theme .menu-open:hover {
background-color: #473c8d;
background-image: url("img/menu-open-dark.svg");
}
.dark-theme .menu-close {
background-color: #473c8d;
}
.dark-theme .menu-close:focus,
.dark-theme .menu-close:hover {
background-color: #6653d9;
}
.dark-theme .main-menu {
background-color: #473c8d;
color: #f2f2f2;
}
.dark-theme .main-menu a:focus,
.dark-theme .main-menu a:hover {
background-color: #6653d9;
}
.dark-theme .news-view button {
border: 1px solid #9484f2;
color: #9484f2;
}
.dark-theme .news-view button:focus,
.dark-theme .news-view button:hover,
.dark-theme .news-view button:active,
.dark-theme .news-view .view-checked {
background-color: #9484f2;
color: #17161a;
}
.dark-theme .news-view .row-view:focus::before,
.dark-theme .news-view .row-view:hover::before,
.dark-theme .news-view .row-view:active::before {
background-image: url("img/rows-dark-checked.svg");
}
.dark-theme .news-view .tile-view:focus::before,
.dark-theme .news-view .tile-view:hover::before,
.dark-theme .news-view .tile-view:active::before {
background-image: url("img/tiles-dark-checked.svg");
}
.dark-theme .row-view::before {
background-image: url("img/rows-dark.svg");
}
.dark-theme .tile-view::before {
background-image: url("img/tiles-dark.svg");
}
.dark-theme .row-view.view-checked::before {
background-image: url("img/rows-dark-checked.svg");
}
.dark-theme .tile-view.view-checked::before {
background-image: url("img/tiles-dark-checked.svg");
}
.dark-theme .new-block {
background-color: #2a2930;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.dark-theme .new-block time {
color: #888888;
}
.dark-theme .cookies-agreement {
background-color: #473c8d;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.6);
}
.dark-theme .button {
background-color: #9484f2;
color: #17161a;
}
.dark-theme .button:focus,
.dark-theme .button:hover {
background-color: #b6aaff;
}
.dark-theme .page-footer {
background-color: #0a0910;
color: #f2f2f2;
}
.dark-theme .subscription {
background-color: #2a2930;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.dark-theme .subscription-message {
background-color: #9484f2;
color: #17161a;
}
.dark-theme .subscription-message::before {
background-image: url("img/icon-ok-dark.svg");
}
.dark-theme .subscription-label {
color: #9484f2;
}
.dark-theme .subscription-email {
border-bottom: 1px solid #9484f2;
color: #f2f2f2;
}
JavaScript
// Меню
let menu = document.querySelector('.menu');
menu.onclick = function () {
menu.classList.toggle('menu-open');
menu.classList.toggle('menu-close');
};
// Раскладка
let rowViewButton = document.querySelector('.row-view');
let tileViewButton = document.querySelector('.tile-view');
let newsList = document.querySelector('.news-list');
rowViewButton.onclick = function () {
rowViewButton.classList.add('view-checked');
tileViewButton.classList.remove('view-checked');
newsList.classList.remove('list-tiles-view');
};
tileViewButton.onclick = function () {
rowViewButton.classList.remove('view-checked');
tileViewButton.classList.add('view-checked');
newsList.classList.add('list-tiles-view');
};
// Кукис! Ом-ном-ном...
let cookies = document.querySelector('.cookies-agreement');
let cookiesButton = document.querySelector('.button');
cookiesButton.onclick = function () {
cookies.classList.add('cookies-agreement-closed');
};
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
Консоль
ЗадачиВыполнено
0
- Раскомментируйте код
<script src="script.js"></script>на 107 строке, для этого удалите символы<!--и-->. - В мини-браузере откройте меню, нажав на иконку-«гамбургер» в правом верхнем углу.
- В мини-браузере нажмите на кнопку «Плитка».
- В мини-браузере закройте предупреждение о кукис, нажав на кнопку «Окей, продолжайте».