Skip to content

complete layout #726

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
Tryzub-web wants to merge 1 commit into
base: master
Choose a base branch
from
Open

complete layout #726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
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://Tryzub-web.github.io/Museum/).
14. Copy `DEMO LINK` to the PR description.

> To update you PR repeat steps 7-11.
251 changes: 246 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,260 @@
<!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"
type="image/png"
href="src/images/logo.png"
/>

<link
rel="stylesheet"
href="src/styles/main.scss"
/>
<script src="src/scripts/main.js"
defer="defer"
type="module"
></script>
</head>
<body>
<h1>Hello Mate Academy</h1>
<script src="src/scripts/main.js"></script>
<body class="page__body" id="page-top">

<header class="header">

<div class="top-bar">
<div class="top-bar__wrapper">
<a href="#menu" class="top-bar__btn-menu icon icon--burger-menu"></a>
<div class="top-bar__logo">
<img class="top-bar__logo-image" src="src/images/logo.png" alt="#">
</div>
</div>
</div>

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

<div class="menu__mask"></div>

<div class="menu__bg">
<div class="menu__wrapper container">

<div class="menu__nav">
<a href="#" class="menu__icon-close icon icon--close"></a>
<nav class="menu__nav-list">
<a class="menu__nav-link link-border link-border--white" href="#gallery">Галерея</a>
<a class="menu__nav-link link-border link-border--white" href="#about">Про Нас</a>
<a class="menu__nav-link link-border link-border--white" href="#event">Виставки та події</a>
<a class="menu__nav-link link-border link-border--white" href="#contact">Контакти</a>
</nav>
</div>

<div class="menu__info">
<h2 class="menu__info-min-title">Графік роботи</h2>
<ul class="menu__info-list">
<li><span>12:00 — 20:00</span> середа</li>
<li><span>12:00 — 20:00</span> четвер</li>
<li><span>12:00 — 20:00</span> п’ятниця</li>
<li><span>11:00 — 19:00</span> субота</li>
<li><span>11:00 — 19:00</span> неділя</li>
</ul>
<p class="menu__info-dop-info"><span>Вихідні:</span> понеділок, вівторок<br/>Каса припиняє роботу за 1 годину до закриття музею</p>
</div>

</div>
</div>

</div>

<div class="header__content">
<h1 class="header__title">ХУДОЖНІЙ МУЗЕй</h1>
<div class="header__btn-wrap">
<a class="header__btn" href="event">КВИТКи</a>
</div>
<div class="header__min-title">
<div class="header__min-title-line"></div>
<div class="header__min-title-text">ПОДІЇ</div>
</div>
</div>

<div class="header__image">
<img class="header__image-item" src="src/images/header/img-top-1.png" alt="#">
</div>

</header>

<section id="event" class="current-events current-events--margin-bottom">

<div class="current-events__wrapper container">
<h2 class="current-events__title">Актуальні події</h2>

<div class="current-events__items">

<div class="current-events__item">
<div class="current-events__item-image">
<img src="src/images/current-events/Rectangle-2.3.png" alt="#">
</div>
<div class="current-events__item-content">
<div class="current-events__item-data">
<span class="current-events__item-data-text">ВИСТАВКа</span>
<span>26.08-29.11.2019</span>
</div>
<h3 class="current-events__item-title">Йду і повертаюсь</h3>
<p class="current-events__item-text">
Національний Художній Музей України презентує унікальну частину колекції Градобанку - українське мистецтво другої половини 1980-1995 років.
</p>
</div>
</div>

<div class="current-events__item">
<div class="current-events__item-image">
<img src="src/images/current-events/Rectangle-4.3.png" alt="#">
</div>
<div class="current-events__item-content">
<div class="current-events__item-data">
<span class="current-events__item-data-text">ВИСТАВКа</span>
<span>26.08-29.11.2019</span>
</div>
<h3 class="current-events__item-title">І спогади і мрії</h3>
<p class="current-events__item-text">
Національний художній музей України до 100 річчя від дня народження видатної української художниці Тетяни Яблонської відкриває ретроспективну ювілейну виставку «І спогади і мрії».
</p>
</div>
</div>

</div>
</div>

<div class="current-events__end-item">

<img class="current-events__end-item-image" src="src/images/current-events/Rectangle-20.2.png" alt="#">

<div class="current-events__end-item-content-wrapper">
<div class="current-events__end-item-content">
<div class="current-events__end-item-data">
<span class="current-events__end-item-data-title">ЛЕКЦІЯ</span>
<span>26/08/2019 - 11:00</span>
</div>
<h3 class="current-events__end-item-title">Від класицизму до романтизму</h3>
</div>
</div>

</div>

</section>

<section id="gallery" class="gallery gallery--margin-bottom">

<h2 class="gallery__title">Галерея</h2>

<div class="swiper gallery__slider">
<div class="swiper-wrapper">
<div class="swiper-slide gallery__slide">
<img src="src/images/gallery/Rectangle-13.10.png" alt="slide 1">
</div>
<div class="swiper-slide gallery__slide">
<img src="src/images/gallery/Rectangle-24.1.png" alt="slide 2">
</div>
<div class="swiper-slide gallery__slide">
<img src="src/images/gallery/Rectangle-3.1.png" alt="slide 3">
</div>
<div class="swiper-slide gallery__slide">
<img src="src/images/gallery/Rectangle-13.3.png" alt="slide 4">
</div>
</div>
<div class="gallery__pagination"></div>
</div>

