Skip to content

Develop #551

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

Develop #551

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dced3da
finish header
kristinakovalchuk Feb 10, 2026
42aca04
finish menu
kristinakovalchuk Feb 10, 2026
518aaab
finish main content
kristinakovalchuk Feb 12, 2026
1caf788
finish footer
kristinakovalchuk Feb 16, 2026
c15c3ef
add animation
kristinakovalchuk Feb 16, 2026
2879e99
fixed style
kristinakovalchuk Feb 16, 2026
55d62f7
Update styles according to mentor feedback
kristinakovalchuk Feb 16, 2026
4c90262
add cursor: pointer; to interactive elements on the page
kristinakovalchuk Feb 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
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
355 changes: 353 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,365 @@
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Title</title>
<title>NAMU</title>
<link
rel="stylesheet"
href="src/styles/main.scss"
/>
<link rel="icon" href="./src/images/logo-black.svg" type="image/png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
</head>
<body>
<h1>Hello Mate Academy</h1>

<header class="header" id="page">
<div class="container">

<div class="top-bar">
<img
src="./src/images/NAMU-white.svg"
alt="logo-img"
class="top-bar__logo">

<div class="top-bar__icon">

<div class="top-bar__lang top-bar__lang__header">
<p class="top-bar__lang-text">UA</p>
<a href="" class="icon icon--arrow"></a>
</div>

<a href="#menu" class="icon icon--menu"></a>
</div>
</div>

<div class="header__bottom">

<div class="header__bottom__text">
<p class="header__bottom__date">10 серпня - 10 листопада</p>
<p class="header__bottom__title">Мистецтво ХІХ - ХХ ст.</p>
<p class="header__bottom__description">Внесок українських митців у світову культуру 19-20 ст.</p>
</div>

<a href="#" class="header__bottom__button">Купити квиток</a>

<img src="./src/images/header-img/header-img.png" alt="photo" class="header__bottom__img">

<div class="header__bottom__on-desktop">
<p class="header__bottom__date-small">10.08 - 10.10</p>
<div class="header__bottom__line"></div>
</div>

</div>
</div>
</header>

<aside class="menu" id="menu">
<div class="container">

<div class="top-bar">
<img
src="./src/images/NAMU-white.svg"
alt="logo-img"
class="top-bar__logo">

<div class="top-bar__icon">

<div class="top-bar__lang">
<p class="top-bar__lang-text">UA</p>
<a href="" class="icon icon--arrow"></a>
</div>

<a href="#" class="icon icon--close"></a>
</div>
</div>

<div class="menu__bottom">

<div class="menu__schedule">
<p class="menu__title">Розклад сьогодні:</p>
<p class="menu__text">12:00 - 19:00</p>
</div>

<div class="menu__address">
<p class="menu__title">Адреса:</p>
<a href="https://share.google/gRD1C5TkACMzeb9n9" target="_blank" class="menu__text">Київ, вул. М. Грушевського, 6</a>
</div>

<nav class="menu__nav">
<ul class="menu__nav-list">
<li><a href="#event-now" class="menu__nav-link">Актуальні виставки</a></li>
<li><a href="#future-event" class="menu__nav-link">Найближчі події</a></li>
<li><a href="#news" class="menu__nav-link">Новини</a></li>
</ul>
</nav>

<div class="menu__line"></div>

<a href="#" class="menu__button">Купити квиток</a>

<img src="./src/images/header-img/img_menu.png" alt="photo" class="menu__img">

</div>
</div>
</aside>

<main>
<section class="event-now" id="event-now">
<div class="container">
<div class="event-now__content">

<p class="event-now__title">Актуальні виставки</p>

<article class="card event-now__card">
<div class="card__content">

<img
src="./src/images/event-img/image1.svg"
alt="photo"
class="card__img">

<div class="card__text">
<p class="card__date">11.07 - 22.09</p>
<p class="card__title">Кураторська виставка “Ангели”</p>
<p class="card__description">Виставковий проект «Ангели» – знакова подія для української культури і водночас наймасштабніший...</p>
<a href="" class="card__button">Купити квиток</a>
</div>

</div>
</article>

<article class="card event-now__card">
<div class="card__content">

<img
src="./src/images/event-img/image2.svg"
alt="photo"
class="card__img">

<div class="card__text">
<p class="card__date">Діє постійно</p>
<p class="card__title">Мистецтво ХХ ст. — XXI ст.</p>
<p class="card__description">Знакові роботи Алли Горської, Миколи Самокиша, Федора Кричевського та інших митців.</p>
<a href="" class="card__button">Купити квиток</a>
</div>

</div>
</article>

<div class="event-now__button">
<a href="" class="event-now__button__text">Архів виставок</a>
<a href="" class=" icon icon--arrow-right"></a>
</div>

</div>
</div>
</section>

<section class="future-event" id="future-event">
<div class="container">
<div class="future-event__content">

<p class="event-now__title future-event__title">Найближчі події</p>
<article class="card event-now__card future-event__card ">
<div class="future-event__card__content">
<img
src="./src/images/event-future/img_05.svg"
alt="photo"
class="card__img future-event__img">
<div class="card__text future-event__text">
<p class="card__date">14.08 о 13:00</p>
<p class="card__title">Кураторські екскурсії від Павла Гудімова </p>
<p class="card__description">
Таємниці підготовки, історії експонатів, магія дійства до і в момент вашої присутності – розгортатиметься...
</p>
<a href="" class="card__button">Зареєструватись</a>
</div>
</div>
</article>

