Skip to content

Commit

Permalink
add hover
Browse files Browse the repository at this point in the history
  • Loading branch information
@ydem1
ydem1 committed Sep 11, 2023
1 parent c829c38 commit 1f48da9
Show file tree
Hide file tree
Showing 10 changed files with 148 additions and 36 deletions.
92 changes: 56 additions & 36 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<div class="top-bar__controll">
<a href="#menu" class="top-bar__icon-menu icon-menu"></a>

<a href="#" class="top-bar__icon-languages header__icon-languages icon-languages">
<a href="#languages" class="top-bar__icon-languages header__icon-languages icon-languages">
<p class="icon-languages__label">UA</p>

<div class="icon-languages__arrow"></div>
Expand All @@ -50,7 +50,7 @@ <h1 class="header__title">
світову культуру 19-20 ст.
</p>

<a href="#" class="header__button button button--format-first">
<a href="#сurrent-exhibitions" class="header__button button button--format-first">
Купити квитки
</a>

Expand All @@ -76,7 +76,7 @@ <h1 class="header__title">
<div class="top-bar__controll">
<a href="#home" class="top-bar__icon-close-menu icon-close-menu"></a>

<a href="#" class="top-bar__icon-languages menu__icon-languages icon-languages">
<a href="#languages" class="top-bar__icon-languages menu__icon-languages icon-languages">
<p class="icon-languages__label">UA</p>

<div class="icon-languages__arrow"></div>
Expand All @@ -91,7 +91,7 @@ <h1 class="header__title">
<p class="contact-us-menu__text">12:00 - 19:00</p>
</li>

<li class="contact-us-menu__item">
<li class="contact-us-menu__item contact-us-menu__item--underline">
<p class="contact-us-menu__label">Адреса:</p>
<a
target="_blank"
Expand All @@ -109,19 +109,19 @@ <h1 class="header__title">
<nav class="menu__nav nav-menu">
<ul class="nav-menu__list">
<li class="nav-menu__item">
<a href="#" class="nav-menu__link">
<a href="#сurrent-exhibitions" class="nav-menu__link">
Актуальні виставки
</a>
</li>

<li class="nav-menu__item">
<a href="#" class="nav-menu__link">
<a href="#upcoming-events" class="nav-menu__link">
Найближчі події
</a>
</li>

<li class="nav-menu__item">
<a href="#" class="nav-menu__link">
<a href="#news" class="nav-menu__link">
Новини
</a>
</li>
Expand All @@ -131,7 +131,7 @@ <h1 class="header__title">
<div class="menu__bottom">
<div class="menu__under-line"></div>

<a href="#" class="menu__button button button--format-first">
<a href="#сurrent-exhibitions" class="menu__button button button--format-first">
Купити квитки
</a>
</div>
Expand All @@ -150,15 +150,15 @@ <h1 class="header__title">

<main class="page__main main">
<div class="main__content">
<section class="сurrent-exhibitions section">
<section class="сurrent-exhibitions section" id="сurrent-exhibitions">
<div class="container">
<div class="сurrent-exhibitions__content">
<div class="сurrent-exhibitions__top-bar section__top-bar">
<h2 class="сurrent-exhibitions__title section__title">
Актуальні події
</h2>

<a href="#" class="section__button-top button button--format-second">
<a href="#archive-of-exhibitions" class="section__button-top button button--format-second">
<p class="button__label">
Архів виставок
</p>
Expand Down Expand Up @@ -187,7 +187,7 @@ <h3 class="article__title">
Виставковий проект «Ангели» – знакова подія для української культури і водночас наймасштабніший...
</p>

<a href="#" class="article__button button button--format-first">
<a href="#сurrent-exhibitions" class="article__button button button--format-first">
Купити квиток
</a>
</article>
Expand All @@ -211,11 +211,11 @@ <h3 class="article__title">
Знакові роботи Алли Горської, Миколи Самокиша, Федора Кричевського та інших митців.
</p>

<a href="#" class="article__button button button--format-first">
<a href="#сurrent-exhibitions" class="article__button button button--format-first">
Купити квиток
</a>

<a href="#" class="article__button article__button--format-second button button--format-second">
<a href="#archive-of-exhibitions" class="article__button article__button--format-second button button--format-second">
<p class="button__label">
Архів виставок
</p>
Expand All @@ -228,15 +228,15 @@ <h3 class="article__title">
</div>
</section>

<section class="upcoming-events section">
<section class="upcoming-events section" id="upcoming-events">
<div class="container">
<div class="upcoming-events__content">
<div class="upcoming-events__top-bar section__top-bar">
<h2 class="upcoming-events__title section__title">
Найближчі події
</h2>

<a href="#" class="section__button-top button button--format-second">
<a href="#calendar-of-events" class="section__button-top button button--format-second">
<p class="button__label">
Календар подій
</p>
Expand Down Expand Up @@ -266,7 +266,7 @@ <h3 class="article__title">
Таємниці підготовки, історії експонатів, магія дійства до і в момент вашої присутності – розгортатиметься...
</p>

<a href="#" class="article__button button button--format-first">
<a href="#plan-visit-to-museum" class="article__button button button--format-first">
Зареєструватись
</a>
</div>
Expand All @@ -292,11 +292,11 @@ <h3 class="article__title">
Цієї неділі о 14:00 на арт-мандрівників чекає останній пункт кругосвітньої подорожі - Австралія.
</p>

<a href="#" class="article__button button button--format-first">
<a href="#plan-visit-to-museum" class="article__button button button--format-first">
Зареєструватись
</a>