<div class="gallery-pc container">
<div class="gallery-pc__item gallery-pc__item--4-600">
<img class="gallery-pc__image" src="src/images/gallery/Rectangle-13.10.png" alt="img 1">
</div>
<div class="gallery-pc__item gallery-pc__item--8-600">
<img class="gallery-pc__image" src="src/images/gallery/Rectangle-3.1.png" alt="img 2">
</div>
<div class="gallery-pc__item gallery-pc__item--8-360">
<img class="gallery-pc__image" src="src/images/gallery/Rectangle-13.3.png" alt="img 3">
</div>
<div class="gallery-pc__item gallery-pc__item--4-360">
<img class="gallery-pc__image" src="src/images/gallery/Rectangle-13.4.png" alt="img 4">
</div>
</div>

</section>

<section id="about" class="subscribe">
<div class="subscribe__wrapper">
<h2 class="subscribe__title">Підписка</h2>
<p class="subscribe__text">Бути в курсі всіх актуальних подій та останніх новин.</p>
<form class="subscribe__form" name="subscribe" action="#" onsubmit="this.reset(); return false">
<input class="subscribe__input" type="email" name="email" placeholder="E-mail">
<button class="subscribe__btn" type="submit">
<span class="icon icon--arrow-black"></span>
</button>
</form>
</div>
</section>

<footer id="contact" class="footer container">

<div class="footer__logo">
<img class="footer__logo-image" src="src/images/logo.png" alt="#">
<div class="footer__logo-social">
<a href="#" target="_blank" class="icon icon--facebook icon--w23"></a>
<a href="#" target="_blank" class="icon icon--instagram"></a>
</div>
</div>

<div class="footer__schedule">
<h2 class="footer__schedule-title">Графік роботи</h2>
<ul class="footer__schedule-list">
<li><span>12:00 — 20:00</span> середа</li>
<li><span>12:00 — 20:00</span> четвер</li>
<li><span>12:00 — 20:00</span> п’ятниця</li>
<li><span>11:00 — 19:00</span> субота</li>
<li><span>11:00 — 19:00</span> неділя</li>
</ul>
<br/>
<p class="footer__schedule-info"><span>Вихідні:</span> понеділок, вівторок<br/>Каса припиняє роботу за 1 годину до закриття музею</p>
</div>

<div class="footer__contact">
<h2 class="footer__contact-title">Контакти:</h2>
<a href="https://maps.app.goo.gl/1btsdbXb5MDM8acv9" target="_blank">вул. М. Грушевського, 6; Київ, 01001</a>
<a href="tel:+380442781357">тел. +38 (044) 278-13-57</a>
<p>факс +38 (044) 278-74-54</p>
<a href="mailto:info@namu.kiev.ua">e-mail: info@namu.kiev.ua</a>
</div>

<div class="footer__line">
<div class="footer__line-item"></div>
</div>

<div class="footer__line-2">
<a href="#page-top" class="arrow-top"><span class="icon icon--go-top icon--wh16"></span></a>
<div class="footer__line-2-item"></div>
</div>

<nav class="footer__menu footer__menu--1">
<a href="#gallery" class="link-border link-border--green">Галерея</a>
<a href="#event" class="link-border link-border--green">Виставки та події</a>
</nav>

<nav class="footer__menu footer__menu--2">
<a href="#about" class="link-border link-border--green">Про Нас</a>
<a href="#contact" class="link-border link-border--green">Контакти</a>
</nav>

<div class="footer__copyright">
<p>Copyright © 2019. All Rights Reserved.</p>
<p>Designed by Zhyriada Marina</p>
</div>

</footer>

</body>
</html>
Binary file added src/fonts/IBMPlexSans-Bold.woff
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/IBMPlexSans-Light.woff
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/IBMPlexSans-Medium.woff
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/IBMPlexSans-Regular.woff
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/IBMPlexSans-SemiBold.woff
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/Montserrat-Bold.woff
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/Montserrat-Regular.woff
View file
Open in desktop
Binary file not shown.
Binary file removed src/fonts/Roboto-Regular-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file added src/images/current-events/Rectangle-2.3.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/current-events/Rectangle-20.2.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/current-events/Rectangle-4.3.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/gallery/Rectangle-13.10.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/gallery/Rectangle-13.3.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/gallery/Rectangle-13.4.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/gallery/Rectangle-24.1.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/gallery/Rectangle-3.1.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/header/img-top-1.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.
10 changes: 10 additions & 0 deletions src/images/icons/arrow-black.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/btn-arrow-gray.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/burger-menu.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/carbon_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.
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.
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/subscribe/Rectangle-22.3.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.
31 changes: 31 additions & 0 deletions src/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,32 @@
'use strict';

import Swiper from 'swiper';
import { Pagination } from 'swiper/modules';
import 'swiper/css';

const swiper = new Swiper('.gallery__slider', {
modules: [Pagination],
speed: 300,
slidesPerView: 1,
spaceBetween: 16,
slidesOffsetBefore: 20,
slidesOffsetAfter: 20,
grabCursor: true,
pagination: {
el: '.gallery__pagination',
clickable: true,
},
enabled: true,
breakpoints: {
768: {
slidesPerView: 2,
spaceBetween: 20,
slidesOffsetBefore: 34,
slidesOffsetAfter: 34,
enabled: true,
},
1280: {
enabled: false,
},
},
});
Loading
Loading