login

Author: rrusyaidii

src/App.jsx

@@ -11,6 +11,7 @@ import FlashCards from "./components/mektefaie/FlashCards";
 import SliderCards from "./components/kelixirr/SliderCards";
 import Modal from "./components/sushantpokhrel/Modal";
 import Header from "./components/kelixirr/Header";
+import Login from "./components/rrusyaidii/Login";
 
 function App() {
  const [showToast, setShowToast] = useState(false);
@@ -29,6 +30,7 @@ function App() {
  <SliderCards />
  <Modal />
  <Header />
+ <Login />
 
  {/* Please Add Your Component Above This Line. Don't Add Div inside App, just component. Keep It Clean*/}
  <div
@@ -52,7 +54,6 @@ function App() {
  />
  )}
  </div>
- 
  </>
  );
 }

src/components/rrusyaidii/Login.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import styles from "./Login.module.css";
+import Author from "../../Author";
+
+const Login = () => {
+ return (
+ <>
+ <div className={styles.container}>
+ <form className={styles.form}>
+ <h2>Login</h2>
+ <input type="email" placeholder="Email" className={styles.input} />
+ <input
+ type="password"
+ placeholder="Password"
+ className={styles.input}
+ />
+ <button className={styles.button}>Login</button>
+ </form>
+ </div>
+ <Author name="rrusyaidii" githubLink="https://github.com/rrusyaidii" />
+ </>
+ );
+};
+
+export default Login;

src/components/rrusyaidii/Login.module.css

@@ -0,0 +1,38 @@
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f4f4f4;
+}
+
+.form {
+ background: white;
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ width: 320px;
+ text-align: center;
+}
+
+.input {
+ width: 100%;
+ padding: 10px;
+ margin: 10px 0;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+.button {
+ width: 100%;
+ padding: 10px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.button:hover {
+ background-color: #0056b3;
+}