<article class="card event-now__card future-event__card">
<div class="future-event__card__content">
<img
src="./src/images/event-future/img_06.svg"
alt="photo"
class="card__img future-event__img">

<div class="card__text future-event__text">
<p class="card__date">16.08 о 13:00</p>
<p class="card__title future-event__card__title">Майстер-клас “Подорож до Австралії”</p>
<p class="card__description future-event__card__description">
Цієї неділі о 14:00 на арт-мандрівників чекає останній пункт кругосвітньої подорожі - Австралія.
</p>
<a href="" class="card__button">Зареєструватись</a>
</div>
</div>
</article>

<div class="event-now__button future-event__button">
<a href="" class="event-now__button__text">Календар подій</a>
<a href="" class=" icon icon--arrow-right"></a>
</div>

</div>
</div>
</section>

<section class="plan">
<div class="container">
<div class="plan__content">

<img
class="plan__img"
src="./src/images/header-img/img__plan.svg"
alt="photo">

<div class="plan__wrapper">
<p class="plan__title">Сплануйте <br>візит до музею</p>
<p class="plan__text">
Оберіть зручний день, зареєструйтесь на події, що цікавлять, купіть квиток заздалегідь, щоб ніщо не завадило вам насолоджуватись мистецтвом
</p>
</div>

<a href="#" class="header__bottom__button plan__button">Почати</a>

</div>
</div>
</section>

<section class="news" id="news">
<div class="container">
<div class="event-now__content">

<p class="event-now__title news__title">Новини</p>

<article class="card event-now__card news__card">
<div class="card__content">

<img
src="./src/images/news-img/img_08.svg"
alt="photo"
class="card__img">

<div class="card__text">
<p class="card__date news__date">9 серпня 2019</p>
<p class="card__title news__title-card">Оголошення переможця</p>
<p class="card__description news__description">Друзі, сьогодні п'ятниця! А це означає, що час оголосити переможця розіграшу...</p>
</div>

</div>
</article>

<article class="card event-now__card news__card">
<div class="card__content">

<img
src="./src/images/news-img/img_09.svg"
alt="photo"
class="card__img">

<div class="card__text">
<p class="card__date news__date">9 серпня 2019</p>
<p class="card__title news__title-card">Міжнародний день котів</p>
<p class="card__description news__description">Музей з левами не може просто так взяти і пропустити Міжнародний день котів!</p>
</div>

</div>
</article>

<div class="event-now__button">
<a href="" class="event-now__button__text">Усі новини</a>
<a href="" class=" icon icon--arrow-right"></a>
</div>

</div>
</div>
</section>

<section class="follow">
<div class="container">
<form
class="follow__content"
onsubmit="this.reset(); return false;"
>
<p class="follow__title">Підпишіться на дайджест</p>

<p class="follow__description">
Першими дізнавайтесь про новини музею та розіграші, отримуйте запрошення на події та читайте статті від кураторів
</p>

<input
class="follow__input"
type="email"
placeholder="email"
required
/>

<button
type="submit"
class="header__bottom__button follow__button"
>
Підписатись
</button>
</form>
</div>
</section>

</main>

<footer class="footer">
<div class="container">
<section class="footer__content">

<div class="footer__contact">
<p class="footer__title">Контакти</p>
<a href="https://maps.app.goo.gl/oHr5TVcXUZzR4Jbm7" class="footer__item">Київ,<br> вул. М. Грушевського, 6</a>
<a href="tel:278-13-57" class="footer__item">тел. 278-13-57, 278-74-54</a>
<a href="info@namu.kiev.ua" target="_blank" class="footer__item">info@namu.kiev.ua</a>

<div class="footer__icons">
<a href="https://www.facebook.com/" target="_blank" class="icon icon--facedook"></a>
<a href="https://twitter.com/" target="_blank" class="icon icon--twitter"></a>
<a href="https://web.telegram.org" target="_blank" class="icon icon--telegram"></a>
<a href="https://www.instagram.com/" target="_blank" class="icon icon--instagram"></a>
</div>
</div>

<div class="footer__schedule">
<p class="footer__title">Розклад роботи</p>
<ul class="footer__schedule__list">
<l><p class="footer__item">ПН: вихідний</p></l>
<l><p class="footer__item">ВТ: вихідний</p></l>
<l><p class="footer__item">СР: 10:00 - 17:00</p></l>
<l><p class="footer__item">ЧТ: 10:00 - 17:00</p></l>
<l><p class="footer__item">ПТ: 12:00 - 19:00</p></l>
<l><p class="footer__item">СБ: 11:00 - 18:00</p></l>
<l><p class="footer__item">НД: 10:00 - 17:00</p></l>
</ul>
</div>

<div class="footer__menu">
<nav>
<a href="#" class="footer__title">Головна</a>
<ul class="footer__menu__list">
<li><a href="#event-now" class="footer__item">Виставки</a></li>
<li><a href="#future-event" class="footer__item">Події</a></li>
<li><a href="#news" class="footer__item">Новини</a></li>
</ul>
</nav>
</div>

<div class="footer__bottom">
<div class="footer__text">
<p class="footer__text__item">© 2010 — 2020</p>
<p class="footer__text__item">Privacy — Terms</p>
</div>
<a href="#page" class="footer__arrow icon icon--footer-arrow"></a>
</div>

</section>
</div>
</footer>
<script src="src/scripts/main.js"></script>
</body>
</html>
Loading
Loading