Skip to content

The work is complete #702

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
FedorLey wants to merge 7 commits into
base: master
Choose a base branch
from
Open

The work is complete #702

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
81d851d
The work is complete
FedorLey Feb 12, 2026
545bedd
Added Links in Footer, form reset and hovered image increasing in gal…
FedorLey Feb 12, 2026
d6cd6ea
Edited Google Maps link to the correct one
FedorLey Feb 12, 2026
685ebe6
fix styles
FedorLey Feb 13, 2026
95017a2
fix: adjust hero layout to full-width, fix burger menu overflow, and …
FedorLey Feb 13, 2026
85ca7dc
some changes in hero.scss
FedorLey Feb 13, 2026
13fd476
fix: resolve stylelint conflict with CSS cascade order
FedorLey Feb 13, 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
294 changes: 283 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,291 @@
<!doctype html>
<html lang="en">
<html lang="uk" class="page">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Художній Музей</title>
<link
rel="icon"
type="image/svg+xml"
href="src/images/favicon.png"
>

<link
rel="stylesheet"
href="src/styles/main.scss"
/>
href="src/styles/index.scss"
>
<script
type="module"
src="src/scripts/main.js"
defer
></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Hello Mate Academy</h1>
<script src="src/scripts/main.js"></script>
<body class="page__body">
<header class="navbar">
<div class="container">
<a href="#menu" class="navbar__button icon icon--hamburger"></a>
</div>
</header>

<aside class="menu page__menu" id="menu">
<div class="container menu__container">
<a href="#!" class="icon icon--close"></a>

<nav class="nav menu__nav">
<ul class="nav__list">
<li class="nav__item"><a href="#gallery" class="nav__link">Галерея</a></li>
<li class="nav__item"><a href="#events" class="nav__link">Виставки та події</a></li>
</ul>
<ul class="nav__list">
<li class="nav__item"><a href="#subscription" class="nav__link">Про Нас</a></li>
<li class="nav__item"><a href="#contacts" class="nav__link">Контакти</a></li>
</ul>
</nav>

<hr class="menu__divider">

<div class="info menu__info">
<h3 class="info__title">Графік роботи</h3>
<div class="info__content menu__schedule">
<ul class="info__list">
<li class="info__item"><span class="info__highlight">12:00 — 20:00</span> середа</li>
<li class="info__item"><span class="info__highlight">12:00 — 20:00</span> четвер</li>
<li class="info__item"><span class="info__highlight">12:00 — 20:00</span> п’ятниця</li>
<li class="info__item"><span class="info__highlight">11:00 — 19:00</span> субота</li>
<li class="info__item"><span class="info__highlight">11:00 — 19:00</span> неділя</li>
</ul>
<div class="info__list">
<p class="info__item">
<span class="info__highlight">Вихідні:</span> понеділок, вівторок<br>
Каса припиняє роботу за 1 годину до закриття музею
</p>
</div>
</div>
</div>
</div>
</aside>

<main class="main">
<section class="hero">
<div class="hero__left">
<h1 class="hero__title">Художній<br>музей</h1>
<a href="#events" class="button hero__button">
<span class="button__label">КВИТКИ</span>
<span class="button__box">
<div class="icon icon--arrow-right button__icon"></div>
</span>
</a>

<div class="hero__label">
<hr class="hero__divider">
<span class="hero__category">Події</span>
</div>
</div>
<div class="hero__right">
<a href="#" class="logo hero__logo">
NA<br>MU
</a>
</div>
</section>

<section class="events" id="events">
<div class="container">
<h2 class="heading events__heading">Актуальні події</h2>

<div class="events__list">
<article class="card">
<img
src="src/images/events1.jpg"
alt="Йду і повертаюсь"
class="card__image"
>
<div class="card__content">
<div class="card__label">
<span class="card__category">Виставка</span>
<span class="card__date">26.08-29.11.2019</span>
</div>
<h3 class="card__title">Йду і повертаюсь</h3>
<p class="card__description">Національний Художній Музей України презентує унікальну частину колекції Градобанку - українське мистецтво другої половини 1980-1995 років.</p>
</div>
</article>

<article class="card">
<img
src="src/images/events2.jpg"
alt="І спогади і мрії"
class="card__image"
>
<div class="card__content">
<div class="card__label">
<span class="card__category">Виставка</span>
<span class="card__date">26.08-29.11.2019</span>
</div>
<h3 class="card__title">І спогади і мрії</h3>
<p class="card__description">Національний художній музей України до 100 річчя від дня народження видатної української художниці Тетяни Яблонської відкриває ретроспективну ювілейну виставку «І спогади і мрії».</p>
</div>
</article>
</div>
</div>

<div class="announcement events__announcement">
<img
src="src/images/events3.jpg"
alt="Від класицизму до романтизму"
class="announcement__image"
>
<div class="container announcement__container">
<div class="announcement__content">
<div class="announcement__label">
<span class="announcement__category">ЛЕКЦІЯ</span>
<span class="announcement__date">26/08/2019 - 11:00</span>
</div>
<h3 class="announcement__title">Від класицизму до романтизму</h3>
</div>
</div>
</div>
</section>

