Сделали полное изменение структуры, изменили шрифт и цветовую палитру, переделали компонент Header и стили для него, остальные компоненты были временно удалены

2025-07-07 11:32:38 +03:00
parent c44b4a283c
commit ad0b6bc86a
8 changed files with 108 additions and 207 deletions
@@ -1,135 +1,64 @@
@use './assets/styles/variables' as *;

+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+}
+
+/* HEADER */
+
 .header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	border-bottom: 1px solid gainsboro;
+	padding: 30px 0;

-	padding: 20px;
-	background-color: white;
-
-	border-bottom-left-radius: 10px;
-	border-bottom-right-radius: 10px;
-
-	div {
-		&:first-child {
-			display: flex;
-			align-items: center;
-			gap: 20px;
-
-			h2 {
-				color: $primary-color;
-			}
-
-			input {
-				border-radius: 5px;
-				outline: none;
-				font-size: 16px;
-				border: 1px solid gainsboro;
-				padding: 5px 10px;
-
-				&:focus {
-					border: 1px solid $primary-color;
-				}
-			}
-		}
-
-		&:last-child {
-			display: flex;
-			align-items: center;
-			gap: 10px;
-
-			button {
-				outline: 0;
-				border: 0;
-				border-radius: 5px;
-				padding: 5px 15px;
-				font-size: 16px;
-				background-color: $primary-color;
-				color: $white-color;
-				font-weight: 600;
-				cursor: pointer;
-
-				&:hover {
-					background-color: $seconday-color;
-				}
-			}
-		}
-	}
-}
-
-.container {
-	max-width: 1220px;
-	margin: 0 auto;
-}
-
-.list {
-	display: flex;
-	justify-content: space-between;
-	flex-wrap: wrap;
-	border-radius: 10px;
-	margin-top: 100px; /* временно */
-	padding: 20px;
-	background-color: white;
-	list-style: none;
-}
-
-.product {
-	display: flex;
-	flex-direction: column;
-	width: 350px;
-	gap: 20px;
-	border-radius: 10px;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-}
-
-.title {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	h4 {
-		font-size: 18px;
+	h2 {
+		font-size: 24px;
 	}

-	.actions {
+	ul {
+		list-style: none;
+		display: flex;
+		gap: 48px;
+
+		a {
+			color: black;
+			text-decoration: none;
+			font-size: 16px;
+			cursor: pointer;
+		}
+	}
+
+	.search {
 		display: flex;
 		align-items: center;
-		gap: 5px;
+		background-color: #f5f5f5;
+		padding: 7px 12px;
+		gap: 35px;
+
+		input {
+			outline: 0;
+			border: 0;
+			background-color: #f5f5f5;
+			font-size: 12px;
+		}
+
+		img {
+			cursor: pointer;
+		}
+	}
+
+	.buttons {
+		display: flex;
+		gap: 16px;

 		button {
-			border: 1px solid $primary-color;
-			background-color: $white-color;
-			color: $primary-color;
-			border-radius: 5px;
+			background: none;
 			outline: 0;
-
-			font-size: 20px;
-			padding: 5px 10px;
-
+			border: 0;
 			cursor: pointer;
-
-			&:hover {
-				background-color: $seconday-color;
-				color: $white-color;
-			}
 		}
 	}
 }
-
-img {
-	border-radius: 10px;
-}
-
-.description {
-	color: gray;
-}
-
-.price {
-	font-weight: bold;
-}