feat: add styles for players section

MIU-cz · Jun 27, 2024 · 1079bab · 1079bab
1 parent aff0c2b
commit 1079bab
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 32 deletions.
diff --git a/Yandex/index.html b/Yandex/index.html
@@ -740,16 +740,18 @@ <h2 class="txt_main_h">Этапы преображения Васюков</h2>
 					<h2 class="txt_main_h">Участники турнира</h2>
 				</div>
 
-				<div class="players_cards_wraper">
-					<div class="player_card">
-						<figure class="card_img">
-							<img src="src/img/main/img-player.png" alt="player foto">
-						</figure>
-						<span class="card_name txt_player_name"></span>
-						<description class="card_dsc txt_player_description"></description>
-						<a href="#" class="card_btn txt_player_btn"></a>
-					</div>
-				</div>
+				<div class="content_players_cards">
+					<div class="players_cards_wraper">
+						<div class="player_card">
+							<figure class="card_img">
+								<img src="src/img/main/img-player.png" alt="player foto">
+							</figure>
+							<span class="card_name txt_player_name"></span>
+							<description class="card_dsc txt_player_description"></description>
+							<a href="#" class="card_btn txt_player_btn"></a>
+						</div>
+					</div>				
+				</div>	
 
 				<div class="player_btns slider_btns">
 					<button class="slider_btn" id="playerPrev">
@@ -769,6 +771,7 @@ <h2 class="txt_main_h">Участники турнира</h2>
 
 					</button>
 				</div>
+
 			</section>
 		</main>
 

diff --git a/Yandex/src/css/main.css b/Yandex/src/css/main.css
@@ -739,6 +739,15 @@
   right: -10%;
 }
 @media (min-width: 768px) {
+  .content_stage .stage_stages::after {
+    width: -moz-max-content;
+    width: max-content;
+    top: auto;
+    bottom: 15%;
+    right: -7%;
+  }
+}
+@media (min-width: 1024px) {
   .content_stage .stage_stages::after {
     width: -moz-max-content;
     width: max-content;
@@ -864,21 +873,85 @@
 
 .content_players {
   padding-top: 120px;
+  position: relative;
 }
 @media (min-width: 1366px) {
   .content_players {
     padding-top: 200px;
   }
 }
-.content_players .players_title {
-  position: relative;
+.content_players_cards {
+  margin-top: 40px;
+  width: 100%;
+  overflow: hidden;
+}
+@media (min-width: 768px) {
+  .content_players_cards {
+    margin-top: 60px;
+  }
 }
 
-.card_img {
-  width: -moz-max-content;
-  width: max-content;
+.players_cards_wraper {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+  -moz-column-gap: 20px;
+       column-gap: 20px;
+}
+@media (min-width: 768px) {
+  .players_cards_wraper {
+    grid-auto-columns: 50%;
+  }
+}
+@media (min-width: 1240px) {
+  .players_cards_wraper {
+    grid-auto-columns: 33.33%;
+  }
 }
 
+.player_card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.player_card .card_img {
+  width: 244px;
+  height: 244px;
+}
+@media (min-width: 1240px) {
+  .player_card .card_img {
+    width: 320px;
+    height: 320px;
+  }
+}
+.player_card .card_img img {
+  width: 100%;
+}
+.player_card .card_name {
+  padding-top: 28px;
+}
+.player_card .card_dsc {
+  padding: 8px 0 20px;
+}
+.player_btns {
+  display: flex;
+  margin-top: 40px;
+}
+@media (min-width: 1240px) {
+  .player_btns {
+    position: absolute;
+    margin-top: 0;
+    top: 120px;
+    right: 0;
+  }
+}
+@media (min-width: 1366px) {
+  .player_btns {
+    top: 220px;
+    right: 0;
+  }
+}
 .player_btns .slider_btn, .player_btns .pug_btn_item {
   background: #313131;
   color: #ffffff;

diff --git a/Yandex/src/css/main.css.map b/Yandex/src/css/main.css.map