Merge pull request #130 from Kumiho1/feature/person-it

Feature/person it
Elena-Cake · Oct 28, 2022 · 986f804 · 986f804
2 parents 2fbcd05 + 03ed4f5
commit 986f804
Show file tree

Hide file tree

Showing 20 changed files with 232 additions and 94 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/blocks/developers/__card/developers__card.css b/blocks/developers/__card/developers__card.css
@@ -0,0 +1,6 @@
+.developers__card {
+    display: flex;
+    flex-direction: column;
+    width: 210px;
+    margin-bottom: 20px;
+}
diff --git a/blocks/developers/__cards/developers__cards.css b/blocks/developers/__cards/developers__cards.css
@@ -0,0 +1,10 @@
+.developers__cards {
+    max-width: 800px;
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-bottom: 20px;
+}
diff --git a/blocks/developers/__name/developers__name.css b/blocks/developers/__name/developers__name.css
@@ -0,0 +1,10 @@
+.developers__name {
+    width: 64px;
+    font-family: 'Neue Machina';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 32px;
+    letter-spacing: -0.01em;
+    margin: 12px 0 0;
+}
diff --git a/blocks/developers/__photo/developers__photo.css b/blocks/developers/__photo/developers__photo.css
@@ -0,0 +1,5 @@
+.developers__photo {
+    width: 210px;
+    object-fit: cover;
+    aspect-ratio:	42/53
+}
diff --git a/blocks/developers/__subtitle/developers__subtitle.css b/blocks/developers/__subtitle/developers__subtitle.css
@@ -0,0 +1,9 @@
+.developers__subtitle {
+    width: 177px;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 22px;
+    margin: 12px 0 0;
+    align-self: end;
+}
diff --git a/blocks/developers/__title/developers__title.css b/blocks/developers/__title/developers__title.css
@@ -0,0 +1,4 @@
+.developers__title {
+    margin-bottom: 48px;
+}
+
diff --git a/blocks/developers/developers.css b/blocks/developers/developers.css
@@ -0,0 +1,8 @@
+.developers {
+  width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 55.5px 0;
+    overflow: hidden;
+  }
+
diff --git a/blocks/persons/persons.css b/blocks/persons/persons.css
@@ -3,7 +3,7 @@
   margin: 0 auto 0 calc(24px + (100vw - 767px)*264/(1440 - 767));
   display: flex;
   flex-direction: column;
-  padding: 55.5px 0 112px;
+  padding: 55.5px 0;
   overflow: hidden;
 }
 

diff --git a/blocks/play/__items/play__items.css b/blocks/play/__items/play__items.css
@@ -6,7 +6,6 @@
     gap: calc(100% * 30/1320);
     max-width: 1320px;
     width: 100%;
-    overflow: hidden;
     grid-template-columns: repeat(5, 1fr);
 }
 

diff --git a/blocks/slider/__buttons-container/_place/slider__buttons-container_place_play.css b/blocks/slider/__buttons-container/_place/slider__buttons-container_place_play.css
@@ -0,0 +1,5 @@
+@media screen and (max-width: 767px) {
+    .slider__buttons-container_place_play {
+  display: flex;
+    }
+  }
diff --git a/images/filyaev.jpg b/images/filyaev.jpg
diff --git a/images/peshehonova.jpg b/images/peshehonova.jpg
diff --git a/images/proydakov.jpg b/images/proydakov.jpg
diff --git a/images/sveshnikova.jpg b/images/sveshnikova.jpg
diff --git a/images/tovchennikov.jpg b/images/tovchennikov.jpg
diff --git a/images/zashlyapin.jpg b/images/zashlyapin.jpg
diff --git a/index.html b/index.html
diff --git a/pages/index.css b/pages/index.css
@@ -107,8 +107,7 @@
 @import url(../blocks/play/__link/play__link.css);
 @import url(../blocks/play/__link-text/play__link-text.css);
 @import url(../blocks/play/__arrow/play__arrow.css);
-@import url(../blocks/play/__arrow/_direction/play__arrow_direction_right.css);
-@import url(../blocks/play/__arrow/_direction/play__arrow_direction_bottom.css);
+@import url(../blocks/slider/__buttons-container/_place/slider__buttons-container_place_play.css);
 
 /* persons */
 @import url(../blocks/persons/persons.css);
@@ -173,3 +172,13 @@
 @import url(../blocks/buttons/__close-icon/buttons__close-icon.css);
 @import url(../blocks/buttons/__right-button/buttons__right-button.css);
 @import url(../blocks/buttons/__left-arrow/buttons__left-arrow.css);
+
+
+/* developers */
+@import url(../blocks/developers/developers.css);
+@import url(../blocks/developers/__title/developers__title.css);
+@import url(../blocks/developers/__cards/developers__cards.css);
+@import url(../blocks/developers/__card/developers__card.css);
+@import url(../blocks/developers/__photo/developers__photo.css);
+@import url(../blocks/developers/__name/developers__name.css);
+@import url(../blocks/developers/__subtitle/developers__subtitle.css);
diff --git a/scripts/slider.js b/scripts/slider.js
@@ -23,3 +23,18 @@ var splide2 = new Splide( '#splide_place_gallery-popup', {
   // fixedWidth : '75vw',
 } );
 
+var splidePlay = new Splide( '#splide_place_play', {
+  perPage: 5,
+  focus: 0,
+  autoWidth: true,
+  omitEnd: true,
+  drag: 'free',
+  snap: false,
+  mediaQuery: 'min',
+  breakpoints: {
+    1279: {
+      destroy: true,
+    },
+  }
+} );
+splidePlay.mount();