Skip to content
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

feat: добавить анимации элементов в header, gallery & footer #126

Merged
merged 1 commit into from
Oct 25, 2022
Merged

feat: добавить анимации элементов в header, gallery & footer #126

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
7 changes: 7 additions & 0 deletions blocks/cooperation/__link/cooperation__link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,11 @@
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
transition: all .4s ease;
}

.cooperation__link:hover {
background: #242424;
color: #fff;
text-decoration-color: #242424;
}
19 changes: 19 additions & 0 deletions blocks/footer/__link-authors/footer__link-authors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.footer__link-authors {
color: inherit;
text-decoration: none;
transition: all .4s ease;
}

.footer__link-authors:hover {
background: #242424;
color: #fff;
text-decoration: #242424;
}

@media screen and (max-width: 767px) {
.footer__link-authors {
text-decoration: underline;
text-decoration-skip-ink: none;
}
}

10 changes: 10 additions & 0 deletions blocks/footer/__link-logo/footer__link-logo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.footer__link-logo {
display: inline-block;
text-decoration: none;
color: inherit;
transition: transform .5s ease;
}

.footer__link-logo:hover {
transform: scale(1.04);
}
8 changes: 7 additions & 1 deletion blocks/footer/__link/footer__link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
.footer__link {
text-decoration: none;
text-decoration: underline rgba(36, 36, 36, 0);
text-decoration-skip-ink: none;
color: inherit;
transition: text-decoration-color .4s ease;
}

.footer__link:hover {
text-decoration-color: rgba(36, 36, 36, 1);
}
8 changes: 0 additions & 8 deletions blocks/footer/__text/_accent/footer__text_accent_underline.css
View file
Open in desktop

This file was deleted.

4 changes: 4 additions & 0 deletions blocks/gallery-photo/__container/gallery-photo__container.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.gallery-photo__container {
display: inline-block;
overflow: hidden;
}
6 changes: 6 additions & 0 deletions blocks/gallery-photo/__item/gallery-photo__item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
.gallery-photo__item {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: transform .45s ease;
}

.gallery-photo__item:hover {
transform: scale(1.08);
}
3 changes: 3 additions & 0 deletions blocks/header/__dagger-rect/header__dagger-rect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.header__dagger-rect {
fill: #242424;
}
3 changes: 0 additions & 3 deletions blocks/header/__dagger/header__dagger.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
.header__dagger {
width: 1.74vw;
height: 1.74vw;
background-image: url(../../../images/icon-adding-button.svg);
background-position: center;
background-size: cover;
}

@media screen and (min-width: 1440px) {
Expand Down
22 changes: 14 additions & 8 deletions blocks/header/__link/header__link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,42 @@
position: relative;
}

