Skip to content

Commit 7cbc789

Browse files
Sarthakbh321Sarthakbh321
committed
login page
1 parent 998d581 commit 7cbc789

File tree

8 files changed

+219
-8
lines changed

8 files changed

+219
-8
lines changed

‎public/assets/main-logo-dark.svg

+30
Loading

‎public/assets/welcome-back.svg

+1
Loading

‎src/App.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
22
.App {
33
background-color: #2D076A;
4-
font-family: "Noto Sans", sans-serif;
4+
font-family: "Noto Sans JP", sans-serif;
55
color: white;
66
}

‎src/App.js

+16-5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@ import "./App.css";
22
import { useRef, useState } from "react";
33
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
44
import LandingPage from "./pages/Landing/LandingPage";
5+
import LoginPage from "./pages/LoginPage/LoginPage";
6+
import { createMuiTheme, ThemeProvider } from "@material-ui/core";
7+
8+
const theme = createMuiTheme({
9+
typography: {
10+
fontFamily: "Noto Sans JP",
11+
},
12+
});
513

614
function App() {
715
const [code, setCode] = useState("");
@@ -29,11 +37,14 @@ function App() {
2937

3038
return (
3139
<div className="App">
32-
<Router>
33-
<Switch>
34-
<Route exact path="/" component={LandingPage} />
35-
</Switch>
36-
</Router>
40+
<ThemeProvider theme={theme}>
41+
<Router>
42+
<Switch>
43+
<Route exact path="/" component={LandingPage} />
44+
<Route exact path="/login" component={LoginPage} />
45+
</Switch>
46+
</Router>
47+
</ThemeProvider>
3748
</div>
3849
);
3950
}

‎src/pages/Landing/LandingPage.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.landing-page {
22
padding-top: 2% !important;
3+
height: 100vh;
34
}
45

56
.nav {

‎src/pages/Landing/LandingPage.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const LandingPage = () => {
3737
className="jumbo-btn"
3838
onClick={() => history.push("/login")}
3939
>
40-
Start Now
40+
START NOW
4141
</button>
4242
</div>
4343
</Grid>

‎src/pages/LoginPage/LoginPage.css

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.login-page {
2+
height: 100vh;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
}
7+
8+
.login-box {
9+
height: 90vh !important;
10+
}
11+
12+
.login-img-div {
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
background-color: #eeeeee !important;
17+
border-top-right-radius: 4px;
18+
border-bottom-right-radius: 4px;
19+
}
20+
21+
.login-form {
22+
width: 100%;
23+
margin-top: 30px;
24+
margin-bottom: 20px;
25+
}
26+
27+
.login-label {
28+
font-weight: 500;
29+
margin-bottom: 0;
30+
color: rgb(85, 85, 85);
31+
}
32+
33+
.form-field {
34+
margin: 20px 0;
35+
}
36+
37+
.login-btn {
38+
cursor: pointer;
39+
width: 100%;
40+
padding: 4% 0;
41+
border: none;
42+
border-radius: 5px;
43+
color: white;
44+
font-weight: bold;
45+
background-color: #2D076A;
46+
letter-spacing: 2px;
47+
margin-top: 10px;
48+
}
49+
50+
.sign-up-div {
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
height: 100px;
55+
width: 100%;
56+
}
57+
58+
.singup-btn {
59+
cursor: pointer;
60+
width: 60%;
61+
padding: 4% 0;
62+
border: 1px solid #2D076A;
63+
border-radius: 30px;
64+
color: #2D076A;
65+
font-weight: bold;
66+
background-color: transparent;
67+
letter-spacing: 2px;
68+
margin-top: 10px;
69+
transition: 0.2s all ease-in-out;
70+
}
71+
72+
.singup-btn:hover {
73+
color: white;
74+
background-color: #2D076A;
75+
}

0 commit comments

Comments
 (0)