Skip to content

Commit

Permalink
Merge pull request #20 from ElizabethBil/collection
Browse files Browse the repository at this point in the history
  • Loading branch information
@ElizabethBil
ElizabethBil authored Oct 3, 2023
2 parents 2931138 + 18f152a commit 8d94adb
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 72 deletions.
31 changes: 16 additions & 15 deletions src/css/collection.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
/* OUR COLLECTION */

.collection-section {
background-image: url(../img/collection/bg-ornament-mob.png);
background-image: url(/img/collection/bg-ornament-mob.png);
background-repeat: no-repeat;
background-size: auto;
background-position-y: 298px;
background-size: 72px 177px;
background-position-y: 327px;
}

.collection-list-item:not(:last-child) {
Expand Down Expand Up @@ -42,7 +42,7 @@
font-style: normal;
font-weight: 500;
line-height: 1em;
letter-spacing: 0.05;
letter-spacing: 0.05em;
text-transform: uppercase;
}

Expand All @@ -51,15 +51,15 @@
color: rgba(252, 249, 249, 0.4);
font-size: 14px;
line-height: 1em;
letter-spacing: 0.05;
letter-spacing: 0.05em;
text-transform: uppercase;
}

@media screen and (min-width: 768px) {
.collection-section {
background-image: url(../img/collection/bg-ornament-tab.png);
background-position-y: 72px;
padding-top: 0;
background-image: url(/img/collection/bg-ornament-tab.png);
background-position-y: 271px;
background-size: 114px 300px;
}

.collection-list {
Expand All @@ -75,8 +75,9 @@

@media screen and (min-width: 1280px) {
.collection-section {
background-image: url(../img/collection/bg-ornament.png);
background-position-y: 232px;
background-image: url(/img/collection/bg-ornament.png);
background-size: 169px 300px;
background-position-y: 231px;
}

.collection-list {
Expand All @@ -90,8 +91,8 @@

@media screen and (min-width: 1440px) {
.collection-section {
background-image: url(../img/collection/bg-ornament.png);
background-position-y: 226px;
background-image: url(/img/collection/bg-ornament.png);
background-position-y: 301px;
}

.collection-list {
Expand All @@ -108,22 +109,22 @@
screen and (min-resolution: 2dppx) and (max-width: 767px),
screen and (min-device-pixel-ratio: 2) and (max-width: 767px) {
.collection-section {
background-image: url(../img/collection/[email protected]);
background-image: url(/img/collection/[email protected]);
}
}

@media screen and (min-resolution: 192dpi) and (min-width: 768px),
screen and (min-resolution: 2dppx) and (min-width: 768px),
screen and (min-device-pixel-ratio: 2) and (min-width: 768px) {
.collection-section {
background-image: url(../img/collection/[email protected]);
background-image: url(/img/collection/[email protected]);
}
}

@media screen and (min-resolution: 192dpi) and (min-width: 1280px),
screen and (min-resolution: 2dppx) and (min-width: 1280px),
screen and (min-device-pixel-ratio: 2) and (min-width: 1280px) {
.collection-section {
background-image: url(../img/collection/[email protected]);
background-image: url(/img/collection/[email protected]);
}
}
7 changes: 2 additions & 5 deletions src/css/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,12 @@
background-repeat: no-repeat;
background-size: 274px;
background-position: center bottom;
}
.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.is-open {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.header-content-container {
width: 274px;
height: 100%;
Expand Down
14 changes: 14 additions & 0 deletions src/js/modal.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
(() => {
const refs = {
openModalBtn: document.querySelector('[data-modal-open]'),
closeModalBtn: document.querySelector('[data-modal-close]'),
modal: document.querySelector('[data-modal]'),
};

refs.openModalBtn.addEventListener('click', toggleModal);
refs.closeModalBtn.addEventListener('click', toggleModal);

function toggleModal() {
refs.modal.classList.toggle('is-hidden');
}
})();
1 change: 1 addition & 0 deletions src/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './js/modal';
98 changes: 49 additions & 49 deletions src/partials/collection.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<section class="collection-section section">
<section class="collection-section section" id="our-collection">
<div class="collection-list-container container">
<h2 class="section-title">Our collection</h2>

Expand All @@ -7,14 +7,14 @@ <h2 class="section-title">Our collection</h2>
<picture>
<source
srcset="
../img/collection/desktop-1440/august-poltava-1440.jpg 400w,
../img/collection/desktop-1440/[email protected] 800w,
../img/collection/desktop-1280/august-poltava-1280.jpg 347w,
../img/collection/desktop-1280/[email protected] 694w,
../img/collection/tablet/august-poltava-tab.jpg 342w,
../img/collection/tablet/[email protected] 684w,
../img/collection/mob/august-poltava-mob.jpg 335w,
../img/collection/mob/[email protected] 670w
./img/collection/desktop-1440/august-poltava-1440.jpg 400w,
./img/collection/desktop-1440/[email protected] 800w,
./img/collection/desktop-1280/august-poltava-1280.jpg 347w,
./img/collection/desktop-1280/[email protected] 694w,
./img/collection/tablet/august-poltava-tab.jpg 342w,
./img/collection/tablet/[email protected] 684w,
./img/collection/mob/august-poltava-mob.jpg 335w,
./img/collection/mob/[email protected] 670w
"
sizes="(min-width: 1440px) 400px, (min-width: 1280px) 347px, (min-width: 768px) 342px, (min-width: 320px) 335px"
/>
Expand All @@ -35,14 +35,14 @@ <h3 class="collection-list-item-title">
<picture>
<source
srcset="
../img/collection/desktop-1440/gorgany-1440.jpg 400w,
../img/collection/desktop-1440/[email protected] 800w,
../img/collection/desktop-1280/gorgany-1280.jpg 347w,
../img/collection/desktop-1280/[email protected] 694w,
../img/collection/tablet/gorgany-tab.jpg 342w,
../img/collection/tablet/[email protected] 684w,
../img/collection/mob/gorgany-mob.jpg 335w,
../img/collection/mob/[email protected] 670w
./img/collection/desktop-1440/gorgany-1440.jpg 400w,
./img/collection/desktop-1440/[email protected] 800w,
./img/collection/desktop-1280/gorgany-1280.jpg 347w,
./img/collection/desktop-1280/[email protected] 694w,
./img/collection/tablet/gorgany-tab.jpg 342w,
./img/collection/tablet/[email protected] 684w,
./img/collection/mob/gorgany-mob.jpg 335w,
./img/collection/mob/[email protected] 670w
"
sizes="(min-width: 1440px) 400px, (min-width: 1280px) 347px, (min-width: 768px) 342px, (min-width: 320px) 335px"
/>
Expand All @@ -61,14 +61,14 @@ <h3 class="collection-list-item-title">women's blouse gorgany</h3>
<picture>
<source
srcset="
../img/collection/desktop-1440/mountain-1440.jpg 400w,
../img/collection/desktop-1440/[email protected] 800w,
../img/collection/desktop-1280/mountain-1280.jpg 347w,
../img/collection/desktop-1280/[email protected] 694w,
../img/collection/tablet/mountain-tab.jpg 342w,
../img/collection/tablet/[email protected] 684w,
../img/collection/mob/mountain-mob.jpg 335w,
../img/collection/mob/[email protected] 670w
./img/collection/desktop-1440/mountain-1440.jpg 400w,
./img/collection/desktop-1440/[email protected] 800w,
./img/collection/desktop-1280/mountain-1280.jpg 347w,
./img/collection/desktop-1280/[email protected] 694w,
./img/collection/tablet/mountain-tab.jpg 342w,
./img/collection/tablet/[email protected] 684w,
./img/collection/mob/mountain-mob.jpg 335w,
./img/collection/mob/[email protected] 670w
"
sizes="(min-width: 1440px) 400px, (min-width: 1280px) 347px, (min-width: 768px) 342px, (min-width: 320px) 335px"
/>
Expand All @@ -87,14 +87,14 @@ <h3 class="collection-list-item-title">mountain men's shirt</h3>
<picture>
<source
srcset="
../img/collection/desktop-1440/yasen-1440.jpg 400w,
../img/collection/desktop-1440/[email protected] 800w,
../img/collection/desktop-1280/yasen-1280.jpg 347w,
../img/collection/desktop-1280/[email protected] 694w,
../img/collection/tablet/yasen-tab.jpg 342w,
../img/collection/tablet/[email protected] 684w,
../img/collection/mob/yasen-mob.jpg 335w,
../img/collection/mob/[email protected] 670w
./img/collection/desktop-1440/yasen-1440.jpg 400w,
./img/collection/desktop-1440/[email protected] 800w,
./img/collection/desktop-1280/yasen-1280.jpg 347w,
./img/collection/desktop-1280/[email protected] 694w,
./img/collection/tablet/yasen-tab.jpg 342w,
./img/collection/tablet/[email protected] 684w,
./img/collection/mob/yasen-mob.jpg 335w,
./img/collection/mob/[email protected] 670w
"
sizes="(min-width: 1440px) 400px, (min-width: 1280px) 347px, (min-width: 768px) 342px, (min-width: 320px) 335px"
/>
Expand All @@ -113,14 +113,14 @@ <h3 class="collection-list-item-title">men's shirt yasen</h3>
<picture>
<source
srcset="
../img/collection/desktop-1440/crimea-1440.jpg 400w,
../img/collection/desktop-1440/[email protected] 800w,
../img/collection/desktop-1280/crimea-1280.jpg 347w,
../img/collection/desktop-1280/[email protected] 694w,
../img/collection/tablet/crimea-tab.jpg 342w,
../img/collection/tablet/[email protected] 684w,
../img/collection/mob/crimea-mob.jpg 335w,
../img/collection/mob/[email protected] 670w
./img/collection/desktop-1440/crimea-1440.jpg 400w,
./img/collection/desktop-1440/[email protected] 800w,
./img/collection/desktop-1280/crimea-1280.jpg 347w,
./img/collection/desktop-1280/[email protected] 694w,
./img/collection/tablet/crimea-tab.jpg 342w,
./img/collection/tablet/[email protected] 684w,
./img/collection/mob/crimea-mob.jpg 335w,
./img/collection/mob/[email protected] 670w
"
sizes="(min-width: 1440px) 400px, (min-width: 1280px) 347px, (min-width: 768px) 342px, (min-width: 320px) 335px"
/>
Expand All @@ -139,14 +139,14 @@ <h3 class="collection-list-item-title">women's blouse crimea</h3>
<picture>
<source
srcset="
../img/collection/desktop-1440/verkhovina-1440.jpg 400w,
../img/collection/desktop-1440/[email protected] 800w,
../img/collection/desktop-1280/verkhovina-1280.jpg 347w,
../img/collection/desktop-1280/[email protected] 694w,
../img/collection/tablet/verkhovina-tab.jpg 342w,
../img/collection/tablet/[email protected] 684w,
../img/collection/mob/verkhovina-mob.jpg 335w,
../img/collection/mob/[email protected] 670w
./img/collection/desktop-1440/verkhovina-1440.jpg 400w,
./img/collection/desktop-1440/[email protected] 800w,
./img/collection/desktop-1280/verkhovina-1280.jpg 347w,
./img/collection/desktop-1280/[email protected] 694w,
./img/collection/tablet/verkhovina-tab.jpg 342w,
./img/collection/tablet/[email protected] 684w,
./img/collection/mob/verkhovina-mob.jpg 335w,
./img/collection/mob/[email protected] 670w
"
sizes="(min-width: 1440px) 400px, (min-width: 1280px) 347px, (min-width: 768px) 342px, (min-width: 320px) 335px"
/>
Expand Down
6 changes: 3 additions & 3 deletions src/partials/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,15 @@
</a>
</li>
</ul>
<button class="header-button">
<button class="header-button" data-modal-open>
<svg class="header-button-icon" width="46" height="36">
<use href="./img/icons.svg#icon-navigation"></use>
</svg>
</button>
</div>
</header>
<!-- Mobile Menu -->
<div class="header-mobile-menu">
<div class="header-mobile-menu is-hidden" data-modal>
<div class="header-content-container">
<ul class="header-mobile-list">
<li class="header-menu-first-item">
Expand All @@ -83,7 +83,7 @@
</address>
</li>
<li class="header-menu-second-item">
<button class="header-mobile-button">
<button class="header-mobile-button" data-modal-close>
<svg class="header-mobile-icon" width="36" height="36">
<use href="./img/icons.svg#icon-close"></use>
</svg>
Expand Down

0 comments on commit 8d94adb

Please sign in to comment.