<section class="gallery" id="gallery">
<div class="container gallery__container">
<h2 class="heading gallery__heading">Галерея</h2>

<div class="gallery__slider">
<div class="gallery__item">
<img
src="src/images/gallery1.jpg"
alt="Дівчина в традиційному одязі"
class="gallery__image"
>
</div>
<div class="gallery__item">
<img
src="src/images/gallery2.jpg"
alt="Зимове село"
class="gallery__image"
>
</div>
<div class="gallery__item">
<img
src="src/images/gallery3.jpg"
alt="Люди в парку"
class="gallery__image"
>
</div>
<div class="gallery__item">
<img
src="src/images/gallery4.jpg"
alt="Морський захід сонця"
class="gallery__image"
>
</div>
</div>

<div class="gallery__pagination"></div>
</div>
</section>

<section class="subscription" id="subscription">
<div class="container subscription__container">
<h2 class="heading subscription__heading">Підписка</h2>
<p class="subscription__description">Бути в курсі всіх актуальних подій та останніх новин.</p>
<form class="subscription__form" action="#">
<input
type="email"
class="subscription__input"
placeholder="E-mail"
required
aria-label="Введіть ваш e-mail"
>
<button
type="submit"
class="subscription__button"
aria-label="Підписатися"
>
<div class="icon icon--arrow-right subscription__icon"></div>
</button>
</form>
</div>
</section>
</main>

<footer class="footer" id="contacts">
<div class="container footer__container">
<div class="footer__heading">
<a href="#" class="logo footer__logo">
NA<br>MU
</a>
<div class="footer__icons">
<a
href="https://www.facebook.com/namu.museum"
target="_blank"
class="icon icon--facebook"
></a>
<a
href="https://www.instagram.com/namu.museum"
target="_blank"
class="icon icon--instagram"
></a>
</div>
</div>

<div class="footer__groups">
<div class="footer__group">
<div class="info menu__info">
<h3 class="info__title">Графік роботи</h3>
<div class="info__content">
<ul class="info__list">
<li class="info__item"><span class="info__highlight">12:00 — 20:00</span> середа</li>
<li class="info__item"><span class="info__highlight">12:00 — 20:00</span> четвер</li>
<li class="info__item"><span class="info__highlight">12:00 — 20:00</span> п’ятниця</li>
<li class="info__item"><span class="info__highlight">11:00 — 19:00</span> субота</li>
<li class="info__item"><span class="info__highlight">11:00 — 19:00</span> неділя</li>
</ul>
<div class="info__list">
<p class="info__item">
<span class="info__highlight">Вихідні:</span> понеділок, вівторок<br>
Каса припиняє роботу за 1 годину до закриття музею
</p>
</div>
</div>
</div>
</div>

<div class="footer__group">
<div class="info">
<h3 class="info__title">Контакти:</h3>
<div class="info__content">
<p class="info__item">
вул. М. Грушевського, 6; Київ, 01001<br>
тел. +38 (044) 278-13-57<br>
факс +38 (044) 278-74-54<br>
e-mail: [email protected]
</p>
</div>
</div>
</div>
</div>

<hr class="footer__divider">

<nav class="nav footer__nav">
<ul class="nav__list">
<li class="nav__item"><a href="#gallery" class="nav__link">Галерея</a></li>
<li class="nav__item"><a href="#events" class="nav__link">Виставки та події</a></li>
</ul>
<ul class="nav__list">
<li class="nav__item"><a href="#subscription" class="nav__link">Про Нас</a></li>
<li class="nav__item"><a href="#contacts" class="nav__link">Контакти</a></li>
</ul>
</nav>

<div class="footer__copyright">
<p class="footer__caption">Designed by Zhyriada Marina</p>
<p class="footer__caption">Copyright © 2019. All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>
Empty file removed src/fonts/.gitkeep
View file
Open in desktop
Empty file.
Binary file removed src/fonts/Roboto-Regular-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file added src/images/events1.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/events2.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/events3.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/favicon.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/gallery1.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/gallery2.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/gallery3.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/gallery4.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/hero-bg.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.
10 changes: 10 additions & 0 deletions src/images/icons/arrow-right.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.
10 changes: 10 additions & 0 deletions src/images/icons/close.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.
10 changes: 10 additions & 0 deletions src/images/icons/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.
10 changes: 10 additions & 0 deletions src/images/icons/hamburger.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.
12 changes: 12 additions & 0 deletions src/images/icons/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/logo.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/subscription-bg.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.
Empty file removed src/scripts/lib/.gitkeep
View file
Open in desktop
Empty file.
6 changes: 5 additions & 1 deletion src/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
'use strict';
import { initGallery } from './modules/gallery.js';

document.addEventListener('DOMContentLoaded', () => {
initGallery();
});
Loading
Loading