Skip to content

solution #561

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KateBerd wants to merge 11 commits into
base: master
Choose a base branch
from
Open

solution #561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2ace931
solution
KateBerd May 19, 2026
d54596b
solution2
KateBerd May 19, 2026
94625ae
solution3
KateBerd May 20, 2026
4662d4f
solution4
KateBerd May 20, 2026
400c3f1
solution4
KateBerd May 20, 2026
c01548c
solution5
KateBerd May 20, 2026
bfcf7ec
solution6
KateBerd May 20, 2026
35e2bfb
solution7
KateBerd May 20, 2026
0ba8a12
solution8
KateBerd May 20, 2026
bb5c088
solution9
KateBerd May 20, 2026
5c3d17c
solution10
KateBerd May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
341 changes: 336 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,350 @@
<!-- #region head-->
<!doctype html>
<html lang="en">
<html lang="en" class="page">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Title</title>
<title>NAMU</title>
<link rel="icon" href="src/images/favicon.svg" />

<link rel="preconnect" href="https://fonts.googleapis.com">
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<link
rel="stylesheet"
href="src/styles/main.scss"
/>
<script src="./src/scripts/main.js" defer></script>
</head>
<body>
<h1>Hello Mate Academy</h1>
<script src="src/scripts/main.js"></script>
<!-- #endregion head-->
<body class="page__body">
<!-- #region header-->
<header class="header">
<div class="container">
<div class="top-bar">
<a
href="#"
class="top-bar__link"
>
<img
src="src/images/logo.svg"
alt="logo NAMU"
class="top-bar__logo"
/>
</a>
<a
href="#menu"
class="icon icon--burger"
></a>
</div>
<div class="header__content">
<p class="header__text header__text--data">10 серпня - 10 листопада</p>
<h1 class="header__title">Мистецтво ХІХ - ХХ ст.</h1>
<p class="header__text header__text--description">Внесок українських митців у світову культуру 19-20 ст.</p>
<button class="header__button">Купити квиток</button>
<div class="header__date">
<h6 class="header__duration">10.08 - 10.10</h6>
<hr class="header__divider" />
</div>
</div>
</div>
</header>
<!-- #endregion header-->

<!-- #region menu-->
<aside id="menu" class="page__menu menu">
<div class="container">
<div class="top-bar">
<a
href="#"
class="top-bar__link"
>
<img
src="src/images/logo.svg"
alt="logo NAMU"
class="top-bar__logo"
/>
</a>
<a
href="#"
class="icon icon--close"
></a>
</div>
<div class="menu__content">
<div class="menu__info">
<div class="menu__info-shedule">
<p class="menu__info-label">Розклад сьогодні:</p>
<p class="menu__info-value">12:00 - 19:00</p>
</div>
<div class="menu__info-address">
<p class="menu__info-label">Адреса:</p>
<p class="menu__info-value">Київ, вул. М. Грушевського, 6</p>
</div>
</div>
<nav class="nav menu__nav">
<ul class="nav__list">
<li class="nav__item">
<a href="#exhibitions" class="nav__link">
Актуальні виставки
</a>
</li>
<li class="nav__item">
<a href="#events" class="nav__link">
Найближчі події
</a>
</li>
<li class="nav__item">
<a href="#news" class="nav__link">
Новини
</a>
</li>
</ul>
</nav>
<hr class="menu__divider" />
<button class="menu__button">Купити квиток</button>
</div>
</div>
</aside>
<!-- #endregion menu-->

<main class="main">
<div class="main__content">

<!-- #region exhibitions-->
<section id="exhibitions" class="exhibitions main__exhibitions">
<div class="container">
<div class="exhibitions__content">
<h3 class="exhibitions__title">Актуальні виставки</h3>
<div class="exhibitions__list">
<article class="exhibitions__item">
<img
src="src/images/exhibition1.png"
alt="Виставка 1"
class="exhibitions__item-image"
>
<p class="exhibitions__item-date">11.07 - 22.09</p>
<h4 class="exhibitions__item-title">Кураторська виставка “Ангели”</h4>
<p class="exhibitions__item-description">Виставковий проект «Ангели» – знакова подія для української культури і водночас наймасштабніший...</p>
<button class="exhibitions__item-button">Купити квиток</button>
</article>
<article class="exhibitions__item">
<img
src="src/images/exhibition2.png"
alt="Виставка 2"
class="exhibitions__item-image"
>
<p class="exhibitions__item-date">Діє постійно</p>
<h4 class="exhibitions__item-title">Мистецтво ХХ ст. — XXI ст.</h4>
<p class="exhibitions__item-description">Знакові роботи Алли Горської, Миколи Самокиша, Федора Кричевського та інших митців.</p>
<button class="exhibitions__item-button">Купити квиток</button>
</article>
</div>
<button class="exhibitions__button">
<span class="exhibitions__button-text">Архів виставок</span>
<img
src="src/images/icons/icon-arrow.svg"
alt="стрілка вправо"
class="exhibitions__button-icon"
>
</button>
</div>
</div>
</section>
<!-- #endregion exhibitions-->

