feat: add players structure

Yandex/index.html

@@ -734,9 +734,43 @@ <h2 class="txt_main_h">Этапы преображения Васюков</h2>
 					</button>
 				</div>
 			</section> 
+
+			<section class="content content_players txt_player">
+				<div class="players_title">
+					<h2 class="txt_main_h">Участники турнира</h2>
+				</div>
+
+				<div class="players_cards_wraper">
+					<div class="player_card">
+						<figure class="card_img"></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="player_btns slider_btns">
+					<button class="slider_btn" id="playerPrev">
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"  class="bi bi-chevron-left" viewBox="0 0 16 16">
+							<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
+						  </svg>
+					</button>
+
+					<div class="card_num txt_player_pag">
+						<span class="txt_player_pag-from"></span>
+					</div>
+
+					<button class="slider_btn" id="playerNext">						
+						  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bi bi-chevron-right" viewBox="0 0 16 16">
+							<path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+						  </svg>
+
+					</button>
+				</div>
+			</section>
 		</main>
 
-		<footer>
+		<footer class="footer">
 			<section class="run-text">
 				<ul class="txt_marquee">
 					<li class="txt_marquee_item">Дело помощи утопающим — дело рук самих утопающих!</li>
@@ -762,5 +796,6 @@ <h2 class="txt_main_h">Этапы преображения Васюков</h2>
 		<script src="src/autor-resourse/autor-footer-script.js"></script>
 		<script src="src/js/animation.js"></script>
 		<script src="src/js/slider.js"></script>
+		<script src="src/js/players.js"></script>
 	</body>
 </html>

Yandex/readme.md

@@ -14,6 +14,7 @@
 * Карусель с этапами не должна быть зацикленной и не должна автоматически менять слайды.
 
 ---
+[git-hub](https://github.com/MIU-cz/My_works/tree/master/Yandex)
 [deploy](https://miu-cz.github.io/My_works/Yandex/)
 
 ---

Yandex/src/css/main.css

@@ -862,6 +862,35 @@
   background: #313131;
 }
 
+.content_players {
+  padding-top: 120px;
+}
+@media (min-width: 1366px) {
+  .content_players {
+    padding-top: 200px;
+  }
+}
+.content_players .players_title {
+  position: relative;
+}
+
+.player_btns .slider_btn, .player_btns .pug_btn_item {
+  background: #313131;
+  color: #ffffff;
+}
+.player_btns .slider_btn:hover, .player_btns .pug_btn_item:hover {
+  background: rgba(49, 49, 49, 0.2);
+}
+
+.footer {
+  padding-top: 100px;
+}
+@media (min-width: 1366px) {
+  .footer {
+    padding-top: 140px;
+  }
+}
+
 .footer_content {
   width: 100%;
   padding: 40px 20px;

Yandex/src/css/main.scss

@@ -445,7 +445,7 @@
 	.stage_title {
 		position: relative;
 
-		@media (min-width:768px) {
+		@media (min-width: 768px) {
 			width: 66.66%;
 		}
 
@@ -490,7 +490,7 @@
 		.stages_wraper {
 			counter-reset: stages;
 			display: grid;
-			
+
 			grid-auto-flow: column;
 			grid-auto-columns: 100%;
 			grid-template-rows: repeat(2, 150px);
@@ -579,7 +579,7 @@
 	justify-content: center;
 	gap: 16px;
 
-	@media (min-width:768px) {
+	@media (min-width: 768px) {
 		display: none;
 	}
 }
@@ -605,7 +605,7 @@
 	display: flex;
 	width: auto;
 	flex-direction: row;
-	align-items: center;	
+	align-items: center;
 	gap: 6px;
 }
 
@@ -619,15 +619,47 @@
 	&:hover {
 		background: $c-main-black;
 	}
-
 }
 
 .btn_active {
 	background: $c-main-black;
 }
 
+// ### PLAYERS ###
+.content_players {
+	padding-top: 120px;
+
+	@media (min-width: 1366px) {
+		padding-top: 200px;
+	}
+
+	.players_title {
+		position: relative;
+	}
+}
+
+.player_btns {
+	.slider_btn {
+		background: $c-main-black;
+		color: $c-main-white;
+
+		&:hover {
+			background: rgba($c-main-black, 0.2);
+		}
+	}
+}
+
 // ####################################################
 // ### FOOTER ###
+
+.footer {
+	padding-top: 100px;
+
+	@media (min-width: 1366px) {
+		padding-top: 140px;
+	}
+}
+
 .footer_content {
 	width: 100%;
 	padding: 40px 20px;

Yandex/src/js/players.js

@@ -0,0 +1 @@
+const playerCards = document.querySelector(".players_cards_wraper");