страничка входа в лк

src/main.jsx

@@ -7,7 +7,7 @@ import './index.css';
 import ErrorPage from './pages/ErrorPage.jsx';
 import Index from './pages/Index.jsx';
 import Catalog from './pages/Catalog.jsx';
-// import Into from './pages/Into.jsx';
+import Into from './pages/Into.jsx';
 // import Login from './pages/Login.jsx';
 // import Subscribe from './pages/Subscribe.jsx';
 
@@ -23,11 +23,11 @@ const routes = [
     element: <Catalog />,
     title: 'Каталог',
   },
-  // {
-  //   path: '/into',
-  //   element: <Into />,
-  //   title: 'Вход',
-  // },
+  {
+    path: '/into',
+    element: <Into />,
+    title: 'Вход',
+  },
   // {
   //   path: '/login',
   //   element: <Login />,

src/pages/Into.jsx

@@ -0,0 +1,38 @@
+import '../pagescss/Into.css';
+
+const Into = () => {
+	return (
+		<>
+			<div className="body flex-fill d-flex flex-column justify-content-around align-items-center" id="main">
+				{/* <main className="main "> */}
+
+				{/* <div className="container d-flex flex-column justify-content-around align-items-center" id="body"> */}
+
+				<p className="text-label mt-4 d-flex flex-column align-items-center align-content-center">
+					Имя пользователя / электронная почта
+				</p>
+				<div className="mb-2 w-50">
+					<input id="username" className="form-control" placeholder="Имя пользователя / Эл. Почта" type="text"
+						required></input>
+				</div>
+
+				<p className="text-label d-flex flex-column align-items-center">
+					Пароль
+				</p>
+				<div className="mb-2 w-50">
+					<input id="password" className="form-control" placeholder="Пароль" type="text" required></input>
+				</div>
+
+				<div className="mt-4 h-25 d-flex flex-column justify-content-center mb-4">
+					<a href="lk.html"><button type="button" className="btn btn-light">Войти</button></a>
+				</div>
+				{/* </div> */}
+				{/* </main> */}
+			</div>
+
+		</>
+	);
+};
+
+export default Into;
+

src/pagescss/Into.css

@@ -0,0 +1,42 @@
+/* #main {
+	background-color: rgba(0, 0, 0, 0.6);
+	background-blend-mode: difference;
+} */
+
+#main {
+	background-color: #D8BAFF;
+	background-image: url("../assets/logotip_LC.png");
+	background-position: center;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-blend-mode: multiply;
+	color: white;
+}
+
+.text-label {
+	font-size: 25px;
+	text-align: center;
+}
+
+.btn {
+	width: 300px;
+	height: 50px;
+	font-size: 25px;
+	transition: 0.9s;
+}
+
+.btn:hover {
+	transform: scale(1.1);
+}
+
+@media screen and (max-width: 576px) {
+
+	.p {
+		font-size: min(10vw, 36px);
+	}
+
+	.btn {
+		font-size: min(10vw, 25px);
+		width: 30vh;
+	}
+}