<a href="#" class="article__button article__button--format-second button button--format-second">
<a href="#calendar-of-events" class="article__button article__button--format-second button button--format-second">
<p class="button__label">
Календар подій
</p>
Expand All @@ -310,7 +310,7 @@ <h3 class="article__title">
</div>
</section>

<secton class="plan-visit-to-museum section">
<secton class="plan-visit-to-museum section" id="plan-visit-to-museum">
<div class="container">
<div class="plan-visit-to-museum__content">
<h2 class="plan-visit-to-museum__title section__title">
Expand All @@ -323,23 +323,23 @@ <h2 class="plan-visit-to-museum__title section__title">
насолоджуватись мистецтвом.
</p>

<a href="#" class="plan-visit-to-museum__button button button--format-first">
<a href="#start" class="plan-visit-to-museum__button button button--format-first">
Почати
</a>
</div>
</div>

</secton>

<section class="news section">
<section class="news section" id="news">
<div class="container">
<div class="news__content">
<div class="news__top-bar section__top-bar">
<h2 class="news__title section__title">
Новини
</h2>

<a href="#" class="section__button-top button button--format-second">
<a href="#all-news" class="section__button-top button button--format-second">
<p class="button__label">
Усі новини
</p>
Expand Down Expand Up @@ -388,7 +388,7 @@ <h3 class="article__title">
Музей з левами не може просто так взяти і пропустити Міжнародний день котів!
</p>

<a href="#" class="article__button article__button--format-second button button--format-second">
<a href="#all-news" class="article__button article__button--format-second button button--format-second">
<p class="button__label">
Усі новини
</p>
Expand Down Expand Up @@ -484,20 +484,40 @@ <h3 class="footer__subtitle">
</ul>

<ul class="contact-us-footer__social-list">
<li class="contact-us-footer__item">
<a href="#" class="contact-us-footer__link icon-socia icon-socia__facebook"></a>
<li class="contact-us-footer__social-item">
<a
target="_blank"
href="https://www.facebook.com/namu.museum/?locale=uk_UA"
class="contact-us-footer__link icon-socia icon-socia__facebook"
>
</a>
</li>

<li class="contact-us-footer__item">
<a href="#" class="contact-us-footer__link icon-socia icon-socia__twitter"></a>
<li class="contact-us-footer__social-item">
<a
target="_blank"
href="https://twitter.com/NAMU_120"
class="contact-us-footer__link icon-socia icon-socia__twitter"
>
</a>
</li>

<li class="contact-us-footer__item">
<a href="#" class="contact-us-footer__link icon-socia icon-socia__telegram"></a>
<li class="contact-us-footer__social-item">
<a
target="_blank"
href="https://web.telegram.org/k/"
class="contact-us-footer__link icon-socia icon-socia__telegram"
>
</a>
</li>

<li class="contact-us-footer__item">
<a href="#" class="contact-us-footer__link icon-socia icon-socia__instagram"></a>
<li class="contact-us-footer__social-item">
<a
target="_blank"
href="https://www.instagram.com/namu.museum/"
class="contact-us-footer__link icon-socia icon-socia__instagram"
>
</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -545,23 +565,23 @@ <h3 class="footer__subtitle">

<ul class="nav-footer__list">
<li class="nav-footer__item">
<a href="#" class="nav-footer__link">
<a href="#сurrent-exhibitions" class="nav-footer__link">
<p class="nav-footer__text">
Виставки
</p>
</a>
</li>

<li class="nav-footer__item">
<a href="#" class="nav-footer__link">
<a href="#upcoming-events" class="nav-footer__link">
<p class="nav-footer__text">
Події
</p>
</a>
</li>

<li class="nav-footer__item">
<a href="#" class="nav-footer__link">
<a href="#news" class="nav-footer__link">
<p class="nav-footer__text">
Новини
</p>
Expand All @@ -580,8 +600,8 @@ <h3 class="footer__subtitle">
Privacy — Terms
</p>
</div>
<a href="#" class="footer__icon-scroll-up icon-scroll-up"></a>

<a href="#home" class="footer__icon-scroll-up icon-scroll-up"></a>
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/styles/blocks/article.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.article {
&__img {
width: 100%;
@include hover(transform, translate(-5%, -5%));
}

&__date {
Expand Down
15 changes: 15 additions & 0 deletions src/styles/blocks/buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,27 @@
&--format-first {
color: $button-text-color-format-first;
background-color: $button-background-color-format-first;

@include hover(background-color,
$button-hover-background-color-format-first);

&:active {
background-color: $button-active-background-color-format-first;
}
}

&--format-second {
color: $button-text-color-format-second;
background-color: $button-background-color-format-second;
border: 1px solid $button-border-color-format-second;

@include hover(color, $button-hover-background-color-format-second);
@include hover(border-color, $button-hover-background-color-format-second);

&:active {
color: $button-active-background-color-format-second;
border-color: $button-active-background-color-format-second;
}
}

&__arrow {
Expand Down
11 changes: 11 additions & 0 deletions src/styles/blocks/contact-us-footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,14 @@
}

&__item {
position: relative;
z-index: 1;

line-height: 150%;

width: max-content;

@include hoverUnderline(-1px);
}

&__link {
Expand All @@ -25,4 +32,8 @@
margin-bottom: 0;
}
}

&__social-item {
line-height: 150%;
}
}
9 changes: 9 additions & 0 deletions src/styles/blocks/contact-us-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,15 @@
grid-column: span 3;
}
}

&--underline {
position: relative;
z-index: 1;

width: max-content;

@include hoverUnderline(-1px);
}
}

&__label {
Expand Down
Loading

0 comments on commit 1f48da9

Please sign in to comment.