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

@@ -24,7 +24,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,22 @@
 'use strict';
+
+const dropdowns = document.querySelectorAll('.dropdown');
+
+dropdowns.forEach((dropdown) => {
+  const trigger = dropdown.querySelector('.dropdown__trigger');
+  const content = dropdown.querySelector('.dropdown__content');
+
+  const initialHeight = content.scrollHeight;
+
+  content.style.height = '0';
+
+  trigger.addEventListener('click', () => {
+    if (content.classList.contains('dropdown__content--active')) {
+      content.classList.remove('dropdown__content--active');
+      content.style.height = '0';
+    } else {
+      content.classList.add('dropdown__content--active');
+      content.style.height = `${initialHeight}px`;
+    }
+  });
+});

src/styles/blocks/button.scss

@@ -0,0 +1,28 @@
+.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/content.scss

@@ -0,0 +1,15 @@
+.content{
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+
+  &__item{
+    @include raleway-button;
+
+    color: $c-white;
+    font-size: 16px;
+    display: flex;
+    justify-content: left;
+  }
+}

src/styles/blocks/dropdown.scss

@@ -0,0 +1,62 @@
+.dropdown{
+  display: none;
+  position: relative;
+
+
+
+  @include on-tablet{
+    display: block;
+  }
+
+
+  &__trigger{
+    height: 24px;
+
+    background-color: $c-dark-green;
+    border: 0;
+    padding: 0;
+
+    @include hover(transform,scale(1.05))
+  }
+
+  &__ua{
+    @include raleway-button;
+
+
+    color: $c-white;
+    font-size: 16px;
+
+    &::after{
+      content: '⌄';
+      position: relative;
+      bottom: 6px;
+
+    }
+
+    &:hover::after{
+      animation: move 1s  1 forwards;
+    }
+  }
+
+    &__content{
+      position: absolute;
+      transition: height 0.3s;
+      height: 0;
+      overflow: hidden;
+
+    &--active{
+      height: auto;
+    }
+  }
+}
+
+@keyframes move {
+
+  from{
+    bottom: 12px;
+  }
+
+  to{
+    bottom: 5px;
+  }
+}

src/styles/blocks/events.scss

@@ -0,0 +1,105 @@
+.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));
+
+    width: 100%;
+    grid-column: 1/-1;
+    object-fit: contain;
+
+
+    @include on-tablet{
+      grid-column: span 3;
+    }
+
+    @include on-desktop{
+      grid-column: span 6;
+    }
+  }
+
+  &__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;
+    }
+  }
+}