Skip to content

Сomplete museum landing page layout and logic #552

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

Сomplete museum landing page layout and logic #552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e89b4dd
complete museum landing page layout and logic
fedirbazalii Feb 21, 2026
3f632eb
fixed path problems
fedirbazalii Feb 21, 2026
503c043
fix: i18n routing
fedirbazalii Feb 21, 2026
288cd17
fix: add vite config for multi-page build (en.html)
fedirbazalii Feb 21, 2026
9af8415
fix: add base path to vite config
fedirbazalii Feb 21, 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
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 @@ -31,7 +31,7 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play
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_2/).
[DEMO LINK](https://FedorLey.github.io/Museum_2/).
14. Copy `DEMO LINK` to the PR description.

> To update you PR repeat steps 7-11.
355 changes: 355 additions & 0 deletions en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,355 @@
<!doctype html>
<html lang="en" class="page">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>NAMU - National Art Museum of Ukraine</title>
<link
rel="stylesheet"
href="src/styles/index.scss"
>
<script
type="module"
src="src/scripts/index.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=Playfair+Display:wght@700&family=Raleway:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<aside class="menu page__menu" id="menu">
<div class="container menu__container">
<header class="navbar menu__navbar">
<a href="#" class="navbar__logo"></a>

<div class="navbar__actions">
<a href="#!" class="icon icon--cross navbar__button"></a>
<div class="language navbar__language" tabindex="0">
<div class="language__current">
EN <span class="icon icon--dropdown language__arrow"></span>
</div>
<ul class="language__list">
<li>
<a
href="./index.html"
class="language__option"
data-lang="ua"
>
UA
</a>
</li>
</ul>
</div>
</div>
</header>

<div class="menu__content">
<div class="menu__columns">
<div class="menu__column">
<h3 class="menu__title">Today's schedule:</h3>
<span class="menu__text">12:00 - 19:00</span>
</div>
<div class="menu__column">
<h3 class="menu__title">Address:</h3>
<span class="menu__text">6 M. Hrushevskoho St., Kyiv</span>
</div>
</div>
<nav class="menu__navigation">
<ul class="menu__list">
<li class="menu__item"><a href="#exhibitions" class="menu__link">Current Exhibitions</a></li>
<li class="menu__item"><a href="#events" class="menu__link">Upcoming Events</a></li>
<li class="menu__item"><a href="#news" class="menu__link">News</a></li>
</ul>
</nav>
<hr class="menu__divider">

<button class="button button--primary menu__button">Buy Ticket</button>
</div>

<img
src="src/images/menu.png"
alt="Artist"
class="menu__image"
>
</div>
</aside>

<body class="page__body">
<main class="main">
<section class="hero">
<div class="container hero__container">
<header class="navbar hero__navbar">
<a href="#" class="navbar__logo"></a>

<div class="navbar__actions">
<a href="#menu" class="icon icon--menu navbar__button"></a>
<div class="language navbar__language" tabindex="0">
<div class="language__current">
EN <span class="icon icon--dropdown language__arrow"></span>
</div>
<ul class="language__list">
<li>
<a
href="./index.html"
class="language__option"
data-lang="ua"
>
UA
</a>
</li>
</ul>
</div>
</div>
</header>

<div class="hero__content">
<time datetime="2019-08-10/2019-11-10" class="hero__label">August 10 - November 10</time>
<h1 class="hero__title">Art of the ХІХ - ХХ c.</h1>
<p class="hero__description">The contribution of Ukrainian artists to world culture of the 19th-20th centuries.</p>
<button class="button button--primary hero__button">Buy Ticket</button>
</div>

<div class="hero__date">
<time datetime="2019-08-10/2019-10-10">10.08 - 10.10</time>
<hr class="hero__divider">
</div>

<img
src="src/images/hero.png"
alt="Girl from Podillia"
class="hero__image"
>
</div>
</section>

<section class="showcase showcase--exhibitions" id="exhibitions">
<div class="container showcase__container">
<h2 class="heading showcase__heading">Current Exhibitions</h2>
<button class="button button--secondary showcase__button">Exhibitions Archive</button>

<div class="showcase__cards">
<article class="card">
<div class="card__frame">
<img
src="src/images/showcase1.jpg"
alt="Curatorial Exhibition “Angels”"
class="card__image"
>
</div>
<div class="card__content">
<time datetime="2019-07-11/2019-09-22" class="card__label">11.07 - 22.09</time>
<h3 class="card__title">Curatorial Exhibition “Angels”</h3>
<p class="card__description">The exhibition project "Angels" is a landmark event for Ukrainian culture and at the same time the most large-scale...</p>
<button class="button button--primary card__button">Buy Ticket</button>
</div>
</article>

<article class="card">
<div class="card__frame">
<img
src="src/images/showcase2.jpg"
alt="Art of the 20th — 21st Centuries"
class="card__image"
>
</div>
<div class="card__content">
<div class="card__label">Permanent Exhibition</div>
<h3 class="card__title">Art of the 20th — 21st Centuries</h3>
<p class="card__description">Iconic works by Alla Horska, Mykola Samokysh, Fedir Krychevsky, and other artists.</p>
<button class="button button--primary card__button">Buy Ticket</button>
</div>
</article>
</div>
</div>
</section>

<section class="showcase showcase--events" id="events">
<div class="container showcase__container">
<h2 class="heading showcase__heading">Upcoming Events</h2>
<button class="button button--secondary showcase__button">Events Calendar</button>

<div class="showcase__cards showcase__cards--events">
<article class="card card--events">
<div class="card__frame">
<img
src="src/images/showcase3.jpg"
alt="Curatorial Exhibition “Angels”"
class="card__image"
>
</div>
<div class="card__content">
<time datetime="2019-08-14T13:00" class="card__label">14.08 at 13:00</time>
<h3 class="card__title">Curatorial Tours by Pavlo Hudimov</h3>
<p class="card__description">Secrets of preparation, histories of exhibits, the magic of the process before and during your presence will unfold...</p>
<button class="button button--primary card__button">Register</button>
</div>
</article>

<article class="card card--events">
<div class="card__frame">
<img
src="src/images/showcase4.jpg"
alt="Art of the 20th — 21st Centuries"
class="card__image"
>
</div>
<div class="card__content">
<time datetime="2019-08-16T13:00" class="card__label">16.08 at 13:00</time>
<h3 class="card__title">Masterclass “Journey to Australia”</h3>
<p class="card__description">This Sunday at 14:00, the final destination of the round-the-world journey awaits art travelers: Australia.</p>
<button class="button button--primary card__button">Register</button>
</div>
</article>
</div>
</div>
</section>

<section class="visit">
<div class="container visit__container">
<h2 class="visit__title">Plan Your<br>Museum Visit</h2>
<p class="visit__description">Choose a convenient day, register for events of interest, and buy your ticket in advance so nothing prevents you from enjoying the art.</p>
<button class="button button--primary visit__button">Start Planning</button>
</div>
</section>

<section class="showcase showcase--news" id="news">
<div class="container showcase__container">
<h2 class="heading showcase__heading">News</h2>
<button class="button button--secondary showcase__button">All News</button>

<div class="showcase__cards showcase__cards--news">
<article class="card card--news">
<div class="card__frame">
<img
src="src/images/showcase5.jpg"
alt="Curatorial Exhibition “Angels”"
class="card__image"
>
</div>
<div class="card__content">
<time datetime="2019-08-09" class="card__label">August 9, 2019</time>
<h3 class="card__title">Winner Announcement</h3>
<p class="card__description">Friends, today is Friday! And that means it's time to announce the giveaway winner...</p>
</div>
</article>

<article class="card card--news">
<div class="card__frame">
<img
src="src/images/showcase6.jpg"
alt="Art of the 20th — 21st Centuries"
class="card__image"
>
</div>
<div class="card__content">
<time datetime="2019-08-09" class="card__label">August 9, 2019</time>
<h3 class="card__title">International Cat Day</h3>
<p class="card__description">A museum with lions can't just skip International Cat Day!</p>
</div>
</article>
</div>
</div>
</section>

<section class="subscribe">
<div class="container subscribe__container">
<h2 class="heading subscribe__heading">Subscribe to Our Digest</h2>
<p class="subscribe__description">Be the first to know about museum news and giveaways, receive event invitations, and read articles from our curators.</p>

<form
class="form subscribe__form"
id="subscribe-form"
onsubmit="this.reset(); return false;"
>
<input
type="email"
class="form__input"
placeholder="Email address"
required
>
</form>

<button
class="button button--primary subscribe__button"
type="submit"
form="subscribe-form"
>
Subscribe
</button>
</div>
</section>
</main>

<footer class="footer">
<div class="container footer__container">
<div class="footer__columns">
<div class="footer__column">
<h3 class="footer__title">Contacts</h3>
<address class="footer__text">
<a href="https://maps.app.goo.gl/CJy81A8tPWU2Qt536" class="footer__link">6 M. Hrushevskoho St.,<br>Kyiv</a><br>
tel. <a href="tel: +278-13-57" class="footer__link">278-13-57</a>, <a href="tel: +278-74-54" class="footer__link">278-74-54</a><br>
<a href="mailto:info@namu.kiev.ua" class="footer__link">info@namu.kiev.ua</a>
</address>
<div class="footer__socials">
<a
href="https://namu.ua"
class="icon icon--facebook"
aria-label="Facebook"
></a>
<a
href="https://namu.ua" class="icon icon--twitter"
aria-label="Twitter"
></a>
<a
href="https://namu.ua"
class="icon icon--telegram"
aria-label="Telegram"
></a>
<a
href="https://namu.ua"
class="icon icon--instagram"
aria-label="Instagram"
></a>
</div>
</div>
<div class="footer__column">
<h3 class="footer__title">Opening Hours</h3>
<ul class="footer__text">
<li>MON: Closed</li>
<li>TUE: Closed</li>
<li>WED: 10:00 - 17:00</li>
<li>THU: 10:00 - 17:00</li>
<li>FRI: 12:00 - 19:00</li>
<li>SAT: 11:00 - 18:00</li>
<li>SUN: 10:00 - 17:00</li>
</ul>
</div>
<div class="footer__column">
<h3 class="footer__title">Home</h3>
<ul class="footer__text footer__text--nav">
<li><a href="#exhibitions" class="footer__link">Exhibitions</a></li>
<li><a href="#events" class="footer__link">Events</a></li>
<li><a href="#news" class="footer__link">News</a></li>
</ul>
</div>
</div>

<div class="footer__bottom">
<div class="footer__copyright">
<span>© 2010 — 2020</span>
<span>Privacy — Terms</span>
</div>
<button
class="icon icon--up"
onclick="window.scrollTo({top: 0, behavior: 'smooth'})"
></button>
</div>
</div>
</footer>
</body>
</html>
Loading
Loading