new branch

.github/workflows/test.yml-template

@@ -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

README.md

@@ -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://SashaGlazko.github.io/Museum_2/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.

package.json

@@ -2,7 +2,6 @@
   "name": "museum_2",
   "version": "1.0.0",
   "description": "museum_2",
-  "homepage": "Museum_2",
   "scripts": {
     "init": "mate-scripts init",
     "start": "mate-scripts start",
@@ -24,7 +23,7 @@
     "@mate-academy/eslint-config": "latest",
     "@mate-academy/jest-mochawesome-reporter": "^1.0.0",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^2.1.1",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "latest",
     "cypress": "^13.13.0",
     "eslint": "^8.57.0",

src/scripts/main.js

@@ -1 +1,38 @@
 'use strict';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const dropdowns = document.querySelectorAll('.dropdown');
+
+  dropdowns.forEach((dropdown) => {
+    const trigger = dropdown.querySelector('.dropdown__trigger');
+    const content = dropdown.querySelector('.dropdown__content');
+
+    // спочатку ховаємо
+    content.style.height = '0';
+    content.style.overflow = 'hidden';
+    content.style.transition = 'height 0.3s ease';
+
+    trigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+
+      if (dropdown.classList.contains('is-open')) {
+        dropdown.classList.remove('is-open');
+        content.style.height = '0';
+      } else {
+        dropdown.classList.add('is-open');
+
+        const fullHeight = content.scrollHeight;
+
+        content.style.height = `${fullHeight}px`;
+      }
+    });
+
+    // клік поза dropdown закриває його
+    document.addEventListener('click', (e) => {
+      if (!dropdown.contains(e.target)) {
+        dropdown.classList.remove('is-open');
+        content.style.height = '0';
+      }
+    });
+  });
+});

src/styles/blocks/button.scss

@@ -0,0 +1,27 @@
+.button {
+  height: 60px;
+  border: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  background-color: $c-orange;
+  color: $c-white;
+  text-decoration: none;
+  cursor: pointer;
+
+  @include on-tablet {
+    max-width: 320px;
+  }
+
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: $c-dark-orange;
+  }
+
+  &:active {
+    background-color: $c-orange;
+    color: $c-white;
+  }
+}

src/styles/blocks/dropdown.scss

@@ -0,0 +1,57 @@
+.dropdown {
+  display: none;
+
+  @include on-tablet {
+    display: block;
+  }
+
+  position: relative; // батько для absolute
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    cursor: pointer;
+    background: $c-dark-green;
+    border: 0;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 10px;
+      height: 10px;
+      background-image: url(/src/images/icons/arrow-dow-icon.svg);
+      background-size: contain;
+      background-repeat: no-repeat;
+      margin-left: 5px;
+    }
+  }
+
+  &__content {
+    position: absolute; // dropdown не впливає на layout
+    top: 120%; // одразу під кнопкою
+    right: 0;
+    width: max-content;
+    height: 0;
+    overflow: hidden;
+    background: $c-dark-green;
+    border-radius: 4px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: height 0.3s ease;
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      @include raleway-thin;
+
+      font-weight: 450;
+      padding: 8px 12px;
+      cursor: pointer;
+      color: $c-white;
+    }
+  }
+}

src/styles/blocks/events.scss

@@ -0,0 +1,99 @@
+.events {
+  display: grid;
+
+  &__content {
+    display: grid;
+    row-gap: 60px;
+  }
+
+  &__wrapper {
+    display: grid;
+    gap: 60px;
+
+    @include on-tablet {
+      gap: 76px;
+    }
+  }
+
+  &__article {
+    @include page-grid;
+  }
+
+  &__picture {
+    @include hover(transform, scale(1.05));
+
+    max-height: 360px;
+    width: 100%;
+    grid-column: 1/-1;
+    object-fit: cover;
+
+    @include on-tablet {
+      grid-column: span 3;
+      max-height: 420px;
+    }
+
+    @include on-desktop {
+      grid-column: span 6;
+      max-height: 480px;
+    }
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    grid-column: 1/-1;
+
+    @include on-tablet {
+      grid-column: span 3;
+    }
+
+    @include on-desktop {
+      grid-column: span 6;
+    }
+  }
+
+  &__top {
+    display: grid;
+    gap: 10px;
+  }
+
+  &__date {
+    @include raleway-thin;
+
+    color: $c-orange;
+  }
+
+  &__title {
+    font-size: 20px;
+    color: $c-text;
+    margin: 0;
+
+    @include playfair-bold;
+
+    @include on-tablet {
+      font-size: 24px;
+    }
+  }
+
+  &__description {
+    color: $c-dark-gray;
+    font-size: 16px;
+    margin: 0;
+
+    @include additional-text;
+  }
+
+  &__button {
+    margin-top: 30px;
+
+    @include on-tablet {
+      min-width: 100%;
+    }
+
+    @include on-desktop {
+      min-width: 270px;
+    }
+  }
+}