.header__link:hover::before {
.header__link::before {
content: '';
width: 11px;
height: 100%;
display: block;
position: absolute;
top: 0;
right: 0;
border: 1px solid #242424;
border: 1px solid rgba(36, 36, 36, 0);
border-left: none;
border-radius: 50px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
background-color: transparent;
transition: border-color .45s ease;
}

.header__link:hover::after {
.header__link::after {
content: '';
width: 11px;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
border: 1px solid #242424;
border: 1px solid rgba(36, 36, 36, 0);
border-right: none;
border-radius: 50px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
background-color: transparent;
transition: border-color .45s ease;
}

.header__link:hover::before {
border-color: rgba(36, 36, 36, 1);
}

.header__link:hover::after {
border-color: rgba(36, 36, 36, 1);
}

@media screen and (min-width: 1440px) {
Expand Down
11 changes: 11 additions & 0 deletions blocks/header/__pay-link/header__pay-link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@
margin: 0 0.7vw 0.9vw 0.56vw;
display: flex;
text-transform: uppercase;
transition: all .4s ease;
}

.header__pay-link:hover {
background: #242424;
color: #fff;
}

.header__pay-link:hover .header__dagger-rect {
fill: #fff;
transition: all .4s ease;
}

@media screen and (min-width: 1440px) {
Expand Down
42 changes: 21 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<body class="page">
<!-- Саша -->
<header class="header">
<input class="hamburger" id="hamburger" type="checkbox" />
<input class="hamburger" id="hamburger" type="checkbox">
<label class="hamburger__button" for="hamburger">
<span class="hamburger__line"></span>
</label>
Expand All @@ -42,7 +42,7 @@
<li><a href="#" target="_blank" class="header__link hamburger__item">tlgrm</a></li>
<li><a href="#" target="_blank" class="header__link hamburger__item">vk</a></li>
</ul>
<a href="#" target="_blank" class="header__pay-link hamburger__item"><div class="header__dagger"></div> Поддержать</a>
<a href="#" target="_blank" class="header__pay-link hamburger__item"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="header__dagger"><rect x="12" y="6" width="1" height="13" class="header__dagger-rect"/><rect x="19" y="12" width="1" height="13" transform="rotate(90 19 12)" class="header__dagger-rect"/></svg> Поддержать</a>
</nav>
<a href="#" class="header__return-link"> Проекты<svg class="header__return-link-arrow arrow">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.7232e-08 6.52344L0.724826 5.79861L6.52344 -2.21465e-08L7.22631 0.702867L1.90563 6.02354L21 6.02354L21 7.02354L1.94976 7.02354L7.20139 12.2752L6.47656 13L0.702867 7.22631L7.7232e-08 6.52344Z"/>
Expand Down Expand Up @@ -148,14 +148,14 @@ <h2 class="section-title">Заголовок блока с тремя видео
<section class="gallery">
<h2 class="gallery__title section-title">Заголовок блока с фотографиями</h2>
<ul class="gallery-photo">
<li><img class="gallery-photo__item" src="./images/gallery-1.jpg" alt="2 актера"></li>
<li><img class="gallery-photo__item" src="./images/gallery-5.jpg" alt="монолог актрисы"></li>
<li><img class="gallery-photo__item" src="./images/gallery-8.jpg" alt="фотография актера"></li>
<li><img class="gallery-photo__item" src="./images/gallery-3.jpg" alt="хор"></li>
<li><img class="gallery-photo__item" src="./images/gallery-6.jpg" alt="зрительный зал со зрителями"></li>
<li><img class="gallery-photo__item" src="./images/gallery-4.jpg" alt="фотография актера"></li>
<li><img class="gallery-photo__item" src="./images/gallery-7.jpg" alt="чб фотография хора"></li>
<li><img class="gallery-photo__item" src="./images/gallery-2.jpg" alt="фотография актера"></li>
<li class="gallery-photo__container"><img class="gallery-photo__item" src="./images/gallery-1.jpg" alt="2 актера"></li>
<li class="gallery-photo__container"><img class="gallery-photo__item" src="./images/gallery-5.jpg" alt="монолог актрисы"></li>
<li class="gallery-photo__container"><img class="gallery-photo__item" src="./images/gallery-8.jpg" alt="фотография актера"></li>
<li class="gallery-photo__container"><img class="gallery-photo__item" src="./images/gallery-3.jpg" alt="хор"></li>
<li class="gallery-photo__container"><img class="gallery-photo__item" src="./images/gallery-6.jpg" alt="зрительный зал со зрителями"></li>
<li class="gallery-photo__container"><img class="gallery-photo__item" src="./images/gallery-4.jpg" alt="фотография актера"></li>
<li class="gallery-photo__container"><img class="gallery-photo__item" src="./images/gallery-7.jpg" alt="чб фотография хора"></li>
<li class="gallery-photo__container"><img class="gallery-photo__item" src="./images/gallery-2.jpg" alt="фотография актера"></li>
</ul>
</section>
<!-- Стас -->
Expand Down Expand Up @@ -376,7 +376,7 @@ <h2 class="play__title section-title">Заголовок блока с пьес
<h3 class="play__name">Солнечная линия</h3>
<a class="play__link play__look-link" href="#">
<p class="play__link-text">СМОТРЕТЬ ЧИТКУ</p>
<svg class="play__arrow arrow">
<svg class="play__arrow arrow">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9082 5.05887L19.9082 6.08393L19.9082 14.2844L18.9142 14.2844L18.9142 6.75983L5.41247 20.2616L4.70536 19.5545L18.1759 6.08393L10.749 6.08393L10.749 5.05887L18.9142 5.05887L19.9082 5.05887Z"/>
</svg>
</a>
Expand All @@ -395,7 +395,7 @@ <h3 class="play__name">Солнечная линия</h3>
<h3 class="play__name">МАМА</h3>
<a class="play__link play__look-link" href="#">
<p class="play__link-text">СМОТРЕТЬ ЧИТКУ</p>
<svg class="play__arrow arrow">
<svg class="play__arrow arrow">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9082 5.05887L19.9082 6.08393L19.9082 14.2844L18.9142 14.2844L18.9142 6.75983L5.41247 20.2616L4.70536 19.5545L18.1759 6.08393L10.749 6.08393L10.749 5.05887L18.9142 5.05887L19.9082 5.05887Z"/>
</svg> </a>
<a class="play__link play__download-link" href="#">
Expand All @@ -412,7 +412,7 @@ <h3 class="play__name">МАМА</h3>
<h3 class="play__name">Конкретные разговоры пожилых супругов ни о чём</h3>
<a class="play__link play__look-link" href="#">
<p class="play__link-text">СМОТРЕТЬ ЧИТКУ</p>
<svg class="play__arrow arrow">
<svg class="play__arrow arrow">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9082 5.05887L19.9082 6.08393L19.9082 14.2844L18.9142 14.2844L18.9142 6.75983L5.41247 20.2616L4.70536 19.5545L18.1759 6.08393L10.749 6.08393L10.749 5.05887L18.9142 5.05887L19.9082 5.05887Z"/>
</svg> </a>
<a class="play__link play__download-link" href="#">
Expand All @@ -429,7 +429,7 @@ <h3 class="play__name">Конкретные разговоры пожилых с
<h3 class="play__name">Опус ДНК</h3>
<a class="play__link play__look-link" href="#">
<p class="play__link-text">СМОТРЕТЬ ЧИТКУ</p>
<svg class="play__arrow arrow">
<svg class="play__arrow arrow">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9082 5.05887L19.9082 6.08393L19.9082 14.2844L18.9142 14.2844L18.9142 6.75983L5.41247 20.2616L4.70536 19.5545L18.1759 6.08393L10.749 6.08393L10.749 5.05887L18.9142 5.05887L19.9082 5.05887Z"/>
</svg> </a>
<a class="play__link play__download-link" href="#">
Expand All @@ -446,7 +446,7 @@ <h3 class="play__name">Опус ДНК</h3>
<h3 class="play__name">МАМА</h3>
<a class="play__link play__look-link" href="#">
<p class="play__link-text">СМОТРЕТЬ ЧИТКУ</p>
<svg class="play__arrow arrow">
<svg class="play__arrow arrow">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9082 5.05887L19.9082 6.08393L19.9082 14.2844L18.9142 14.2844L18.9142 6.75983L5.41247 20.2616L4.70536 19.5545L18.1759 6.08393L10.749 6.08393L10.749 5.05887L18.9142 5.05887L19.9082 5.05887Z"/>
</svg> </a>
<a class="play__link play__download-link" href="#">
Expand Down Expand Up @@ -523,22 +523,22 @@ <h2 class="footer__partners-heading footer__partners-heading_display-visibility_
<h2 class="footer__partners-heading footer__partners-heading_display-visibility_mobile">Онлайн-трансляции</h2>
<ul class="footer__links footer__links_content_partners">
<li>
<a href="https://www.prokhorovfund.ru/" target="_blank" class="footer__link">
<a href="https://www.prokhorovfund.ru/" target="_blank" class="footer__link-logo">
<img src="./images/logo-prokhorov.svg" alt="Логотип Фонда Михаила Прохорова" class="footer__partner-logo">
</a>
</li>
<li>
<a href="https://mosbrew.ru/" target="_blank" class="footer__link">
<a href="https://mosbrew.ru/" target="_blank" class="footer__link-logo">
<img src="./images/logo-mosbrew.svg" alt="Логотип ЗАО 'Московская пивоваренная компания'" class="footer__partner-logo">
</a>
</li>
<li>
<a href="https://sbtg.ru/" target="_blank" class="footer__link">
<a href="https://sbtg.ru/" target="_blank" class="footer__link-logo">
<img src="./images/logo-sbtg.svg" alt="Логотип организации интернет-трансляций и вебинаров" class="footer__partner-logo">
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCp2J7GRxQ36QLqW4ReLLt5g" target="_blank" class="footer__link">
<a href="https://www.youtube.com/channel/UCp2J7GRxQ36QLqW4ReLLt5g" target="_blank" class="footer__link-logo">
<img src="./images/logo-talk.svg" alt="Логотип авторского канала на YouTube 'А поговорить?'" class="footer__partner-logo">
</a>
</li>
Expand Down Expand Up @@ -592,12 +592,12 @@ <h2 class="section-title footer__address-heading">Площадка «8/3»</h2>
<div class="footer__icon-decorative"></div>
<p class="footer__authors-designers">
дизайн сайта &mdash;
<a href="https://ru.shishki.co/" target="_blank" class="footer__link" lang="en"><span class="footer__text_accent_underline">shishki.collective</span></a>
<a href="https://ru.shishki.co/" target="_blank" class="footer__link-authors" lang="en">shishki.collective</a>
</p>
</div>
<p class="footer__authors-developers">
вёрстка и разработка &mdash; студенты
<a href="https://practicum.yandex.ru/" target="_blank" class="footer__link"><span class="footer__text_accent_underline">Яндекс.Практикума</span></a>
<a href="https://practicum.yandex.ru/" target="_blank" class="footer__link-authors">Яндекс.Практикума</a>
</p>
</div>
</div>
Expand Down
13 changes: 5 additions & 8 deletions pages/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
@import url(../blocks/header/__links/_site-navigation/header__links_site-navigation.css);
@import url(../blocks/header/__links/_social/header__links_social.css);
@import url(../blocks/header/__dagger/header__dagger.css);
@import url(../blocks/header/__dagger-rect/header__dagger-rect.css);
@import url(../blocks/hamburger/hamburger.css);
@import url(../blocks/hamburger/__button/hamburger__button.css);
@import url(../blocks/hamburger/__line/hamburger__line.css);
Expand Down Expand Up @@ -65,17 +66,12 @@



/* galary */
/* gallery */
@import url(../blocks/gallery/gallery.css);
@import url(../blocks/gallery-photo/gallery-photo.css);
@import url(../blocks/gallery-photo/__container/gallery-photo__container.css);
@import url(../blocks/gallery-photo/__item/gallery-photo__item.css);

/* perfomances-three */



/* perfomances-two */



/* perfomances */
Expand Down Expand Up @@ -151,6 +147,8 @@
@import url(../blocks/footer/__links/footer__links.css);
@import url(../blocks/footer/__links/_content/footer__links_content_partners.css);
@import url(../blocks/footer/__link/footer__link.css);
@import url(../blocks/footer/__link-logo/footer__link-logo.css);
@import url(../blocks/footer/__link-authors/footer__link-authors.css);
@import url(../blocks/footer/__address/footer__address.css);
@import url(../blocks/footer/__address-heading/footer__address-heading.css);
@import url(../blocks/footer/__address-text/footer__address-text.css);
Expand All @@ -165,7 +163,6 @@
@import url(../blocks/footer/__authors-developers/footer__authors-developers.css);
@import url(../blocks/footer/__icon-decorative/footer__icon-decorative.css);
@import url(../blocks/footer/__text/footer__text.css);
@import url(../blocks/footer/__text/_accent/footer__text_accent_underline.css);

@import url(../blocks/popup/popup.css);
@import url(../blocks/popup/_opened/popup_opened.css);
Expand Down