<!-- #region events-->
<section id="events" class="events main__events">
<div class="container">
<div class="events__content">
<h3 class="events__title">Найближчі події</h3>
<div class="events__list">
<article class="events__item">
<img
src="src/images/event1.jpg"
alt="Подія 1"
class="events__item-image"
>
<div class="events__item-info">
<p class="events__item-date">14.08 о 13:00</p>
<h4 class="events__item-title">Кураторські екскурсії від Павла Гудімова </h4>
<p class="events__item-description">Таємниці підготовки, історії експонатів, магія дійства до і в момент вашої присутності – розгортатиметься...</p>
<button class="events__item-button">Зареєструватись</button>
</div>
</article>
<article class="events__item">
<img
src="src/images/event2.jpg"
alt="Подія 2"
class="events__item-image"
>
<div class="events__item-info">
<p class="events__item-date">16.08 о 13:00</p>
<h4 class="events__item-title">Майстер-клас “Подорож до Австралії”</h4>
<p class="events__item-description">Цієї неділі о 14:00 на арт-мандрівників чекає останній пункт кругосвітньої подорожі - Австралія.</p>
<button class="events__item-button">Зареєструватись</button>
</div>
</article>
</div>
<button class="events__button">
<span class="events__button-text">Календар подій</span>
<img
src="src/images/icons/icon-arrow.svg"
alt="стрілка вправо"
class="events__button-icon"
>
</button>
</div>
</div>
</section>
<!-- #endregion events-->

<!-- #region plan a visit-->
<section id="visit" class="visit main__visit">
<div class="container">
<div class="visit__content">
<h2 class="visit__title">Сплануйте <br> візит до музею</h2>
<p class="visit__description">Оберіть зручний день, зареєструйтесь на події, що цікавлять, купіть квиток заздалегідь, щоб ніщо не завадило вам насолоджуватись мистецтвом.</p>
<button class="visit__button">Почати</button>
</div>
</div>
</section>
<!-- #endregion plan a visit-->

<!-- #region news-->
<section id="news" class="news main__news">
<div class="container">
<div class="news__content">
<h3 class="news__title">Новини</h3>
<div class="news__list">
<article class="news__item">
<img
src="src/images/news1.jpg"
alt="Новина 1"
class="news__item-image"
>
<div class="news__item-info">
<p class="news__item-date">9 серпня 2019</p>
<h4 class="news__item-title">Оголошення переможця</h4>
<p class="news__item-description">Друзі, сьогодні п'ятниця! А це означає, що час оголосити переможця розіграшу...</p>
</div>
</article>
<article class="news__item">
<img
src="src/images/news2.jpg"
alt="Новина 2"
class="news__item-image"
>
<div class="news__item-info">
<p class="news__item-date">9 серпня 2019</p>
<h4 class="news__item-title">Міжнародний день котів</h4>
<p class="news__item-description">Музей з левами не може просто так взяти і пропустити Міжнародний день котів!</p>
</div>
</article>
</div>
<button class="news__button">
<span class="news__button-text">Усі новини</span>
<img
src="src/images/icons/icon-arrow.svg"
alt="стрілка вправо"
class="news__button-icon"
>
</button>
</div>
</div>
</section>
<!-- #endregion news-->

<!-- #region subscribe-->
<section class="subscribe main__subscribe">
<div class="container">
<div class="subscribe__content">
<h3 class="subscribe__title">Підпишіться на дайджест</h3>
<p class="subscribe__description">Першими дізнавайтесь про новини музею та розіграші, отримуйте запрошення на події та читайте статті від кураторів</p>
<form class="subscribe__form" onsubmit="return false;">
<input
type="email"
class="subscribe__input"
placeholder="e-mail"
required
>
<button type="button" class="subscribe__button">Підписатись</button>
</form>
</div>
</div>
</section>
<!-- #endregion subscribe-->
</div>
</main>
<!-- #region footer-->
<footer class="footer">
<div class="container">
<div class="footer__content">
<div class="footer__section">
<h5 class="footer__title">Контакти:</h5>
<p class="footer__address">
<a href="https://maps.google.com/?q=Київ,+вул.+М.+Грушевського,+6" target="_blank">
Київ,<br>
вул. М. Грушевського, 6
</a><br>
тел. <a href="tel:+380442781357">278-13-57</a>, <a href="tel:+380442787454">278-74-54</a><br>
<a href="mailto:info@namu.kiev.ua">info@namu.kiev.ua</a>
</p>
<div class="footer__socials">
<a href="#" class="footer__socials-link footer__socials--facebook"></a>
<a href="#" class="footer__socials-link footer__socials--twitter"></a>
<a href="#" class="footer__socials-link footer__socials--telegram"></a>
<a href="#" class="footer__socials-link footer__socials--instagram"></a>
</div>
</div>

<div class="footer__section">
<h5 class="footer__title">Розклад</h5>
<p class="footer__list">
ПН: вихідний<br>
ВТ: вихідний<br>
СР: 10:00 - 17:00<br>
ЧТ: 10:00 - 17:00<br>
ПТ: 12:00 - 19:00<br>
СБ: 11:00 - 18:00<br>
НД: 10:00 - 17:00
</p>
</div>

<div class="footer__section">
<h5 class="footer__title">
<a href="#" class="footer__title-link">Головна</a>
</h5>
<nav class="footer__nav-list">
<a href="#exhibitions" class="footer__nav-link">Виставки</a>
<a href="#events" class="footer__nav-link">Події</a>
<a href="#news" class="footer__nav-link">Новини</a>
</nav>
</div>

<div class="footer__copyright">
<div class="footer__copyright-info">
<p class="footer__copyright-text">© 2010 — 2020</p>
<a
class="footer__copyright-link"
href="#"
onclick="return false;"
>
Privacy — Terms
</a>
</div>
<button class="footer__copyright-buttonUp" onclick="window.scrollTo({top: 0, behavior: 'smooth'})"></button>
</div>
</div>
</div>
</footer>
<!-- #endregion footer-->
</body>
</html>
Binary file added src/images/event1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/event2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/exhibition1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/exhibition2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/images/favicon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/images/icons/dropdown.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/images/icons/icon-arrow-up.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/images/icons/icon-arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/icons/icon-close.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/images/icons/icon-facebook.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/images/icons/icon-instagram.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/icons/icon-menu.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/images/icons/icon-telegram.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading