Skip to content

new branch #705

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

new branch #705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
99cb154
new branch
SashaGlazko Mar 15, 2026
a06e99a
changed footer and button
SashaGlazko Mar 16, 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
30 changes: 30 additions & 0 deletions .github/copilot-instructions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Museum Project Guidelines

## Code Style
- **BEM Methodology**: Use `__` for elements, `--` for modifiers. Enforced by `.bemlintrc.json`.
- **SCSS Organization**: Follow [src/styles/main.scss](src/styles/main.scss) import order: utils → fonts → typography → blocks.
- **Formatting**: 2-space indentation, 80-char width, trailing commas. Auto-format with `npm run format`.
- **Linting**: Run `npm run lint` before commits. Includes stylelint, prettier, and HTML linting.

## Architecture
- **Build Tool**: Vite (layoutVite project type).
- **Styling**: SCSS-first with responsive mixins. CSS handles interactions (e.g., menu toggle via `:target`).
- **JavaScript**: Minimal; add custom scripts to [src/scripts/lib/](src/scripts/lib/).
- **Structure**: Static HTML site with semantic markup.

## Build and Test
- **Start Dev Server**: `npm start`
- **Build Production**: `npm run build`
- **Test Suite**: `npm test` (includes linting + Cypress tests)
- **Deploy**: `npm run deploy` (GitHub Pages)

## Conventions
- **Responsive Design**: Use `@mixin on-tablet()` (≥640px) and `@mixin on-desktop()` (≥1280px). Design width: 1440px.
- **Transitions**: All hover effects use 0.3s duration via `@mixin hover()`.
- **Grid System**: `@mixin page-grid()` for 2/6/12 column layouts.
- **Padding**: `@mixin content-padding` for responsive spacing (20px/34px/55px).
- **Menu Navigation**: CSS-only toggle using `:target` pseudo-class.
- **Checklist Compliance**: Ensure smooth scroll, hover cursors, form validation, no horizontal scroll.

See [README.md](README.md) and [checklist.md](checklist.md) for detailed requirements.</content>
<parameter name="filePath">d:\projects\Museum\.github\copilot-instructions.md
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Test

on:
pull_request:
branches: [ master ]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [20.x]

steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm test
- name: Upload HTML report(backstop data)
if: ${{ always() }}
uses: actions/upload-artifact@v2
with:
name: report
path: backstop_data
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple
11. `git push origin develop` - to send you code for PR.
12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo.
13. Replace `<your_account>` with your Github username in the
[DEMO LINK](https://<your_account>.github.io/Museum/).
[DEMO LINK](https://SashaGlazko.github.io/Museum/).
14. Copy `DEMO LINK` to the PR description.

> To update you PR repeat steps 7-11.
294 changes: 289 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,303 @@
<!-- #region HEAD -->
<!doctype html>
<html lang="en">
<head>
<html lang="en" class="page">
<head class="page">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Title</title>
<title>Museum</title>
<link
rel="stylesheet"
href="src/styles/main.scss"
/>
<link rel="icon" href="/src/images/icons/title.svg">
</head>
<body>
<h1>Hello Mate Academy</h1>
<!-- #endregion -->
<body class="page__body">
<script src="src/scripts/main.js"></script>
<header class="header" id="top">

<div class="header__content">
<a class="header__logo">
<img src="/src/images/icons/title.svg" alt="title">
</a>
<a href="#menu" class=" header__icon icon icon--menu"></a>
<div class="header__cover">
<img
src="/src/images/header-bg.png"
class="header__photo"
alt="header-bg"
>
</div>
<div class="header__left">
<h1 class="header__title">ХУДОЖНІЙ МУЗЕЙ</h1>
<div class="header__left-cover">
<div class="header__actions">ПОДІЇ</div>
<div class="button button--header">
<a href="#" class="button__link">КВИТКИ</a>
</div>
</div>
</div>
</div>
</header>
<aside class="menu page__menu" id="menu">
<div class="menu__content">
<div class="menu__top">
<a href="#" class="icon icon--close"></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="#gallery" class="nav__link">Галерея</a>
<a href="#actions" class="nav__link">Виставки та</br> події</a>
</li>
<li class="nav__item">
<a href="#about-us" class="nav__link">Про нас</a>
<a href="#contacts" class="nav__link">Контакти</a>
</li>
</ul>
</nav>
</div>
<div class="menu__container">

<div class="menu__line"></div>
<div class="menu__schedule">
<div class="menu__info">
<div class="scedule">
<div class="scedule__text">Графік роботи</div>
<div class="scedule__plan">
12:00 — 20:00 <span class="menu__day">середа</span><br>
12:00 — 20:00 <span class="menu__day">четвер</span><br>
12:00 — 20:00 <span class="menu__day">п’ятниця</span><br>
11:00 — 19:00 <span class="menu__day">субота</span><br>
11:00 — 19:00 <span class="menu__day">неділя</span><br>
</div>
</div>
</div>
<div class="menu__weekend">
Вихідні:
<span class="menu__weekend-text">
понеділок, вівторок
Каса припиняє роботу за 1 годину
до закриття музею
</span>
</div>
</div>
</div>
</div>
</aside>

<main class="main page__main">
<section class="current-events" id="actions">
<div class="current-events__content">
<h2 class="section-title">Актуальні події</h2>
<article class="event">
<picture class="event__picture">
<source media="(min-width:1024px)" srcset="/src/images/img-rectangle-2.1.png">
<source media="(min-width:768px)" srcset="/src/images/img-rectangle-2.1.png">
<img
src="/src/images/img-rectangle-2.4.png"
alt="actual img"
class="event__photo"
>
</picture>
<div class="event__info">
<div class="event__time">
<div class="event__exibition">ВИСТАВКА</div>
<div class="event__date">26.08-29.11.2019</div>
</div>
<h3 class="event__title">Йду і повертаюсь</h3>
<p class="event__description">Національний Художній Музей України презентує унікальну частину колекції Градобанку - українське мистецтво другої половини 1980-1995 років.</p>

</div>
</article>
<article class="event">
<picture class="event__picture">
<source media="(min-width:1024px)" srcset="/src/images/img-rectangle-4.1.png">
<source media="(min-width:768px)" srcset="/src/images/img-rectangle-4.3.png">
<img
src="/src/images/img-rectangle-4.4.png"
alt="actual img"
class="event__photo"
>
</picture>
<div class="event__info">
<div class="event__time">
<div class="event__exibition">ВИСТАВКА</div>
<div class="event__date">26.08-29.11.2019</div>
</div>
<h3 class="event__title">І спогади і мрії</h3>
<p class="event__description">Національний художній музей України до 100 річчя від дня народження видатної української художниці Тетяни Яблонської відкриває ретроспективну ювілейну виставку «І спогади і мрії».</p>

</div>
</article>
</div>
</section>
<section class="lecture">
<div class="lecture__content">
<div class="lecture__photo"></div>
<div class="lecture__info">
<div class="lecture__time">
<div class="lecture__text">ЛЕКЦІЯ</div>
<div class="lecture__date">26/08/2019 - 11:00</div>
</div>
<h3 class="lecture__title">Від класицизму до романтизму</h3>
</div>
</div>
</section>
<section class="gallery" id="gallery">
<div class="gallery__content">
<div class="section-title gallery__title">Галерея</div>
<div class="gallery__track">
<div class="gallery__photo gallery__photo--narrow ">
<img
src="/src/images/img-women.png"
alt="women img"
class="gallery__img">
</div>
<div class="gallery__photo gallery__photo--wide ">
<img
src="/src/images/img-winter.png"
alt="winter img" class="gallery__img">
</div>
<div class="gallery__photo gallery__photo--wide ">
<img
src="/src/images/img-summer.png"
alt="summer img"
class="gallery__img">
</div>
<div class="gallery__photo gallery__photo--narrow ">
<img
src="/src/images/img-sea.png"
alt="sea img"
class="gallery__img">
</div>
</div>
<div class="gallery__dots">
<button class="gallery__dot active"></button>
<button class="gallery__dot"></button>
<button class="gallery__dot"></button>
<button class="gallery__dot"></button>
</div>
</div>
</section>

<section class="subscribe" id="about-us">
<div class="subscribe__content">
<div class="subscribe__info">
<h2 class="subscribe__title">Підписка</h2>
<p class="subscribe__description">Бути в курсі всіх актуальних подій та останніх новин.</p>
</div>
<form class="button subscribe__button" onsubmit="this.reset(); return false;">

<input
required
autocomplete="email"
type="email"
placeholder="E-mail"
class="subscribe__link"
>
<button class="subscribe__send">
<div class="subscribe__letter">
>
</div>
</button>

</form>
</div>
</section>
</main>
<footer class="footer page__footer">
<div class="footer__content">
<div class="footer__top">
<a href="#" class="footer__title">
<img src="/src/images/icons/title.svg" alt="title">
</a>

<div class="footer__icons">
<a
target="_blank"
href="https://www.facebook.com/"
class="icon icon--facebook"></a>
<a
target="_blank"
href="https://www.instagram.com/"
class="icon icon--inst"></a>
</div>



</div>
<div class="footer__when-work">
<div class="scedule footer__scedule">
<div class="scedule__text">Графік роботи</div>
<div class="scedule__plan">
12:00 — 20:00 <span class="menu__day">середа</span><br>
12:00 — 20:00 <span class="menu__day">четвер</span><br>
12:00 — 20:00 <span class="menu__day">п’ятниця</span><br>
11:00 — 19:00 <span class="menu__day">субота</span><br>
11:00 — 19:00 <span class="menu__day">неділя</span><br>
</div>
</div>
<div class="footer__weekends">
Вихідні понеділок, вівторок
Каса припиняє роботу за 1 годину
до закриття музею
</div>

</div>

<div class="footer__contacts">
<div id="contacts" class="footer__contacts-text">
Контакти:
</div>
<div class="footer__address">
<a href="https://maps.app.goo.gl/RQiPrun1WthewGDM8"
class="footer__link"
target="_blank">вул. М. Грушевського, 6; Київ, 01001</a>
<a href="tel:+380442781357"
class="footer__link"
target="_blank">тел. +38 (044) 278-13-57</a>
<a href="tel:+380442787454"
class="footer__link"
target="_blank">факс +38 (044) 278-74-54</a>
<a href="mailto: info@namu.kiev.ua"
class="footer__link"
target="_blank">e-mail: info@namu.kiev.ua</a>
</div>
</div>
<a href="#top" class="footer__go-to-top">
<div class="icon icon--arrow"></div>
</a>
<div class="footer__line"></div>

<nav class="nav footer__nav">
<ul class="nav__list nav__list--footer">
<li class="nav__item nav__item--footer-1">
<a href="#gallery" class="nav__link nav__link--footer">Галерея</a>
<a href="#actions" class="nav__link nav__link--footer">Виставки та</br> події</a>
</li>
<li class="nav__item nav__item--footer-2">
<a href="#about-us" class="nav__link nav__link--footer">Про нас</a>
<a href="#contacts" class="nav__link nav__link--footer">Контакти</a>
</li>
</ul>
</nav>

<div class="footer__made-by">
<div class="footer__author">
Designed by Zhyriada Marina
</div>

<div class="footer__date">
Copyright © 2019. All Rights Reserved.
</div>
</div>
</div>
</footer>
</body>
</html>
Loading
Loading